是否有一个完整的jqGrid ColumnChooser工作示例？

Question

在http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods上有关于构建jqGrid列选择器的说明('dlog_opts是要传递给"dlog"的选项对象,或者(更多)很可能)一个创建选项对象的函数.默认为ui.dialog')生成一个合适的选项对象,但不是完整的工作代码; 没有提供所需功能的示例.

是否有一个完整的工作示例来构建一个允许隐藏,显示和移动列的jqGrid列选择器？

Answer 1

看看老例如从答案.该示例主要是关于另一个主题,但在导航栏中您可以看到"列选择器"按钮.单击按钮显示列选择器对话框.您可以从对话框中拖动任何列名称并将其放在另一个位置以更改列顺序.您可以单击" - "隐藏列并从隐藏列列表中拖动任何列,然后将其放在可见列列表中.

要重现该行为,首先应确保在jqGrid下载期间选择了"jQuery UI addons"(grid.jqueryui.js).然后你应该遵循以下步骤:

1. 包含ui.multiselect.css来自jqGrid 4.0源码的plugins子目录.

2. 包括jQuery UI jquery-ui.min.js(不仅jquery-ui.css通常需要jqGrid)

3. 包括ui.multiselect.js在之后jquery-ui.min.js

4. 添加调用列选择器的新按钮

代码可以如下所示

var grid = $('#list');
grid.jqGrid ('navButtonAdd', '#pager',
             { caption: "", buttonicon: "ui-icon-calculator",
               title: "Choose Columns",
               onClickButton: function() {
                    grid.jqGrid('columnChooser');
               }
             });

更新: 答案包含columnChooser基于我的建议的一些额外定制的描述.