Javascript jQgrid：多列行标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4712763/
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
jQgrid: multiple column row headers
提问by Jonathan
I am trying to extend my jQGrid to have multiple rows for the header.
我正在尝试将我的 jQGrid 扩展为标题的多行。
It will look something like this
它看起来像这样
----------------------- Level 1 - > | Application | ----------------------- Level 2 - > |Code | Name | ----------------------- | 0002827| Mobile Phone1 | 0202827| Mobile Phone2 | 0042827| Mobile Phon3e | 0005827| Mobile Phone4 | 0002627| Mobile Phon5e | 0002877| Mobile Phone6 | 0002828| Mobile Phone7
----------------------- Level 1 - > | Application | ----------------------- Level 2 - > |Code | Name | ----------------------- | 0002827| Mobile Phone1 | 0202827| Mobile Phone2 | 0042827| Mobile Phon3e | 0005827| Mobile Phone4 | 0002627| Mobile Phon5e | 0002877| Mobile Phone6 | 0002828| Mobile Phone7
I am wondering how to do this with jQGrid 3.8.2? Any ideas?
我想知道如何用 jQGrid 3.8.2 做到这一点？有任何想法吗？
回答by Oleg
The problem is really not so easy as it looks like at first glance. I tried to find a simple solution, but the best result which I found you can see here:
这个问题真的不像乍一看那么容易。我试图找到一个简单的解决方案，但我发现的最佳结果您可以在这里看到：
The order of the headers (level 1 and level 2) is not as one would like to have. Other attempts like thisor thisare buggy because the sorting and column resizing works not more correct.
标题（第 1 级和第 2 级）的顺序并不像人们希望的那样。像这样或这样的其他尝试是有问题的，因为排序和列调整大小的工作不太正确。
For the understanding: the grid moves the <thead>outside ofthe table and places it inside of separate which are placed above the table (see herefor more information). It allows including some additional information like searching toolbar betweenthe table header and the table body. Other places in the jqGrid code like column resizing and column sorting works incorrect if there are exist other headers (one more <tr>with <th>elements) over the main column headers. So only the inserting of additional column headers underthe main columns headers (which looks not nice of course) not breaks the sorting and the resizing of columns.
为便于理解：网格将桌子的<thead>外侧移动并放置在单独的放在桌子上方（有关更多信息，请参见此处）。它允许在表格标题和表格正文之间包含一些附加信息，例如搜索工具栏。如果主列标题上存在其他标题（还有一个<tr>带有<th>元素），则 jqGrid 代码中的其他位置（如列调整大小和列排序）将无法正常工作。所以只有在主列标题下插入额外的列标题（当然看起来不太好）不会破坏列的排序和调整大小。
UPDATED:See the answerwhich do provide the solution of the problem under some restrictions.
更新：请参阅在某些限制下确实提供问题解决方案的答案。
回答by Raggi Steinsen
I know this is a late answer but for future reference header groupingis now included in version 4.2.0 of jqGrid
我知道这是一个迟到的答案，但为了将来参考标题分组现在包含在 jqGrid 的 4.2.0 版中
回答by Exzo
Modified the original idea by Oleg and made it into a function that can make several "spanned" headers:
修改了Oleg原来的想法，做成了一个可以制作几个“spanned”headers的函数：
function head_groups(mygrid, settings){
var colModel, header, config, ths;
if (typeof mygrid == 'string') mygrid = $(mygrid);
colModel = mygrid[0].p.colModel;
ths = mygrid[0].grid.headers;
header = mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead");
if (!header.children("tr.head_group").length) {
header.find("th").attr('rowspan', 2);
header.append('<tr class="head_group"></tr>');
}
for (c in settings) {
config = settings[c]; // caption, col, span
for(var i=0; i<colModel.length; i++) {
if (colModel[i].name == config.col) {
for(var s=0; s<config.span; s++) {
$(ths[i+s].el).removeAttr('rowspan');
}
i +=s; // skip unnecessary cycles
header.children("tr.head_group").append('<th class="ui-state-default ui-th-ltr" id="span_'+config.col+'" colspan="'+config.span+'" role="columnheader">'+config.caption+'</th>');
}
}
}
}
Usage sample:
使用示例：
head_groups("table#results", [
{caption: 'Test 1', col: 'num', span: 2},
{caption: 'Result', col: 'sta', span: 3},
{caption: 'Bla bla bla', col: 'bl2', span: 2}
]);
It also adds a class for the header row and IDs for the header cells for some styling or special functionality.
它还为标题行添加了一个类，并为标题单元格添加了一些样式或特殊功能的 ID。
In fact this can be easily integrated in the jqGrid core :)
事实上，这可以很容易地集成到 jqGrid 核心中:)
回答by Justin Ethier
According to Help needed in Multiple column grouping (jQGrid 3.8.2), the jqGrid support team indicates:
根据多列分组中的帮助 (jQGrid 3.8.2)，jqGrid 支持团队指出：
This is currently not supported. Multiple column headers in a single column (subcolumns) are not currently a feature of jqGrid.
目前不支持此功能。单列（子列）中的多个列标题当前不是 jqGrid 的功能。
回答by Nap
I modified the code of Oleg to be able to show the grouping in the first row, basically I created a dummy third row and just deleted the text in the first row.
我修改了 Oleg 的代码，以便能够在第一行显示分组，基本上我创建了一个虚拟的第三行，只是删除了第一行中的文本。
var x = 0;
insertColumnGroupHeader = function (mygrid, mergeSettingList) {
var i, cmi, skip = 0, $tr, colHeader, iCol, $th,
colModel = mygrid[0].p.colModel,
ths = mygrid[0].grid.headers,
gview = mygrid.closest("div.ui-jqgrid-view"),
thead = gview.find("table.ui-jqgrid-htable>thead");
$tr = $("<tr>");
var currCaption = '';
var currColumnName = '';
var currSpan = 0;
var currSkip = 0;
tr = "<tr>";
for (i = 0; i < colModel.length; i++) {
$th = $(ths[i].el);
cmi = colModel[i];
if (currSkip === 0) {
currColumnName = '';
for (j = 0; j < mergeSettingList.length; j++) {
if (mergeSettingList[j].col == cmi.name) {
currCaption = mergeSettingList[j].caption;
currColumnName = mergeSettingList[j].col;
currSpan = mergeSettingList[j].span;
currWidth = mergeSettingList[j].width;
break;
}
}
}
if (cmi.name !== currColumnName) {
if (currSkip === 0) {
$th.attr("rowspan", "2");
} else {
// Skip part of group
denySelectionOnDoubleClick($th);
currSkip--;
}
} else {
denySelectionOnDoubleClick($th);
tr += '<th class="ui-state-default ui-th-ltr" colspan="' + currSpan + '" role="columnheader">' + currCaption + '</th>';
currSkip = currSpan - 1;
}
}
tr += "</tr>";
mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead").append(tr);
$th = $(ths[0].el);
tr = "<tr>";
var html = $th.parent().html();
tr += html;
tr += "</tr>";
mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead").append(tr);
for (i = 0; i < colModel.length; i++) {
$th = $(ths[i].el);
cmi = colModel[i];
$th.empty();
$th.css({"padding-top": "0px", height: "0px", border: "0px"});
}
}
Sample call.
示例调用。
var mergeParam = [
{caption: ' ', col: 'ActionKey', span: 3},
{caption: 'Planned', col: 'PlannedStartColKey', span: 5},
{caption: 'Actual', col: 'ActualStartColKey', span: 12}
];
insertColumnGroupHeader2($(GridNames.Grid), mergeParam);
