有 jQuery jEditable 多选插件吗?

发布于 2024-08-08 14:18:42 字数 392 浏览 2 评论 0原文

我正在使用优秀的 jEditable 插件在我的页面上进行一些就地编辑。有一个地方我需要一个多选元素。有没有 jEditable 插件可以让我做到这一点?

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

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?

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...

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

ヤ经典坏疍 2024-08-15 14:18:42

我对 Kalyan 的建议做了一个小补丁,导致它在没有可选的“选定”选项的情况下无法工作,并对大小属性进行了硬编码。然后我将其修改为 jEditable 插件,而不是必须粘贴到 jEditable 本身中的东西。我目前正在客户网站上使用它,尽管我只使用它由 json 字符串填充,因此其他方法可能仍然存在错误。

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

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');
            }
        });
    }
});
最舍不得你 2024-08-15 14:18:42

我也一直在寻找同样的东西。试图实现这一目标,但似乎没有任何效果。

顺便说一句,我发现了这个,但这似乎也不起作用 - http://pastebin.com/cbDndv5h

I have been looking for the same as well. Trying to achieve that, but nothing seems to work.

By the way, I found this but this doesnt seem to work either - http://pastebin.com/cbDndv5h

独木成林 2024-08-15 14:18:42

jeditable 插件可以做到这一点。
例子:

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

The jeditable plugin do this.
Example:

$('.editable').editable('http://www.example.com/save.php', { 
 data   : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
 type   : 'select',
 submit : 'OK'
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文