是否有一个完整的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. include ui.multiselect.css 来自jqGrid 4.0源码的plugins子目录。

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

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

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

include ui.multiselect.js 在 jquery-ui.min.js

include ui.multiselect.js after the 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 的一些额外自定义的说明。 com / blog /？page_id = 393 / bugs / making-columnchooser-really-resizable /＃p25823rel =nofollow noreferrer>我的建议。

UPDATED: The answer contains description of some additional customization of columnChooser based on my suggestion.

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