jqGrid 5.2.1 中使用 columnChooser

jqGrid 5.2.1 中的 columnChooser 是一个非常有用的功能，它允许用户自定义表格的列显示和隐藏。使用 columnChooser，您可以通过一个简单的对话框轻松地添加或删除列，而无需修改表格代码。

要使用 columnChooser，您需要在 jqGrid 的选项中启用该功能。您可以使用以下代码：

$("#grid").jqGrid({
    // ...
    colModel: [
        { name: "id", width: 50 },
        { name: "name", width: 100 },
        { name: "email", width: 150 },
        // ...
    ],
    viewrecords: true,
    rownumbers: true,
    rownumWidth: 40,
    caption: "My Grid",
    pager: "#pager",
    // Enable column chooser
    colMenu: true
});

在上面的代码中，我们通过将 colMenu 选项设置为 true 启用了 columnChooser 功能。现在，当用户右键单击表格的标题行时，将显示一个列选择器对话框，用户可以选择要显示或隐藏的列。

如果您想要自定义列选择器对话框的外观和行为，您可以使用 columnChooserOptions 选项。例如：

$("#grid").jqGrid({
    // ...
    colMenu: true,
    columnChooserOptions: {
        width: 450,
        height: 350,
        modal: true,
        caption: "Custom Column Chooser",
        done: function(perm) {
            // ...
        }
    }
});

在上面的代码中，我们使用 columnChooserOptions 选项自定义了列选择器对话框。我们设置了宽度、高度、标题和 done 回调函数，在用户完成选择后调用该函数。在 done 函数中，您可以执行任何您想要的操作，例如保存用户选择的列，重新加载表格等等。