php - 如何说服 JqGrid columnChooser 使用正确的接口(interface)？

Question

在jqGrid的演示网站上，columnChooser模块显示如下:

它允许您对列重新排序并选择要显示的列。

不幸的是，当我将这段代码输入到我的应用程序中时(应该使其显示与所描述的完全一样的代码):

jQuery("#colch").jqGrid('navButtonAdd','#pcolch',
                        { caption: "Columns",
                          title: "Reorder Columns",
                          onClickButton : function (){
                              jQuery("#colch").jqGrid('columnChooser');
                          } 
                        // ...

它显示一个列选择器；但是，它只允许您选择要显示的列，而不是显示的顺序。另一个明显的区别是，界面看起来与上面的完全不同，它只是一个列列表，您可以选择或取消选择，通过按住 Control 单击一次选择一个列，或按住 Shift 键单击批量选择。

这里是演示站点的链接，可用作引用。 http://trirand.com/blog/jqgrid/jqgrid.html

Answer 1

您遇到的问题是众所周知的。此处描述了列选择器功能 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#column_chooser这是jqGrid与其他外部组件集成的一个例子。存在一个 jQuery UI 小部件(插件)Mulitselect(参见 http://plugins.jquery.com/project/Multiselect 、 http://quasipartikel.at/multiselect/ 和 http://github.com/michael/multiselect/ )，主要由两个文件组成:

• ui.multiselect.css
• ui.multiselect.js

如果你仔细阅读http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#column_chooser您将找到有关此外部文件的信息。

因此，为了能够像您在演示页面上看到的那样使用列选择器功能，您需要执行以下操作(连同标准步骤):

• 包括ui.multiselect.css样式表
• 包含 jQuery UI JavaScript 文件，如 jquery-ui.min.js并且不仅仅是一个css(如jquery-ui-1.8.2.custom.css)需要jqGrid
• 包括ui.multiselect.js

如果你从http://www.trirand.com/blog/?page_id=6下载jqGrid您必须选择“查询 UI 插件”。文件ui.multiselect.css和ui.multiselect.js您将在子目录 src\css 中找到和src下载的 ZIP 文件。

您可以从http://quasipartikel.at/multiselect/下载多选小部件的可选附加本地化文件。或http://github.com/michael/multiselect/ .