jquery - 使用 jqgrid 的列选择器和 Eric Hynd 的多重选择

Question

我是 jQuery 的初学者，我正在尝试让一个简单的 columnChooser 为 jqGrid 工作。我使用 jqGrid 的导航栏插入“添加/删除列”按钮，并在该按钮的单击事件上显示列选择器。之前加载了多选插件，它使用它来显示带有复选框的列。

这是我的代码:

$("#myGrid")
    .jqGrid({
        ...
        toppager: true,
        pager: jQuery('#myPager'),
        ...
    })
    .jqGrid('navGrid', "#myPager", { //add the navigator (defaults to the bottom of the grid)
        edit: false, add: false, del: false, search: false, refresh: false, //remove all default buttons
        cloneToTop: true //clone it, so a new one is created on top of the grid (name of the clone is <id of grid>_toppager)
    })
    .jqGrid('navButtonAdd', "#myGrid_toppager", { //add a custom button to the cloned navigator
        caption: "show/hide columns",
        onClickButton: function () {
            var colChooser = $("#colchooser_myGrid");
            if (colChooser.length == 0) {
                $("#myGrid").jqGrid('columnChooser', {
                    width: 260,
                    height: 220,
                    classname: "column-chooser",
                    msel_opts: {
                        autoOpen: true,
                        header: false,
                        height: "auto",
                        classes: "column-chooser" },
                    dlog_opts: { modal: true, resizable: false }
                });
            }
            else {
                // ??
            }
        }
    });

还有我的 CSS:

.column-chooser .ui-multiselect-checkboxes {
    overflow-y: hidden;
}

我陷入了三件事:

• 按钮(确定和取消)不可见。我在内部 html 代码中没有找到它们。当我删除选项时，它们会出现，但多选不会调整大小以适合 columnChooser 对话框。
• 如何使多选“不可关闭”？我尝试添加 beforeclose: function () { return false; } 在 msel_opts 对象中，它可以工作，但是多选值始终保持可见，即使在关闭对话框时也是如此。
• 该对话框仅显示一次，然后再次拒绝。似乎是因为它已被创建，但 jqGrid 似乎在对话框和多选上都调用了 destroy，所以我无法再次显示它们。

我使用的是 jquery 1.4.4、jquery-ui 1.8.18、jqgrid 4.3.1 和 multiselect 1.12，均在 Firefox 11 下进行了测试。

Answer 1

这是我最终编写的用于向网格添加列选择器的代码:

var navButton = {
    caption: window.Constants.Grid.ShowHideColumns,
    onClickButton: function () {
        $(context.grid).jqGrid('columnChooser', {
            width: 260,
            height: 280,
            classname: "column-chooser",
            msel_opts: { //multiselect options
                autoOpen: true,
                header: false,
                height: "auto",
                classes: "column-chooser",
                beforeclose: function () { return false; } //keep multiselect drop down open  
            },
            dlog_opts: { //dialog options
                modal: false,
                resizable: false,
                draggable: false,
                dialogClass: "column-chooser",
                buttons: [
                    {
                        text: window.Constants.Dialog.OK,
                        click: function() {
                            var colModel = $(context.grid).jqGrid("getGridParam", "colModel");
                            $(".column-chooser .ui-multiselect-checkboxes li input[type=checkbox]").each(function () {
                                var colName = colModel[parseInt($(this).val(), 10)].name;
                                $(this).attr("checked") ? $(context.grid).showCol(colName) : $(context.grid).hideCol(colName);
                            });
                            $(this).dialog("close");
                        }
                    },
                    { text: window.Constants.Dialog.Cancel, click: function () { $(this).dialog("close"); } }
                ],
                close: function () {
                    $(".column-chooser").remove(); //remove all elements
                    PopupBox.hideFullOverlay();
                }
            }
        });

        PopupBox.showFullOverlay();
    }
};

var pager = $(context.grid).jqGrid("getGridParam", "pager");
$(context.grid)
    .jqGrid("navGrid", pager, { edit: false, add: false, del: false, search: false, refresh: false, cloneToTop: true }) //add a nav grid to the pager and top pager
    .jqGrid("navButtonAdd", pager, navButton) //add column button to pager
    .jqGrid("navButtonAdd", context.grid + "_toppager", navButton); //add column button to top pager

因此，在此代码中，context.grid 是网格的 id，并且此代码在创建网格之后被调用(即在看起来像 $(context.grid 的行之后) ).jqGrid({/* 插入 colmodel、寻呼机名称等 */}))

以下是针对我的所有问题所采取的措施:

• “确定”和“取消”按钮不可见:在选项中指定按钮
• 使多选不可关闭:在 beforeclose 中保留 return false，但在 dlog_opts 中使用 close 元素从页面中删除 select。不知何故，select 保留在页面中(作为根节点的子节点)。
• 解决选择器没有显示两次的问题:同样的事情。关闭对话框时删除所有元素。

我通过在每个创建的对象(多选、选择器、对话框)上设置相同的类来实现此目的。当我使用完它后，我使用这个类从我的 html 中删除所有内容。

根本问题是 jqGrid 没有为元素创建正确的 html 层次结构，可能是因为多选插件的工作方式(它隐藏了 select 元素并创建了 ul 旁边的列表包含复选框)。最后，我发现自己有 3 个 div，一个包含对话框，一个包含 ul，一个包含 select，它们都是 body< 的直接子级。/ 元素。关闭时，jqGrid 保留 select 元素，这会在我第二次打开选择器时中断它。