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

时间:2012-05-03 20:45:26

标签: javascript jqgrid multi-select

我正在使用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上指定一个事件处理程序(使用w / jqGrid附带的jQuery UI Multiselect插件),无论何时添加或删除列,都会触发该事件处理程序。所以我想这是一个由两部分组成的问题:

  1. jQuery UI Multiselect是否支持这样的事情?
  2. 如果是这样,有没有办法在不改变jqGrid源的情况下将其连接起来?
  3. 关于我正在努力实现的目标的一些背景知识:

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

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

    由于

2 个答案:

答案 0 :(得分:5)

我想我理解你的问题并发现你的问题很有趣,所以我为你编写了演示程序,展示了如何解决这个问题。

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

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

我几乎忘记提及我在columnChooser的演示改进版本中使用过(请参阅the answer),但我的上述建议也适用于columnChooser的原始版本。< / p>

答案 1 :(得分:1)

我在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 
            {
            }
        }
    }
);
    });
}