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

时间:2011-05-05 16:36:32

标签: javascript jquery jquery-ui jquery-plugins jqgrid

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods处有关于构建jqGrid列选择器的说明('dlog_opts是要传递给“dlog”的选项对象,或者(更有可能)是创建选项对象的函数。 ui.dialog')的合适选项对象,但不是完整的工作代码;没有提供所需功能的例子。

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

1 个答案:

答案 0 :(得分:18)

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

要重现这种行为,首先应确保在jqGrid下载过程中选择了“jQuery UI插件”(grid.jqueryui.js)。然后你应该遵循以下步骤:

  1. 从jqGrid 4.0 source的plugins子目录中包含ui.multiselect.css

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

  3. ui.multiselect.js

  4. 之后加入jquery-ui.min.js
  5. 添加调用列选择器的新按钮

  6. 代码可以如下

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

    更新 The answer包含基于my suggestioncolumnChooser的其他自定义说明。