实例:
<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);
}