Question

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

这是我的代码：

$("#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对话框。
如何让多重选择“不可关闭”？我尝试在msel_opts对象中添加beforeclose: function () { return false; }，但它可以工作，但是即使关闭对话框，多选值也始终可见。
对话框只显示一次，然后再次拒绝。它似乎是因为它已被创建，但似乎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({ /* insert colmodel, pager name, etc */ })之后的行）

以下是针对我所有问题所做的工作：

确定并取消按钮不可见：指定选项中的按钮

让multiselect不可合并：将return false保留在beforeclose中，但是使用dlog_opts中的close元素从页面中删除select。不知何故select停留在页面中（作为根节点的子节点）。

解决选择器没有显示两次的事实：同样的事情。关闭对话框时删除所有元素。

我通过在每个创建的对象（多选，选择器，对话框）上设置相同的类来完成此操作。当我使用它时，我使用这个类删除了我的html中的所有内容。

根本问题是jqGrid没有为元素创建正确的html层次结构，可能是因为多选插件的工作方式（它隐藏了select元素并创建了一个ul列表它包含复选框）。最后，我发现自己有3个div，一个包含对话框，一个包含ul，另一个包含select，body元素的所有直接子元素。关闭时，jqGrid会保留select元素，并在第二次打开选择器时将其分解。

Answer 2

我在the suggestion回答之后发布the answer之前的某个时间。在the answer我建议只使用我对columnChooser的修改替换原始jqGrid $.jgrid.extend({columnChooser : function(opts) {...}});。

在这种情况下，您将能够使用jQuery UI Dialog的beforeClose回调。您也可以使用beforeClose：

$grid.jqGrid('navButtonAdd', '#myGrid_toppager', {
    caption: "show/hide columns",
    //buttonicon: "ui-icon-calculator",
    //title: "Choose columns",
    onClickButton: function () {
        $(this).jqGrid('columnChooser', {
            dialog_opts: {
                beforeClose: function () {
                    return confirm("Do you want to close the dialog?");
                }
            }
        });
    }
});

小问题是“取消”按钮上的点击事件处理程序的当前实现columnChooser不会调用beforeClose。如果修改代码的相应部分，则可以轻松解决问题

buttons[opts.bCancel] = function(event) {
    opts.cleanup(true);
};

到

buttons[opts.bCancel] = function(event) {
    if (false === $(this).data("dialog")._trigger('beforeClose', event)) {
        return;
    }
    opts.cleanup(true);
};

见the demo。您会看到confirm("Do you want to close the dialog?")中的代码beforeClose将被执行。

使用jqgrid的columnchooser和Eric Hynd的multiselect

2 个答案: