我正在尝试扩展我的 jQGrid 以使标题具有多行。
它看起来像这样
----------------------- 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
我想知道如何使用 jQGrid 3.8.2 做到这一点？有任何想法吗？
【问题讨论】：
标签： javascript jquery jqgrid
据Help needed in Multiple column grouping (jQGrid 3.8.2)，jqGrid支持团队表示：
目前不支持此功能。单个列（子列）中的多个列标题当前不是 jqGrid 的功能。
【讨论】：
这个问题确实不像乍一看那么容易。我试图找到一个简单的解决方案，但我发现你可以看到最好的结果here：
标题的顺序（第 1 级和第 2 级）并不像人们想要的那样。像this 或this 这样的其他尝试是错误的，因为排序和列大小调整工作不正确。
为了理解：网格将<thead> 移出 表并将其放置在单独的 内，这些 更多信息）。它允许包含一些附加信息，例如在表格标题和表格主体之间的搜索工具栏。如果在主列标题上存在其他标题（一个<tr> 和<th> 元素），jqGrid 代码中的其他位置（如列调整大小和列排序）将不正确。所以只有在主列标题下插入额外的列标题（当然看起来不太好）不会破坏列的排序和调整大小。
更新：请参阅the answer，它确实在某些限制下提供了问题的解决方案。
【讨论】：
修改了Oleg原来的想法，做成了一个可以制作多个“spanned” header的函数：
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>');
}
}
}
}
使用示例：
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}
]);
它还为标题行添加了一个类，并为标题单元格添加了 ID，以实现某些样式或特殊功能。
事实上，这可以很容易地集成到 jqGrid 核心中:)
【讨论】：
我知道这是一个迟到的答案，但供将来参考 header grouping 现在包含在 jqGrid 4.2.0 版中
【讨论】：
我修改了 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"});
}
}
示例调用。
var mergeParam = [
{caption: ' ', col: 'ActionKey', span: 3},
{caption: 'Planned', col: 'PlannedStartColKey', span: 5},
{caption: 'Actual', col: 'ActualStartColKey', span: 12}
];
insertColumnGroupHeader2($(GridNames.Grid), mergeParam);
【讨论】：