jqGrid列组
我可以像jQuery EasyUI库一样在jqGrid中实现一个列组吗？
你可以通过jQuery EasyUI 演示网站找出我的意思，然后从左侧菜单中选择Datagrid然后选择Column Group。
谢谢你的帮助
你的问题并不新鲜。 很多时候，在trirand论坛或stackoverflow上询问了相应的function请求。 我在前一段时间对这个封闭的问题给出了另一个答案 。
在阅读了你的问题之后，我决定不做出支持所有jqGridfunction的完美解决方案 （这一点太难了）。 而不是我决定创建一个可以在很多情况下使用但有一些限制的解决方案。
该演示显示了我的第一个结果：
限制：
- 网格的列无法resize。 我在演示
cmTemplate: {resizable: false}参数中使用，在所有网格列中设置resizable: false。 -
sortable: true不支持sortable: true - 目前不支持
showCol，hideCol或columnChooser ，但我确信可以快速解决问题。 - 一个将放置其他列标题的列应具有相同的宽度 。 如果列具有不同的宽度值，则列的总宽度将自动在列之间分配。
另一方面，在我的所有测试中，一切都没有任何问题，其他常用选项如autowidth: true shrinkToFit: false ， autowidth: true或相对于setGridWidth方法更改网格宽度（有或没有收缩）。
现在首先介绍该function的用法。 我编写了函数insertColumnGroupHeader ，我将其用于上面的示例中
insertColumnGroupHeader(grid, 'amount', 3, 'Information about the Price');
它从“amount”列开始，在3列中插入一个额外的列标题，其中包含HTML片段“ 有关价格的信息 ”。 因此使用非常简单。 您当然可以使用任何文本，例如“有关价格的信息”作为附加列标题。
函数insertColumnGroupHeader具有以下代码：
var denySelectionOnDoubleClick = function ($el) { // see https://stackoverflow.com/questions/2132172/disable-text-highlighting-on-double-click-in-jquery/2132230#2132230 if ($.browser.mozilla) {//Firefox $el.css('MozUserSelect', 'none'); } else if ($.browser.msie) {//IE $el.bind('selectstart', function () { return false; }); } else {//Opera, etc. $el.mousedown(function () { return false; }); } }, insertColumnGroupHeader = function (mygrid, startColumnName, numberOfColumns, titleText) { 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"); mygrid.prepend(thead); $tr = $(""); for (i = 0; i < colModel.length; i++) { $th = $(ths[i].el); cmi = colModel[i]; if (cmi.name !== startColumnName) { if (skip === 0) { $th.attr("rowspan", "2"); } else { denySelectionOnDoubleClick($th); $th.css({"padding-top": "2px", height: "19px"}); $tr.append(ths[i].el); skip--; } } else { colHeader = $('' + titleText + ' '); denySelectionOnDoubleClick($th); $th.before(colHeader); $tr.append(ths[i].el); skip = numberOfColumns - 1; } } mygrid.children("thead").append($tr[0]); };
此外，还需要在jqGrid代码中进行一些更改。 您可以从此处下载jquery.jqGrid.src.js的修改版本（4.1.2版本的修改）。 这些变化包括两个街区。 首先，我更改了sortData函数的代码，即1874 – 1884行
var thd= $("thead:first",ts.grid.hDiv).get(0); $("tr th:eq("+ts.p.lastsort+") span.ui-grid-ico-sort",thd).addClass('ui-state-disabled'); $("tr th:eq("+ts.p.lastsort+")",thd).attr("aria-selected","false"); $("tr th:eq("+idxcol+") span.ui-icon-"+ts.p.sortorder,thd).removeClass('ui-state-disabled'); $("tr th:eq("+idxcol+")",thd).attr("aria-selected","true"); if(!ts.p.viewsortcols[0]) { if(ts.p.lastsort != idxcol) { $("tr th:eq("+ts.p.lastsort+") span.s-ico",thd).hide(); $("tr th:eq("+idxcol+") span.s-ico",thd).show(); } }
以下内容：
var previousSelectedTh = ts.grid.headers[ts.p.lastsort].el, newSelectedTh = ts.grid.headers[idxcol].el; $("span.ui-grid-ico-sort",previousSelectedTh).addClass('ui-state-disabled'); $(previousSelectedTh).attr("aria-selected","false"); $("span.ui-icon-"+ts.p.sortorder,newSelectedTh).removeClass('ui-state-disabled'); $(newSelectedTh).attr("aria-selected","true"); if(!ts.p.viewsortcols[0]) { if(ts.p.lastsort != idxcol) { $("span.s-ico",previousSelectedTh).hide(); $("span.s-ico",newSelectedTh).show(); } }
接下来，我将getColumnHeaderIndex函数定义如下
var getColumnHeaderIndex = function (th) { var i, headers = ts.grid.headers, ci = $.jgrid.getCellIndex(th); for (i = 0; i < headers.length; i++) { if (th === headers[i].el) { ci = i; break; } } return ci; };
并更改了grid.base.js的第2172行和第2185行
var ci = $.jgrid.getCellIndex(this);
至
var ci = getColumnHeaderIndex(this);
这就是全部。 上述更改不应对原始jqGrid代码产生负面影响，并且可以照常使用。 我将在下一次三角论坛上发表我的建议。
更新 ：演示的另一个版本允许调整所有列的大小，但具有标题的列除外。 在版本中，将放置其他列标题的所有列必须具有相同的宽度。 列的宽度不会自动在列之间分配 。 您必须手动设置相同的列宽。
UDPATED 2 ：我想了解一下创建更多高级版多头jqGrid的一些进展。 首先， wildraid 发布了非常有趣的解决方 在这里看他的演示。 顺便说一句，如果使用方法jqGrid与我建议的修复程序（见上文），将解决在演示中排序图标的问题。 在这里看到演示作为构造。
在那之后，我在多列方法中更多地减少限制，使用rowSpan来增加列的高度。 这是我目前的中间结果： 新的演示 。 新的演示工作在Internet Explorer 9/8，Firefox和Opera中已经非常出色。 在基于Webkit的浏览器（谷歌浏览器和Safari）中，它仍然具有上面列出的限制（具有多头的列标题必须具有相同的大小并且不可resize）。 该演示看起来很好有限制，它在基于Webkit的Web浏览器中看起来很好。 不过，你可以看到排序时间的进展。
我计划根据答案中 的演示增加用于调整列大小的可resize区域的高度。 因为还支持在列标题上使用许多标题。 也支持ColumnChooser或showCol / hideCol。 对我来说最有趣的是找到一种清晰的方法，如何在基于Webkit的浏览器（谷歌浏览器和Safari）中使用rowSpan实现rowSpan列标题。 可能其他人会找到解决方案吗？ 这是我决定在这里分享未完成结果的主要原因。
更新3 ：jqGrid的主要代码中包含了jqGrid代码中的更改（请参阅此处 ）。 我改进了我在这里和这个演示中描述的解决方案。 如果增加列宽，第二个演示会增加网格宽度。 我个人喜欢这种行为。
更新4 ：您可以在此处看到演示的下一个版本。 它有一个布尔选项（参数useColSpanStyle ），它定义是否应该使用colspan 。 如果参数的值为false ，则结果如下 。
相关： 没有子网格的jqGrid分组？
仅对于视觉外观，您可以通过在加载网格数据后调用方法来编辑jqgrid的html输出来实现此目的。 您可以通过“jqgh_”前缀后跟jgrid的colName值来访问列标题。 拥有一组元素后，您可以修改它们。
显然不是最好的方式，但可以工作。
作为jqGrid的后续版本，Oleg的解决方案已成为官方:)
我在v4.4.4上测试它，但应该在每个4.x上运行
并且它支持排序，即使文档另有说明（它们应该真正更新API参考）
在这里查看官方参考
不是第一个获得官方的奥列格，你必须是自豪的伴侣！