jqGrid ColumnChooser 是否有完整的工作示例? [英] Is there a full working example for a jqGrid ColumnChooser?

问题描述

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

At http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods there are instructions for building a jqGrid column chooser ('dlog_opts is either an option object to be passed to "dlog", or (more likely) a function that creates the options object. The default produces a suitable options object for ui.dialog'), but not complete working code; no example is provided of the function that is required.

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

Is there a complete working example for building a jqGrid column chooser that will allow hiding, showing, and moving columns?

推荐答案

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

Look at the old example from the answer. The example is mostly about another subject, but in the navigator bar you can see the "column chooser" button. Clicking on the button display column chooser dialog. You can drag any column name from the dialog and drop it on another location to change the column order. You can click on "-" to hide the column and drag any column from the list of hidden columns and drop it on in the list of visible columns.

要重现该行为，您应该首先确保在 jqGrid 下载期间选择了jQuery UI 插件"(grid.jqueryui.js).然后您应该按照以下步骤操作:

To reproduce the behavior you should first be sure that during jqGrid downloading you have "jQuery UI addons" (grid.jqueryui.js) selected. Then you should follows the steps:

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

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

include jQuery UI jquery-ui.min.js (not only jquery-ui.css needed typically for jqGrid)

在 jquery-ui.min.js

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

add new button which call the column chooser

代码如下

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

更新:答案包含对columnChooser<的一些额外自定义的描述/code> 基于 我的建议.

这篇关于jqGrid ColumnChooser 是否有完整的工作示例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！