在jqGrid ColumnChooser上添加删除列处理程序 [英] Add Remove Column Handler on jqGrid ColumnChooser

问题描述

我正在使用 jqGrid columnChooser ，如下所示：

  jQuery（grid）.jqGrid（
'navButtonAdd'，
 pagerDiv，
 {
 caption：Columns，
 buttonicon：ui-icon-newwin，
 title：隐藏/显示列，
 onClickButton：function（）{
 $（this）.jqGrid（'columnChooser'， {
 done：function（perm）{
 if（perm）{
 $（this）.jqGrid（'remapColumns'，perm，true）; 
} 
 }，
模态：true，
宽度：400，
高度：300，
 classname：'column-chooser-sel等等'
}）; 
} 
} 
）; 
  

并且想知道是否有办法在columnChooser上指定事件处理程序（使用带有jqGrid的jQuery UI Multiselect 插件，无论何时添加或删除列，都会触发。所以我想这是一个由两部分组成的问题：

1. jQuery UI Multiselect是否支持这样的事情？


2. 如果是的话，有没有办法在没有改变jqGrid来源的情况下将其连接起来？

关于我的一些背景知识我试图实现：

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

如果用户选择其中一列进行显示，我想警告他们需要另一次到服务器的往返，这可能需要一段时间 - 并给他们取消添加列的选项。 / p>

谢谢

解决方案

我想我理解你的问题并找到你的问题有趣的是，所以我为你写了一个演示如何解决问题的演示。

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

代码可以是以下

  $（＃grid）。jqGrid（'navButtonAdd'，'＃pager'，{
 caption：，
 buttonicon：ui-icon-calculator，
标题：选择列，
 onClickButton：function（）{
 $（this）.jqGrid（'columnChooser'）; 
 $（＃colchooser_+ $ .jgrid.jqID（ this.id）+ul.selected）
 .bind（sortreceive，function（event，ui）{
 alert（'column'+ ui.item.text（）+'选择'）; 
}）; 
 $（＃colchooser_+ $ .jgrid.jqID（this.id）+ul.available a.action）
 .click（ function（）{
 alert（'column'+ $（this）.parent（）。text（）+'被选中'）; 
}）; 
 
 } 
}）; 
  

查看演示这里。

代码绑定点击事件在+上为初始对话框初始化时列选择器中列的列表。我认为这对你来说已经足够了。如果需要，您可以轻松修改代码以支持+上的点击列，这些列将在使用 columnChooser 工作期间从左侧列表中删除。

我几乎忘了提到我在演示中使用了 columnChooser 的改进版本（参见答案），但我的上述建议也适用于 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'
                });
            }
        }
    );

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. does the jQuery UI Multiselect support such a thing?
2. if so, is there a way to hook it up without altering the jqGrid source?

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

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.

Thanks

解决方案

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 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.

The code can be the following

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

    }
});

See the demo here.

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.

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.

这篇关于在jqGrid ColumnChooser上添加删除列处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！