如何说服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,您将找到有关此外部文件的信息.

因此,为了能够使用您在演示页面上看到的Column Chooser功能,您需要执行以下操作(一起执行标准步骤):

• 包括ui.multiselect.css样式表
• 包括jQuery UI JavaScript文件jquery-ui.min.js,而不仅仅是jquery-ui-1.8.2.custom.css需要jqGrid 的css(like )
• 包括 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/下载Mulitselect小部件的可选附加本地化文件.