Jeditable 的多选类型 - 就地编辑器插件答案

【问题标题】：Multiple Select type for Jeditable - In Place Editor pluginJeditable 的多选类型 - 就地编辑器插件
【发布时间】：2010-01-20 05:39:11
【问题描述】：

我在我的项目中使用 jeditable 动态更新许多不同类型的内容：文本、文本区域和选择。

我需要一种新类型来满足我的一个需求：一种可以称为“selectmulti”的多选类型。

编辑键入“selectmulti”的字段时，会出现一个选择列表，允许用户选择多个选项。保存会返回一个数组，update.php 会将此数组存储在我的数据库中。

例如：

<div class='border'>
  <span class='title'>Language: </span>
  <span class='editableLang' id='contact_language'>
    ".$row['contact_language']."
  </span>
</div>

还有Javascript函数：

    $('.editableLang').editable('update.php', { 
        data        : '<?php print json_encode($tab_lang); ?>',
        id          : 'cellid',
        name        : 'cellvalue',
        event       : 'dblclick',
        tooltip     : 'Double click to edit...',
        submitdata  : {id: "<?php echo $id_contact; ?>"},
        type        : 'selectmulti',
        style       : 'display: inline',
        submit      : 'Save',
        cancel      : 'Cancel'
     });

我只是不知道如何获取数组中的不同值（在我的情况下，'cellvalue' 将是数组）并将其保存在数据库中。

任何帮助或建议将不胜感激！

干杯

【问题讨论】：

标签： jquery select jeditable

【解决方案1】：

只是一次更正。这可行，但是 - 显然 - 当您调用可编辑而不是“选择”时，您必须使用“多选”作为参数“类型”的值：

$('.editable').editable('http://www.example.com/save.php', { 
 data   : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
 type   : 'multiselect',
 submit : 'OK'
});

【讨论】：

【解决方案2】：

如果有人感兴趣，我的解决方案在 jsbin 上：http://jsbin.com/ixuye4/edit

【讨论】：

见这里：stackoverflow.com/questions/1597756/…

【解决方案3】：

这对我有用！

$.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');
            }
        });
    }
});

$('.editable').editable('http://www.example.com/save.php', { 
 data   : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
 type   : 'select',
 submit : 'OK'
});

http://pastebin.com/tZwHMHQD

【讨论】：

你应该把代码放在这里，而不是仅仅放置一个指向 pastebin 的链接，否则你的答案可能会受到链接腐烂的影响。

【解决方案4】：

如果有人碰巧正在寻找一个快速而肮脏的解决方案：

$.editable.addInputType('multi', {
    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);

        }

    }
});

【讨论】：