jQgrid：多列行标题
我试图扩展我的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做到这一点？ 有任何想法吗？
乍一看，这个问题真的不那么容易。 我试图找到一个简单的解决方案，但我发现你可以在这里看到最好的结果： 
标题的顺序（级别1和级别2）并不像人们想要的那样。 像这样或那样的其他尝试都是错误的，因为排序和列大小调整工作不正确。
为了理解：网格将
移动到表格之外并将其放在单独的内部 它们放在桌子上方（有关更多信息，请参见此处 ）。 它允许包括一些其他信息，如在表头和表体之间搜索工具栏。 如果在主列标题上存在其他标题（还有一个带有
元素的
），则jqGrid代码中的其他位置（如列大小调整和列排序）将不正确。 因此，只有在主列标题下插入额外的列标题（当然看起来不太好）不会破坏列的排序和大小调整。
更新：请参阅答案 ， 该答案确实在某些限制下提供了问题的解决方案。
我知道这是一个迟到的答案，但是为了将来参考标题分组现在包含在jqGrid的4.2.0版本中
修改了Oleg的原始想法，并使其成为一个可以生成多个“跨越”标题的函数：
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(''+config.caption+''); } } } }
使用范例：
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} ]);
它还为标题行添加了一个类，为某些样式或特殊function添加了标题单元格的ID。
实际上这可以很容易地集成到jqGrid核心:)
根据多列分组（jQGrid 3.8.2）中需要的帮助 ，jqGrid支持团队指出：
目前不支持此function。 单列（子列）中的多个列标题当前不是jqGrid的function。
我修改了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 = $(""); var currCaption = ''; var currColumnName = ''; var currSpan = 0; var currSkip = 0; 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 += '' + currCaption + ' '; currSkip = currSpan - 1; } } tr += " "; mygrid.closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable > thead").append(tr); $th = $(ths[0].el); tr = ""; var html = $th.parent().html(); tr += html; 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);