如何更改 jqgrid 中弹出的列选择器中的列名称？

我有一个两列标题 Phase1 和 Phase 2（图像 1）。现在在列选择器窗口中显示列名称（图 2）

1. Name
2. 类别
3. 子类别
4. 类别
5. 子类别

我想以不同的方式展示

1. Name
2. 一等奖组
3. 一期子类别
4. Ph2组

5. Ph2子类别

   注意：根据我的要求不要更改列名

       $grid.jqGrid({
           data: mydata,
           datatype: "local",
           colNames:['Name','Category','Subcategory','Category','Subcategory'],
           colModel: [
               {name: "Name"},
               {name: "Category"},
               {name: "Subcategory"},
               {name: "PRCategory"},
               {name: "PRSubcategory"}
           ],
           cmTemplate: {width: 200},
           gridview: true,
           autoencode: true,
           sortname: "Name",
           viewrecords: true,
           rownumbers: true,
           sortorder: "desc",
           ignoreCase: true,
           pager: "#pager",
           height: "auto",
           caption: "How to use filterToolbar better locally"
       }).jqGrid("navGrid", "#pager",
           {edit: false, add: false, del: false, search: false, refresh: false});
   
       setSearchSelect.call($grid, "Category");
       setSearchSelect.call($grid, "Subcategory");
   
       $grid.jqGrid("setColProp", "Name", {
           searchoptions: {
               sopt: ["cn"],
               dataInit: function (elem) {
                   $(elem).autocomplete({
                       source: getUniqueNames.call($(this), "Name"),
                       delay: 0,
                       minLength: 0,
                       select: function (event, ui) {
                           var $myGrid, grid;
                           $(elem).val(ui.item.value);
                           if (typeof elem.id === "string" && elem.id.substr(0, 3) === "gs_") {
                               $myGrid = $(elem).closest("div.ui-jqgrid-hdiv").next("div.ui-jqgrid-bdiv").find("table.ui-jqgrid-btable").first();
                               if ($myGrid.length > 0) {
                                   grid = $myGrid[0];
                                   if ($.isFunction(grid.triggerToolbar)) {
                                       grid.triggerToolbar();
                                   }
                               }
                           } else {
                               // to refresh the filter
                               $(elem).trigger("change");
                           }
                       }
                   });
               }
           }
       });
   
       $grid.jqGrid("filterToolbar",
           {stringResult: true, searchOnEnter: true, defaultSearch: "cn"});
       jQuery("#list").jqGrid('setGroupHeaders', {
         useColSpanStyle: true, 
         groupHeaders:[
           {startColumnName: 'Category', numberOfColumns: 2, titleText: '<center>Phase 1</center>'},
           {startColumnName: 'PRCategory', numberOfColumns: 2, titleText: '<center>Phase 2</center>'}
         ]
       });
   
   
     //Choose Column code start
       jQuery("#list").jqGrid('setGroupHeaders', {
         useColSpanStyle: true
       });
   
        $.extend(true, $.ui.multiselect, {
            locale: {
                addAll: 'Make all visible',
                removeAll: 'Hide All',
                itemsCount: 'Avlialble Columns'
            }
        });
        $.extend(true, $.jgrid.col, {
           width: 250,
           height: 330,
            modal: true,
            msel_opts: {dividerLocation: 0.5},
            dialog_opts: {
                minWidth: 140,
                show: 'blind',
                hide: 'explode'
            }
        });
        jQuery("#list").jqGrid('navButtonAdd', '#pager', {
            caption: "",
            buttonicon: "ui-icon-calculator",
            title: "Choose columns",
            onClickButton: function () {
                $(this).jqGrid('columnChooser');
            }
        });
       //Column chooser code stop
   
   });
   //]]>
   

   Image 1

Image 2

我觉得你的问题很有趣。所以我+1。因此我投入了一些时间修改了代码columnChooser用于免费 jqGrid https://github.com/free-jqgrid/jqGrid。我另外修改了showHideColumnMenu插件，我最初创建它作为答案问题 https://github.com/tonytomov/jqGrid/issues/650。我对免费 jqGrid 的代码做了一些小修改，并将插件添加到免费的 jqGrid 存储库 https://github.com/free-jqgrid/jqGrid。下面我描述一下如何使用columnChooser, showHideColumnMenu还有一种新方法createContexMenuFromNavigatorButtons.

你遇到的问题不仅仅在于columnChooser。即使您确实按照需要填写列名，您仍然会遇到以下问题：用户可以更改订单列，以便将列移入/移出组，这将破坏列分组的当前实现。我看到的唯一方法columnChooser: 不要打电话this.jqGrid("remapColumns", perm, true);里面的done打回来。我修改了代码columnChooser在免费的 jqGrid 中，使其遵循规则。

现在是列标题的最简单用法（请参阅the demo http://www.ok-soft-gmbh.com/jqGrid/OK/groupingHeadersWithColumnChooser.htm）将显示如下图所示的结果：

另外我介绍了回调buildItemText，它允许自定义显示的文本columnChooser。回调有一个对象作为唯一参数。 options 参数具有以下属性iCol（索引在colModel), cm（该项目colModel), cmName (cm.name), colName (colName[iCol]) and groupTitleText这是分组标题（来自titleText的财产groupHeaders的选项setGroupHeaders）。因此，您可以完全自定义显示的文本。下一个演示 http://www.ok-soft-gmbh.com/jqGrid/OK/groupingHeadersWithColumnChooser-custom.htm显示

它使用以下选项columnChooser

$(this).jqGrid("columnChooser", {
    buildItemText: function (options) {
        if (options.groupTitleText === null) {
            return $.jgrid.stripHtml(options.colName || options.cmName);
        }
        return $.jgrid.stripHtml(options.groupTitleText) + " -> " +
            $.jgrid.stripHtml(options.colName || options.cmName);
    }
});

正如我在答案开头所写，现在存在showHideColumnMenu方法作为免费的 jqGrid 插件（我想稍后将其移到 jqGrid 的主代码中）。只需添加以下简单调用即可使用

$grid.jqGrid("showHideColumnMenu");

它使用 jQuery UI 菜单并进行绑定contextmenu到列标题。单击鼠标右键会创建如下图所示的上下文菜单（请参见the demo http://www.ok-soft-gmbh.com/jqGrid/OK/showHideColumnMenu.htm).

通过选中/取消选中菜单项，可以启用/禁用列不改变列顺序。该插件也支持自定义。下面的代码

$grid.jqGrid("showHideColumnMenu", {
    buildItemText: function (options) {
        if (options.groupTitleText === null) {
            return $.jgrid.stripHtml(options.colName || options.cmName);
        }
        return "<em>" + $.jgrid.stripHtml(options.groupTitleText) + "</em>: " +
            $.jgrid.stripHtml(options.colName || options.cmName);
    }
});

产生以下自定义菜单

我添加了免费的 jqGrid 插件createContexMenuFromNavigatorButtons可以像下面这样使用

$grid.jqGrid(
    "createContexMenuFromNavigatorButtons",
    $grid.jqGrid("getGridParam", "pager")
);

对应的demo http://www.ok-soft-gmbh.com/jqGrid/OK/createContexMenuFromNavigatorButtons.htm使用上述所有功能，并使用以下命令在网格体内另外显示上下文菜单createContexMenuFromNavigatorButtons。该菜单包含与导航栏相同的项目。如果网格有很多行，这非常实用。人们不需要滚动到底部或顶部工具栏即可仅单击导航器按钮。结果如下图所示

附：如果代码中出现错误结果，请检查上述演示中插入的插件的 CSS/JavaScript 路径。