如何说服JqGrid columnChooser使用正确的界面？

Question

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

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

不幸的是，当我将这段代码输入到我的应用程序中时（假设这个代码看起来与描绘完全一样）：

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

显示列选择器;但是，它只允许您选择要显示的列而不是显示的顺序。另一个明显的区别是界面看起来与上面没有任何区别，它只是您选择或取消选择的列列表，通过控制单击一次选择一个或按住Shift键单击以批量选择。< / p>

以下是演示网站的链接，可用作参考。 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，您将找到有关此外部文件的信息。

因此，为了能够使用您在演示页面上看到的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插件”。您可以在下载的ZIP文件的子目录ui.multiselect.css和ui.multiselect.js中找到文件src\css和src。

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