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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5901210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 19:26:04  来源:igfitidea点击:

Is there a full working example for a jqGrid ColumnChooser?

javascriptjqueryjquery-uijquery-pluginsjqgrid

提问by Christos Hayward

At http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methodsthere 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.

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

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

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

回答by Oleg

Look at the old examplefrom 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.

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

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:

要重现该行为,您首先应该确保在 jqGrid 下载期间选择了“jQuery UI 插件”( grid.jqueryui.js)。那么你应该遵循以下步骤:

  1. include ui.multiselect.cssfrom the plugins subdirectory of jqGrid 4.0 source.

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

  3. include ui.multiselect.jsafter the jquery-ui.min.js

  4. add new button which call the column chooser

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

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

  3. 包括ui.multiselect.jsjquery-ui.min.js

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

The code can be like the following

代码可以如下所示

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

UPDATED:The answercontains description of some additional customization of columnChooserbased on my suggestion.

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