javascript 在 jqgrid 中添加两个以上的 columng 组标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18969659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding more than two columng group headers in jqgrid
提问by Thomas Mondelli
multi level group headers in jqgrid
This is a direct response to the answer listed in the above question, but I can't add to that conversation.
这是对上述问题中列出的答案的直接回应，但我无法添加到该对话中。
I understand that there is a limitation in jqgrid to only allow one level of group headers in the grid, but I was curious if anyone has found a workaround that will allow more? We are trying to move our application from an HTML table served by the server over to jqgrid, but allowing multiple (more than 2) column headers has been deemed a critical item
我知道 jqgrid 有一个限制，只允许网格中的一个组标题，但我很好奇是否有人找到了允许更多的解决方法？我们正在尝试将我们的应用程序从服务器提供的 HTML 表移动到 jqgrid，但允许多个（超过 2 个）列标题被认为是一个关键项目
回答by Praveen Kamble
Another and easy way of increasing any number of levels(dimensions) in Jqgrid is by adding setGroupHeaders that number of times
在 Jqgrid 中增加任意数量的级别（维度）的另一种简单方法是添加 setGroupHeaders 次数
If my columns are like, ColNames = ['Id','Date', 'Client', 'Amount','Tax','Total','Notes'];
如果我的列是这样的， ColNames = ['Id','Date', 'Client', 'Amount','Tax','Total','Notes'];
Now add setGroupHeaders Like
现在添加 setGroupHeaders 喜欢
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'}
]
});
Following is the output
以下是输出
| . | Nice |
----------------------------------------------------------------
| . | rice | dice |
----------------------------------------------------------------
| . | Price | Shipping | bipping |
----------------------------------------------------------------
| id | Date | Client | Amount | Tax | Total | Notes |
回答by Oleg
The reason of restriction of onelevel of group headers in jqGrid exist because jqGrid provide more as just displaying the headers. You can see on the example of the democreated for the answerthat the column headers after grouping are clickable (to sort by the column) and resizable (by drag&drop on the separator between column headers). If you use titleTextoption of setGroupHeadersyou can include HTML fragments, inclusive <table>element, in the column header. It gives you the possibility to display milti-level headers. One can include resizable: falseto deny resizing or one can write which custom resizeStophandler which resizes columns in the table added by titleTextoption of setGroupHeaders.
限制的原因，一个在jqGrid的组头的水平，因为存在的jqGrid提供更多的只显示标题。您可以在为答案创建的演示示例中看到分组后的列标题可点击（按列排序）和可调整大小（通过拖放列标题之间的分隔符）。如果您使用选项，您可以在列标题中包含 HTML 片段、包含元素。它使您可以显示多级标题。可以包括拒绝调整大小，或者可以编写哪个自定义处理程序来调整由选项添加的表中列的大小。titleTextsetGroupHeaders<table>resizable: falseresizeStoptitleTextsetGroupHeaders
All what I described above sound theoretical. So I wrote the small demowhich demonstrates the approach. It displays the following grid
我上面描述的所有内容听起来都是理论性的。所以我写了一个小演示来演示该方法。它显示以下网格
The demo is written not for the common case, but it's clear that one can use it as basis to more common solution. In any way I hope that you can change it to any your multi-level grid.
该演示不是为常见情况编写的，但很明显可以将其用作更常见解决方案的基础。无论如何，我希望您可以将其更改为任何多级网格。
The most important parts of the demo you will find below:
您将在下面找到演示中最重要的部分：
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]);
UPDATED:More later code of setGroupHeadersallows multiple calls of setGroupHeaderson the same grid. In the way one can do create multi-level headers. jqPivot uses the feature (see the wiki).
更新：更多稍后的代码setGroupHeaders允许setGroupHeaders在同一网格上多次调用。以一种可以创建多级标题的方式。jqPivot 使用该功能（请参阅wiki）。
