javascript - 在 jqGrid ColumnChooser 上添加删除列处理程序

Question

我正在使用 jqGrid columnChooser ，像这样:

    jQuery(grid).jqGrid(
        'navButtonAdd',
        pagerDiv,
        {
            caption: "Columns",
            buttonicon: "ui-icon-newwin",
            title: "Hide/Show Columns",
            onClickButton: function () {
                $(this).jqGrid('columnChooser', {
                    done: function (perm) {
                        if (perm) {
                            $(this).jqGrid('remapColumns', perm, true);
                        }
                    },
                    modal: true,
                    width: 400,
                    height: 300,
                    classname: 'column-chooser-select'
                });
            }
        }
    );

并且想知道是否有一种方法可以在 columnChooser 上指定一个事件处理程序(使用 jqGrid 附带的 jQuery UI Multiselect 插件)，它会在添加或删除列时触发。所以我想这是一个由两部分组成的问题:

1. jQuery UI Multiselect 是否支持这样的事情？
2. 如果是这样，有没有办法在不改变 jqGrid 源代码的情况下将其连接起来？

一些关于我正在努力实现的目标的背景:

我的默认网格配置隐藏了许多列。其中一些列不是从数据库中填充的 - 它们是模糊的、很少使用的数据元素，如果填充这些元素会显着降低查询执行性能(涉及具有 1 亿多条记录的表的多个连接)。

如果用户选择这些列之一进行显示，我想警告他们需要与服务器进行另一次往返，这可能需要一段时间 - 并让他们选择取消列添加。

谢谢

Answer 1

我想我理解你的问题并且觉得你的问题很有趣，所以我为你写了演示如何解决这个问题。

columnChooser在内部使用 jQuery UI Multiselect 插件，它使用 jQuery UI Sortable。所以我建议使用 sortreceive jQuery UI Sortable 的事件以捕获所需的信息。

代码可以是下面的

$("#grid").jqGrid('navButtonAdd', '#pager', {
    caption: "",
    buttonicon: "ui-icon-calculator",
    title: "Choose columns",
    onClickButton: function () {
        $(this).jqGrid('columnChooser');
        $("#colchooser_" + $.jgrid.jqID(this.id) + " ul.selected")
            .bind("sortreceive", function (event, ui) {
                alert('column "' + ui.item.text() + '" is choosed');
            });
        $("#colchooser_" + $.jgrid.jqID(this.id) + " ul.available a.action")
            .click(function () {
                alert('column "' + $(this).parent().text() + '" is choosed');
            });

    }
});

查看演示 here .

代码将“click”事件绑定(bind)到列的初始列表的“+”上，该列表在对话框初始化时位于列选择器中。我想这对你来说就足够了。如果需要，您可以轻松修改代码以支持在使用 columnChooser 时从左侧列表中删除的列的“+”上的“点击”。

我几乎忘记提到我在演示中使用了 columnChooser 的改进版本(参见 the answer )，但我的上述建议适用于原始版本的 columnChooser 也是。