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

jqgrid中的多级组头

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

我知道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提供了更多只是显示标题。 您可以看到为答案创建的演示示例，分组后的列标题是可点击的（按列排序）和可resize（通过拖放列标题之间的分隔符）。 如果使用setGroupHeaders titleText选项， setGroupHeaders可以在列标题中包含HTML片段（包括

元素）。 它使您可以显示milti级别的标题。 可以包括resizable: false以拒绝resize，或者可以编写哪个自定义resizeStop处理程序，该处理程序调整由setGroupHeaders的titleText选项添加的表中的列的大小。

我上面所描述的一切听起来都很理论 所以我写了一个演示该方法的小型演示 。 它显示以下网格

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

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

 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: "dMY"}, datefmt: "dMY"}, {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: '' + '' + '' + '' + '' + '' + '
Details
Price
Shiping
' }] }); $("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]); 

更新：更多稍后的setGroupHeaders代码允许在同一网格上多次调用setGroupHeaders 。 在这种方式中，可以创建多级标头。 jqPivot使用该function（请参阅wiki ）。