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
Is there a full working example for a jqGrid ColumnChooser?
提问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
)。那么你应该遵循以下步骤:
include
ui.multiselect.css
from the plugins subdirectory of jqGrid 4.0 source.include jQuery UI
jquery-ui.min.js
(not onlyjquery-ui.css
needed typically for jqGrid)include
ui.multiselect.js
after thejquery-ui.min.js
add new button which call the column chooser
包含
ui.multiselect.css
来自 jqGrid 4.0 源代码的 plugins 子目录。包含 jQuery UI
jquery-ui.min.js
(不仅jquery-ui.css
通常需要 jqGrid)包括
ui.multiselect.js
在jquery-ui.min.js
添加调用列选择器的新按钮
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 columnChooser
based on my suggestion.