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

2022-01-19 00:00:00 multi-select javascript jqgrid

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

I'm using the jqGrid columnChooser, like so:

    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 上指定事件处理程序(使用 jQuery UI Multiselect 带有 jqGrid 的插件)在添加或删除列时触发.所以我想这是一个由两部分组成的问题:

and was wondering if there was a way to specify an event handler on the columnChooser (using the jQuery UI Multiselect plugin that comes w/ jqGrid) that fires any time a column is either added or removed. So I guess it's a two-part question:

  1. jQuery UI Multiselect 是否支持这样的事情?
  2. 如果是这样，有没有办法在不改变 jqGrid 源的情况下连接它?

我想要实现的一些背景知识:

A bit of background on what I'm trying to achieve:

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

My default grid configuration hides many columns. Some of these columns are not populated from the db - they are obscure, rarely used data elements that if populated would dramatically decrease the query execution performance (multiple joins involving tables with 100 million plus records).

如果用户选择其中一个列进行显示，我想警告他们需要再次往返服务器，这可能需要一段时间 - 并为他们提供取消列添加的选项.

Should a user pick one of these columns for display i'd like to warn them that another roundtrip to the server is required and it could take a while - and give them the option to cancel the column addition.

谢谢

推荐答案

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

I think I understand your problem and find your question interesting, so I wrote the demo for you which shows how one can solve the problem.

columnChooser 在内部使用 jQuery UI Multiselect 插件它使用 jQuery UI 可排序.所以我建议使用jQuery的 sortreceive 事件UI 可排序以捕获所需的信息.

columnChooser uses jQuery UI Multiselect plugin internally which uses jQuery UI Sortable. So I suggest to use sortreceive event of the jQuery UI Sortable to catch the information needed.

代码可以如下

$("#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');
            });

    }
});

查看演示这里.

代码在对话框初始化时列选择器中的列的initial列表的+"上绑定'click'事件.我想这对你来说已经足够了.如果需要，您可以轻松修改代码以支持在使用 columnChooser 时从左侧列表中删除的列的+"上的单击".

The code bind 'click' event on the "+" for the initial list of the columns which was in the column chooser at the initialization time of the dialog. I think it would be sufficient for you. If needed you can easy modify the code to support the 'click' on the "+" for the columns which will be removed from the left list during the work with the columnChooser.

我差点忘了提到我在演示改进版中使用了 columnChooser(参见答案)，但我上面的建议也适用于原始版本的 columnChooser.

I almost forget to mention that I used in the demo improved version of the columnChooser (see the answer), but my above suggestion works with the original version of columnChooser too.

相关文章