如何说服JqGrid columnChooser使用正确的接口？

Question

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

它使您既可以对列进行重新排序，又可以选择要显示的列。

不幸的是，当我将这部分代码输入到我的应用程序中时（该代码原本应该正确显示）：

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

它显示一个列选择器； 但是，它仅允许您选择要显示的列，而不选择显示顺序。 另一个明显的区别是，该界面看上去与上面的样子不同，它只是您选择或取消选择的一列列表，通过单击控制一次可将其选中，或按住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插件”。 您将在下载的ZIP文件的子目录src\\css和src中找到ui.multiselect.css和ui.multiselect.js文件。

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