Question

这是对上述问题中所列答案的直接回复，但我无法添加到该对话中。

我知道jqgrid中有一个限制，只允许在网格中使用一个级别的组头，但是我很好奇是否有人找到了允许更多的解决方法？我们正在尝试将我们的应用程序从服务器提供的HTML表移到jqgrid，但允许多个（超过2个）列标题被认为是一个关键项目

Answer 1

在Jqgrid中增加任意数量的级别（维度）的另一种简单方法是添加多次setGroupHeaders

如果我的专栏是这样的， ColNames = ['Id'，'Date'，'Client'，'Amount'，'Tax'，'Total'，'Notes'];

现在添加setGroupHeaders Like

jQuery("#list").jqGrid('setGroupHeaders', {
          useColSpanStyle: true, 
          groupHeaders:[
            {startColumnName: 'id', numberOfColumns: 1, titleText: '.'},
            {startColumnName: 'date', numberOfColumns: 8, titleText: 'Nice'},
            ]   
        });
        jQuery("#list").jqGrid('setGroupHeaders', {
          useColSpanStyle: true, 
          groupHeaders:[
            {startColumnName: 'id', numberOfColumns: 1, titleText: '.'},
            {startColumnName: 'date', numberOfColumns: 4, titleText: 'rice'},
            {startColumnName: 'total', numberOfColumns: 2, titleText: 'dice'}
            ]   
        });

        jQuery("#list").jqGrid('setGroupHeaders', {
          useColSpanStyle: true, 
          groupHeaders:[
            {startColumnName: 'id', numberOfColumns: 1, titleText: '.'},
            {startColumnName: 'date', numberOfColumns: 2, titleText: 'Price'},
            {startColumnName: 'amount', numberOfColumns: 2, titleText: 'Shiping'},
            {startColumnName: 'total', numberOfColumns: 2, titleText: 'bipping'}
            ]   
        });

以下是输出

| .  |                       Nice                              |
----------------------------------------------------------------
| .  |                 rice                |       dice        |
----------------------------------------------------------------    
| .  |       Price     |      Shipping     |       bipping     | 
----------------------------------------------------------------    
| id |  Date  | Client |  Amount   |  Tax  | Total  |  Notes   |

Answer 2

在jqGrid中限制一个级别的组头的原因存在，因为jqGrid提供更多只是显示头。您可以在为the demo创建的the answer示例中看到，分组后的列标题是可点击的（按列排序）并可调整大小（通过在列标题之间的分隔符上拖放）。如果您使用titleText setGroupHeaders选项，则可以在列标题中包含HTML片段（包含<table>元素）。它使您可以显示milti级别的标题。可以包含resizable: false拒绝调整大小，或者可以编写哪个自定义resizeStop处理程序，该处理程序会调整titleText setGroupHeaders var grid = $("#list"), setHeaderWidth = function () { var $self = $(this), colModel = $self.jqGrid("getGridParam", "colModel"), cmByName = {}, ths = this.grid.headers, // array with column headers cm, i, l = colModel.length; // save width of every column header in cmByName map // to make easy access there by name for (i = 0; i < l; i++) { cm = colModel[i]; cmByName[cm.name] = $(ths[i].el).outerWidth(); } // resize headers of additional columns based on the size of // the columns below the header $("#h1").width(cmByName.amount + cmByName.tax + cmByName.total - 1); $("#h2").width(cmByName.closed + cmByName.ship_via - 1); }; grid.jqGrid({ ... colModel: [ {name: "id", width: 65, align: "center", sorttype: "int", hidden: true}, {name: "invdate", width: 80, align: "center", sorttype: "date", formatter: "date", formatoptions: {newformat: "d-M-Y"}, datefmt: "d-M-Y"}, {name: "name", width: 70}, {name: "amount", width: 75, formatter: "number", sorttype: "number", align: "right"}, {name: "tax", width: 55, formatter: "number", sorttype: "number", align: "right"}, {name: "total", width: 65, formatter: "number", sorttype: "number", align: "right"}, {name: "closed", width: 75, align: "center", formatter: "checkbox", edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"}}, {name: "ship_via", width: 100, align: "center", formatter: "select", edittype: "select", editoptions: {value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN"}}, {name: "note", width: 70, sortable: false} ], resizeStop: function () { // see https://stackoverflow.com/a/9599685/315935 var $self = $(this), shrinkToFit = $self.jqGrid("getGridParam", "shrinkToFit"); $self.jqGrid("setGridWidth", this.grid.newWidth, shrinkToFit); setHeaderWidth.call(this); } }); grid.jqGrid ("navGrid", "#pager", {edit: false, add: false, del: false, refresh: true, view: false}, {}, {}, {}, {multipleSearch: true, overlay: false}); grid.jqGrid("setGroupHeaders", { useColSpanStyle: true, groupHeaders: [{ startColumnName: "amount", numberOfColumns: 5, titleText: '<table style="width:100%;border-spacing:0px;">' + '<tr><td id="h0" colspan="2"><em>Details</em></td></tr>' + '<tr>' + '<td id="h1">Price</td>' + '<td id="h2">Shiping</td>' + '</tr>' + '</table>' }] }); $("th[title=DetailsPriceShiping]").removeAttr("title"); $("#h0").css({ borderBottomWidth: "1px", borderBottomColor: "#c5dbec", // the color from jQuery UI which you use borderBottomStyle: "solid", padding: "4px 0 6px 0" }); $("#h1").css({ borderRightWidth: "1px", borderRightColor: "#c5dbec", // the color from jQuery UI which you use borderRightStyle: "solid", padding: "4px 0 4px 0" }); $("#h2").css({ padding: "4px 0 4px 0" }); setHeaderWidth.call(grid[0]);选项添加的表格中的列的大小。

我上面描述的所有内容都是理论上的。所以我写了the small demo来演示这种方法。它显示以下网格

enter image description here

该演示不是针对常见情况编写的，但很明显可以将其用作更常见解决方案的基础。无论如何，我希望您可以将其更改为任何多级网格。

您将在下面找到演示的最重要部分：

setGroupHeaders

更新：setGroupHeaders的更多后续代码允许在同一网格上多次调用{{1}}。通过这种方式可以创建多级标头。 jqPivot使用该功能（参见the wiki）。

在jqgrid中添加两个以上的列组头

2 个答案: