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

Posted 2023-02-22

【中文标题】在 jqGrid ColumnChooser 上添加删除列处理程序

【英文标题】：Add Remove Column Handler on jqGrid ColumnChooser

【发布时间】：2012-05-13 10:07:55

【问题描述】：

我正在使用jqGridcolumnChooser，就像这样：

    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 插件），该处理程序在添加或删除列时触发。所以我想这是一个两部分的问题：

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

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

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

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

谢谢

【参考方案1】：

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

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

代码可以如下

$("#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。

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

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

【讨论】：

谢谢奥列格。这是完美的。

这需要哪些 javascript 插件？

@BhavikAmbani：jqGrid 的目录plugins 包含ui.multiselect.css 和ui.multiselect.js，这是必需的。此外，jQuery UI 也是必需的。

我使用了相同的方法，但现在显示方式不正确。它显示了非常大的列而不是多个选项，如果有，请提供具有完整功能的示例代码。

@BhavikAmbani：您可以在我的回答中找到对the demo 的引用。

【参考方案2】：

我在 JqGrid 中使用以下代码作为列选择器插件。当我勾选网格中的全选复选框时。我想排除特定列（默认情况下它不应该显示在我的网格中）。 我在 col 模型中使用了 hidden=True 属性。购买我也想在列选择器中处理这些。

function Properties_Columnchooser() 
    $('#btn_setColumns').click(function () 
        jQuery('#grid-tableProperties').jqGrid('columnChooser',
        "shrinkToFit" : true,
        "autowidth" : true,
        done : function(perm) 
            w = $(window).width();
            // alert('done ' + w);
            if (perm) 
               
                this.jqGrid("remapColumns", perm, true);
                 this.setGridWidth(w - 30, true);

                $('.ui-search-input').show();
             
             else 
            
            
        
    
);
    );

【讨论】：

大家好，谢谢你的建议 :) :)