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

问题描述：

在演示网站jqGrid的，该columnChooser模块显示如下：我如何说服JqGrid columnChooser使用正确的界面？

alt text

它可以让你既列重新排序，选择哪些列显示。

不幸的是，当我进入这部分代码到我的应用程序（也就是想使这个看起来完全一样描绘的代码）：

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

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

以下是演示网站的链接，以供参考。 http://trirand.com/blog/jqgrid/jqgrid.html

答

你有的问题是众所周知的。 Column Chooser功能在此处描述为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您可以在下载的ZIP文件的子目录src\css和src中找到。

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

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

相关推荐