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

Look at the old example from the answer. The example is mostly about another subject, but in the navigator bar you can see the "column chooser" button. Clicking on the button display column chooser dialog. You can drag any column name from the dialog and drop it on another location to change the column order. You can click on "-" to hide the column and drag any column from the list of hidden columns and drop it on in the list of visible columns.

重现行为你首先应该确保在jqGrid下载期间你选择了jQuery UI插件（ grid.jqueryui.js ）。然后你应该按照以下步骤：

To reproduce the behavior you should first be sure that during jqGrid downloading you have "jQuery UI addons" (grid.jqueryui.js) selected. Then you should follows the steps:

1. include ui.multiselect.css 来自jqGrid 4.0源码的plugins子目录。

1. include ui.multiselect.css from the plugins subdirectory of jqGrid 4.0 source.

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

include jQuery UI jquery-ui.min.js (not only jquery-ui.css needed typically for jqGrid)

include ui.multiselect.js 在 jquery-ui.min.js

include ui.multiselect.js after the jquery-ui.min.js

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

add new button which call the column chooser

代码可以如下所示

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

更新： 答案包含基于 columnChooser 的一些额外自定义的说明。 com / blog /？page_id = 393 / bugs / making-columnchooser-really-resizable /＃p25823rel =nofollow noreferrer>我的建议。

UPDATED: The answer contains description of some additional customization of columnChooser based on my suggestion.