无论如何要在 jqGrid 中包含 MultiSelect Combobox 吗？答案

【问题标题】：Is there anyway to include a MultiSelect Combobox in a jqGrid?无论如何要在 jqGrid 中包含 MultiSelect Combobox 吗？
【发布时间】：2012-06-06 12:56:32
【问题描述】：

我有一个 jqGrid，我希望一列是一个多选组合框。我得到了一个插件，

http://www.abeautifulsite.net/blog/2008/04/jquery-multiselect/

如何整合这些，以及如何获得选定的值？

【问题讨论】：

我个人更喜欢another multiselect plugin，但无论如何你应该清楚你在jqGrid中多选组合框的“包括”下的意思。您是指搜索还是编辑（哪一种编辑模式）或其他？
好的，我应该可以编辑多选组合框了。
您仍然没有回答您使用的是哪种编辑模式（内联编辑、表单编辑、单元格编辑）。一般来说，您应该只在dataInit 内初始化插件，但它可能是需要做的不同的小事情，例如具有正确的控件宽度和高度。这样的“小”东西在每种编辑模式下都会有所不同。
我不知道内联或表单编辑到底是什么意思这就是发生的事情如果我用鼠标单击选择行，则字段变得可编辑要求是，现在是可编辑列之一，我只是查看一个简单的下拉组合框。我希望它作为一个多选组合框，即下拉菜单里面应该有复选框。简单，带有可检查项目的下拉菜单
如果您想使用它，您必须对产品有基本的了解。您应该查看the official jqGrid demo page 并查看文档（例如here，您将看到描述编辑模式）。如果您不了解基础知识，您将难以理解问题的答案。

标签： jquery jquery-ui jqgrid

【解决方案1】：

例如，您可以使用jQuery UI MultiSelect Widget 来实现带有复选框的多选。

The demo 展示了如何实现这一点。你会得到如下结果

您可以使用不同的选项自定义多选插件。在演示中我使用了以下代码

edittype: 'select', editoptions: {
    value: 'FE:FedEx;TN:TNT;IN:Intim',
    dataInit: function (elem) {
        setTimeout(function () {
            $(elem).multiselect({
                minWidth: 100, //'auto',
                height: "auto",
                selectedList: 2,
                checkAllText: "all",
                uncheckAllText: "no",
                noneSelectedText: "Any",
                open: function () {
                    var $menu = $(".ui-multiselect-menu:visible");
                    $menu.width("auto");
                    return;
                }
            });
        }, 50);
    },
    multiple: true,
    defaultValue: 'IN'
}

我应该提到，您可以在不使用任何插件的情况下编辑多个可选列表。唯一的缺点是用户界面不会那么好。 The next demo 展示了没有多选插件的情况。

更新：如果您需要在加载后直接将所有行设置为编辑模式，您可以像在下一个演示中那样执行此操作。

【讨论】：

感谢您的回答奥列格，但这对我来说不起作用。如果我在另一行中选择下拉菜单，则一行中的下拉菜单的值会发生变化。我认为它正在被停用。我希望这些值一直存在，直到所有行都被编辑，最后我想一次保存所有值。等待您的答复。再次感谢
@sainath：我不完全明白你想要什么。你想实现依赖下拉列表还是想在每一行中启用下拉列表？我认为最后一个没有多大意义，因为下拉控件显示与文本“FedEx”或“FedEx，TNT”相同的信息。一次编辑多行并将所有行保存到服务器，这绝对是另一个问题。我不建议你这样做，但原因描述很长。在多用户环境中执行该行为时可能会遇到严重的并发问题。
不不，该方案不包括多用户环境。瞬间成为单个用户。绝对不会有并发问题。我希望在每一行中启用下拉菜单，并且选择的值在我将它们存储到 DB 之前一直存在。
@sainath：在这种情况下，您可以在循环中为loadComplete 内的所有网格行调用editRow。它将开始内联编辑。我不得不提一下，我知道没有实际案例，你有数据库，你可以确定没有其他人能够编辑数据库数据。如果您有数据库，那么一个用户可以修改数据。如果您打开网页，您可以离开并回来完成对旧数据的修改并覆盖更新的数据。如果修改后直接保存行，效果很快，问题也不会那么难。
@sainath: Here 是你可以做的一个例子。