jqGrid ColumnChooser 是不是有完整的工作示例？ [关闭]

Posted 2023-05-09

【中文标题】jqGrid ColumnChooser 是不是有完整的工作示例？ [关闭]

【英文标题】：Is there a full working example for a jqGrid ColumnChooser? [closed]jqGrid ColumnChooser 是否有完整的工作示例？ [关闭]

【发布时间】：2011-08-19 13:29:39

【问题描述】：

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods 有构建 jqGrid 列选择器的说明（'dlog_opts 是要传递给“dlog”的选项对象，或者（更可能）是创建选项对象的函数。默认生成一个合适的ui.dialog'的选项对象），但不是完整的工作代码；没有提供所需功能的示例。

是否有一个完整的工作示例来构建允许隐藏、显示和移动列的 jqGrid 列选择器？

【参考方案1】：

从the answer 看the old example。该示例主要是关于另一个主题，但在导航栏中，您可以看到“列选择器”按钮。单击按钮显示列选择器对话框。您可以从对话框中拖动任何列名并将其放在另一个位置以更改列顺序。您可以单击“-”来隐藏该列，然后将任何列从隐藏列列表中拖放到可见列列表中。

要重现该行为，您首先应确保在 jqGrid 下载期间您选择了“jQuery UI 插件”(grid.jqueryui.js)。然后你应该按照以下步骤操作：

在 jqGrid 4.0 源代码的 plugins 子目录中包含 ui.multiselect.css。

包括 jQuery UI jquery-ui.min.js（不仅是 jqGrid 通常需要的 jquery-ui.css）

在jquery-ui.min.js 之后包含ui.multiselect.js

添加调用列选择器的新按钮

代码可以如下所示

var grid = $('#list');
grid.jqGrid ('navButtonAdd', '#pager',
              caption: "", buttonicon: "ui-icon-calculator",
               title: "Choose Columns",
               onClickButton: function() 
                    grid.jqGrid('columnChooser');
               
             );

更新：The answer 包含对基于my suggestion 的columnChooser 的一些额外自定义的描述。

【讨论】：

接受并点赞。 （谢谢！）

@JonathanHayward：不客气！

感激不尽！！！这为我节省了数小时无用的工作。

@FastTrack：不客气！如果您现在使用 columnCooser“玩”另一个 my suggestion 可能对您来说也很有趣。该建议尚未包含在 jqGrid 的主代码中。

@FastTrack：好的，现在我明白你的意思了。解决方案非常简单。您可以使用$(this).jqGrid('columnChooser', modal: true);。因为现在没有记录选项modal（请参阅here），最好将问题作为单独的问题发布，我会写给你答案。在我们与其他人分享解决方案的方式。我认为，这个问题对其他用户来说可能很有趣。