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

Question

我有两列 header 阶段 1 和阶段 2（图片 1）。现在在列选择器中显示列名称（图 2）window

姓名
类别
子类别
类别
子类别

我想以不同的方式展示

姓名
Ph1 类别
Ph1 子类别
Ph2 类别

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

});
//]]>

图片 1

图 2

Answer 1

我觉得你的问题很有趣。所以我+1。因此，我投入了一些时间，修改了free jqGrid. I modified additionally showHideColumnMenu plugin, which I created initially as the answer on the issue. I made small modifications in the code of free jqGrid and added the plugin to the free jqGrid repository中使用的columnChooser的代码。下面我将介绍如何使用 columnChooser、showHideColumnMenu 和另一种新方法 createContexMenuFromNavigatorButtons.

您遇到的问题不仅在columnChooser。即使您确实按照需要填写列名，您仍然会遇到这样的问题，即用户可以更改列的顺序，以便移动列in/out 组，它将打破当前的列分组实现。我在 columnChooser 中看到的唯一方法是： 不要在 done 回调中调用 this.jqGrid("remapColumns", perm, true);。我在免费的 jqGrid 中修改了 columnChooser 的代码，使其遵循规则。

现在列 header 的最简单用法（参见 the demo）将显示如下图所示的结果：

此外，我还引入了回调 buildItemText，它允许自定义 columnChooser 中显示的文本。回调有一个 object 作为唯一的参数。 options参数有以下属性iCol（colModel中的索引），cm（colModel的项），cmName（cm.name ), colName (colName[iCol]) 和 groupTitleText 是 header 的分组（来自 groupHeaders 选项的 titleText 属性 setGroupHeaders)。因此，您可以完全自定义显示的文本。 The next demo 显示

它使用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 绑定到 header 列。单击鼠标右键创建上下文菜单，如下图所示（参见 the demo）。

通过 checking/unchecking 菜单项 enables/disables 列 而不更改列顺序 。该插件也支持自定义。以下代码

$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")
);

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

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

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

How to change column name in column chooser pop up in jqgrid?

jquery

jqgrid

jqgrid-php