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

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

1. 名称
2. 类别
3. 子目录
4. 类别
5. 子目录

我希望表现得与众不同

1. 名称
2. Ph1类别
3. Ph1子类别
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: 'Phase 1'}, {startColumnName: 'PRCategory', numberOfColumns: 2, titleText: 'Phase 2'} ] }); //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 }); //]]> 

   图1

图2

Answer 1

我觉得你的问题非常有趣。 所以来自我的+1。 因此我投入了一些时间并修改了免费jqGrid中使用的columnChooser代码。 我另外修改了showHideColumnMenu插件，我最初创建它作为问题的答案。 我在free jqGrid的代码中做了一些小修改，并将插件添加到了免费的jqGrid存储库中 。 下面我将介绍如何使用columnChooser ， showHideColumnMenu以及另一个新方法createContexMenuFromNavigatorButtons 。

您遇到的问题不仅在columnChooser 。 即使你想填写你想要的列的名称，你仍然会遇到用户可以改变列顺序的问题，这样列将被移入/移出组，它将打破当前的实现列分组。 我在columnChooser看到的唯一方法是： 不要调用this.jqGrid("remapColumns", perm, true); done回调的内部。 我在free jqGrid中修改了columnChooser的代码，使其遵循规则。

现在最简单的列标题用法（参见演示 ）将显示如下图所示的结果：

另外，我介绍了回调buildItemText ，它允许自定义columnChooser中显示的文本。 回调有一个对象作为唯一参数。 options参数具有以下属性： iCol （ colModel的索引）， cm （ colModel项）， cmName （ cm.name ）， colName （ colName[iCol] ）和groupTitleText ，它是分组标题（来自groupHeaders titleText属性） setGroupHeaders选项）。 因此，您可以完全自定义显示的文本。 下一个演示显示

它使用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 Menu并将contextmenu绑定到列标题。 单击鼠标右键会创建上下文菜单，如下图所示（参见演示 ）。

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

 $grid.jqGrid("showHideColumnMenu", { 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); } }); 

生成以下自定义菜单

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

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

相应的演示使用上述所有function，并使用createContexMenuFromNavigatorButtons在网格主体内部显示上下文菜单。 该菜单包含与导航栏相同的项目。 如果网格有很多行，这是非常实用的。 无需滚动到底部或顶部工具栏即可单击导航器按钮。 结果如下图所示

PS如果您的代码中有错误的结果，请检查上面演示中插入的插件的CSS / JavaScript路径。