我可以像 jQuery EasyUI 库那样在 jqGrid 中实现列组吗？
您可以通过访问 jQuery EasyUI演示网站了解我的意思，然后从左侧菜单中选择 Datagrid，然后选择 Column Group。
感谢您的帮助
问问题
15316 次
3 回答
10
你的问题并不新鲜。很多时候，在 trirand 论坛或 stackoverflow 上询问了相应的功能请求。我在前一段时间就关闭的问题给出了另一个答案。
现在，在阅读了您的问题后，我决定不要制定一个完美的解决方案来支持所有 jqGrid 功能（这一次太难了）。取而代之的是，我决定创建一个可以在许多情况下使用但有一些限制的解决方案。
该演示显示了我的第一个结果：
限制：
- 网格的列不能调整大小。我在演示
cmTemplate: {resizable: false}参数中使用resizable: false在所有网格列中进行设置。 sortable: true不支持showCol,hideCol或columnChooser目前不支持，但我相信可以快速解决问题。- 将放置额外列标题的列应具有相同的宽度。如果列具有不同的宽度值，列的总宽度将在列之间自动划分。
另一方面，在我的所有测试中，使用其他流行选项（例如shrinkToFit: false，autowidth: true或根据方法更改网格宽度setGridWidth（有或没有缩小）），一切正常。
现在首先介绍该功能的使用。我写了insertColumnGroupHeader我在上面的例子中使用的函数
insertColumnGroupHeader(grid, 'amount', 3, '<em>Information about the Price</em>');
它在以“金额”列开头的 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 = $("<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 = $('<th class="ui-state-default ui-th-ltr" colspan="' + numberOfColumns +
'" style="height:19px;padding-top:1px;text-align:center" role="columnheader">' + titleText + '</th>');
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;
};
var ci = $.jgrid.getCellIndex(this);
到
var ci = getColumnHeaderIndex(this);
就是这样。上述更改应该不会对原始 jqGrid 代码产生负面影响，并且可以照常使用。下次我会在 trirand 论坛上发表我的建议。
更新：演示的另一个版本允许调整除具有标题的列之外的所有列的大小。在该版本中，将放置附加列标题的所有列必须具有相同的宽度。不自动在列之间划分的列的宽度。您必须手动设置相同的列宽。
UDPATED 2：我想告知在创建更高级版本的 multiheader jqGrid 方面的一些进展。首先wildraid 发布了非常有趣的解决方案。在这里查看他的演示。顺便说一句，如果使用 jqGrid 方法和我建议的修复程序（见上文），演示中的排序图标问题将得到解决。请参阅此处的演示作为构象。
之后，我在减少rowSpan用于增加列高度的多列方法中的限制方面做了更多工作。这是我当前的中间结果：新的演示。新的演示在 Internet Explorer 9/8、Firefox 和 Opera 中已经非常出色了。在基于 Webkit 的浏览器（Google Chrome 和 Safari）中，它仍然具有上面列出的限制（具有多标题的列标题必须具有相同的大小并且不可调整大小）。该演示看起来不错，但在基于 Webkit 的 Web 浏览器中看起来不错。不过，您可以在排序时间看到进度。
我计划根据答案中的演示增加用于调整列大小的可调整大小区域的高度。当然，也将支持在列标题上使用许多标题。也将支持 ColumnChooser 或 showCol/hideCol。现在对我来说最有趣的是找到一种清晰的方法，如何在基于 Webkit 的浏览器（Google Chrome 和 Safari）中实现多行列标题。可能其他人会找到解决方法？这是我决定在这里分享未完成的结果的主要原因。rowSpan
更新 3：jqGrid 代码的更改包含在 jqGrid 的主代码中（请参见此处）。我改进了我在这里描述的解决方案和这个演示。如果要增加列宽，则第二个演示会增加网格宽度。我个人喜欢这种行为。
更新 4：您可以在这里看到下一个版本的演示。它有一个布尔选项（参数useColSpanStyle），它定义是否colspan应该使用。使用false参数值，结果将如下所示。
于 2011-09-08T16:47:45.307 回答
0
仅对于视觉外观，您可以通过在加载网格数据后调用方法来编辑 jqgrid 的 html 输出来实现此目的。您可以通过“jqgh_”前缀后跟 jgrid 的 colName 值来访问列标题。拥有一组元素后，您可以修改它们。
显然不是最好的方法，但可以工作。
于 2011-09-08T11:02:51.200 回答
0
作为 jqGrid 的后续版本，Oleg 的解决方案已经成为官方的 :)
我正在 v4.4.4 上对其进行测试，但应该适用于每个 4.x
它支持排序，即使文档另有说明（他们应该真正更新 API ref）
不是奥列格的第一个正式的，你一定是骄傲的伙伴！
于 2013-06-17T14:43:49.357 回答