Question

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

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

我希望以不同的方式显示

姓名
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 enter image description here

图片2

enter image description here

Answer 1

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

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

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

enter image description here

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

enter image description here

它使用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); } });方法作为免费的jqGrid插件（我想稍后在jqGrid的主代码中移动它）。只需添加以下简单的调用即可使用它

showHideColumnMenu

它使用jQuery UI Menu并将$grid.jqGrid("showHideColumnMenu");绑定到列标题。单击鼠标右键会创建上下文菜单，如下图所示（参见the demo）。

enter image description here

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

contextmenu

生成以下自定义菜单

enter image description here

我向jqGrid添加了插件$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); } });，可以像下面这样使用

createContexMenuFromNavigatorButtons

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

enter image description here

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

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

1 个答案: