是否有jQuery jEditable Multi-select插件? [英] Is there a jQuery jEditable Multi-select plugin?

问题描述

我正在使用出色的 jEditable 插件在我的页面上进行一些就地编辑.有一个地方，我需要多个选择元素.是否有一个jEditable插件可以让我执行此操作?

I'm using the excellent jEditable plugin for some in-place editing on my page. There is one spot I need a multiple select element. Is there a jEditable plugin that allows me to do this?

我一直在尝试使用 jEditable 作者的插件API创建自己的多重选择插件，但到目前为止没有骰子.关于API中每个函数的功能似乎还没有足够的文档.他提供的每个示例插件似乎都依赖于其他jQuery插件.我只需要一个基本的多重选择元素...

I've been trying to use the jEditable author's plugin API to create my own multiselect plugin, but no dice so far. There just doesn't seem to be quite enough documentation on what each function does in the API. And every single example plugin he provides appears to rely on other jQuery plugins. I just need a basic multiple select element...

推荐答案

我对Kalyan的建议做了一个小补丁，该建议使它在没有可选的"selected"选项的情况下无法正常工作，并且未对size属性进行硬编码.然后，我将其修改为jEditable插件，而不是必须粘贴到jEditable本身的东西.我目前正在客户网站上使用它，尽管我只使用json字符串填充它，所以其他方法可能仍然有问题.

I made a small patch to Kalyan's suggestion that caused it not to work without the optional "selected" option, and unhardcoded the size attribute. Then I modified it to be a jEditable plugin rather than something you have to paste into jEditable itself. I'm currently using this on a customer website, though I use it exclusively populated by a json string so other methods may still be buggy.

$.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 Multi-select插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！