jquery jeditable 多选插件 （checkbox or select）

 

实例：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jeditable.mini.js"></script>

<!-- multiselect -->
<script type="text/javascript" src="jquery.jeditable.multiselect.js"></script>

<!-- multiply checkboxes -->
<script type="text/javascript" src="jquery.jeditable.checkboxes.js"></script>

<script>
$(function() 
{
    $('.checkboxes').editable('save.php', {
     	data            : " {'E':'Letter E','F':'Letter F','G':'Letter G'}",
     	type            : 'multi_checkboxes',
     	wrapper_class   : 'checkboxes',
     	checkboxed      : "['G', 'F']",
     	checkbox_name   : 'boxes',
     	submit : "OK",
		cancel : "Cancel",
		onblur : "cancel",
		submitdata : function(value,setting) { return { select : array2str($(this).find('span').find('input[type=checkbox]:checked')) }; },
		callback : function(value, settings) { $(this).text(value); },
    });
    
	$('.multiselect').editable('save.php', { 
	 	data   : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
		type   : 'multiselect',
	 	submit : 'OK'
	});
});
</script>

<div style="border:red 1px solid;" class="checkboxes"> checkboxes !</div>
<div style="border:red 1px solid;" class="checkboxes"> checkboxes !</div>

<div style="border:red 1px solid;" class="multiselect"> multiselect !</div>

 

save.php

<?php

echo $_POST['select'].',';

 

jquery.jeditable.multiselect.js

/*
 * multiselect for Jeditable
 *
 * Copyright (c) 2008 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 * 
 * Depends on Autogrow jQuery plugin by Chrys Bader:
 *   http://www.aclevercookie.com/facebook-like-auto-growing-textarea/
 *
 * Project home:
 *   http://www.appelsiini.net/projects/jeditable
 *
 * Revision: $Id$
 *
 */

$.editable.addInputType("multiselect", {
    element: function (settings, original) {
        var select = $('<select multiple="multiple" />');

        if (settings.width != 'none') { select.width(settings.width); }
        if (settings.size) { select.attr('size', settings.size); }

        $(this).append(select);
        return (select);
    },
    content: function (data, settings, original) {
        /* If it is string assume it is json. */
        if (String == data.constructor) {
            eval('var json = ' + data);
        } else {
            /* Otherwise assume it is a hash already. */
            var json = data;
        }
        for (var key in json) {
            if (!json.hasOwnProperty(key)) {
                continue;
            }
            if ('selected' == key) {
                continue;
            }
            var option = $('<option />').val(key).append(json[key]);
            $('select', this).append(option);
        }

        if ($(this).val() == json['selected'] ||
                            $(this).html() == $.trim(original.revert)) {
            $(this).attr('selected', 'selected');
        }

        /* Loop option again to set selected. IE needed this... */
        $('select', this).children().each(function () {
            if (json.selected) {
                var option = $(this);
                $.each(json.selected, function (index, value) {
                    if (option.val() == value) {
                        option.attr('selected', 'selected');
                    }
                });
            } else {
                if (original.revert.indexOf($(this).html()) != -1)
                    $(this).attr('selected', 'selected');
            }
        });
    }
});

 

jquery.jeditable.checkboxes.js

/*
 * checkboxes input for Jeditable
 *
 * Copyright (c) 2013- by Gideon
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 * 
 * Revision: $Id$
 *
 */

	$.editable.addInputType("multi_checkboxes", 
	{
		element: function (settings, original) {
            var $wrapper = $('<span class="'+settings.wrapper_class+'" />');
     
            $(this).append($wrapper);
            return ($wrapper);
        },
        content: function (data, settings, original) {
            /* If it is string assume it is json. */
            if (String == data.constructor) eval('var json = ' + data);
            /* Otherwise assume it is a hash already. */
            else var json = data;
            
            for (var key in json) 
            {
                if (!json.hasOwnProperty(key)) continue;
                if ('checked' == key) continue;
                
                //alert(key); alert(json[key]);
                var $checkbox = $('<input type="checkbox" name="'+settings.checkbox_name+'[]">').val(key).after(json[key]);
                $('.'+settings.wrapper_class, this).append($checkbox);
            }
     
            if ($(this).val() == json['checked'] || $(this).html() == $.trim(original.revert)) $(this).attr('checked', 'checked');
     
            /* Loop $checkbox again to set checked. IE needed this... */
            $('.'+settings.wrapper_class, this).children().each(function () { if (in_array($(this).val(),settings.checkboxed)) $(this).attr('checked', 'checked'); });
        }
    });

	function in_array (needle, haystack, argStrict) 
    {
		var key = '', strict = !! argStrict;
	
	  	if (strict) { for (key in haystack) { if (haystack[key] === needle) return true; } } 
	  	else { for (key in haystack) { if (haystack[key] == needle) return true; } }
	  	return false;
	}

	function array2str($obj)
	{
		var $array = new Array();
		$obj.each(function(){ $array.push($(this).val()); });
		return $array.join(','); alert($str);
	}
	

 

本文地址：http://justcoding.iteye.com/blog/1994162