Overview
我需要以某种方式自定义 jqGrid 插件，无论是通过巧妙的技巧、黑客攻击还是修改插件，以支持以下类型的聚合/分组。
我将非常感谢 jqGrid 社区关于如何实现这一点的一些想法。
Details
聚合/分组的工作原理如下。
首先向用户呈现如下所示的数据网格，并根据“第 1 列”进行分组。注意超链接（例如“+5”）；这些超链接表示“折叠”行，其中这些行中的所有数据对于除具有超链接的列之外的所有列都具有相同的值。
例如，通过单击“+5”链接，表格将展开以显示先前折叠为一行的 5 行（替换包含“+5”链接的折叠行）。请注意，现在展开的行在第 2 列中都具有唯一值，该列之前具有“+5”链接。
关于如何实现这一点有什么想法吗？这可以与任何其他网格插件一起使用吗？
jqGrid 不直接支持您需要的这种分组，因此必须实现某种手动分组。
分组本身应该在服务器上完成，并且服务器响应应该包含扩展行和折叠行。我不太明白作为一组扩展链接应该如何工作，因此我描述了如何通过每行一个链接来实现分组。另一方面，我决定实现先前展开的行的折叠。我针对 JSON 数据中包含的附加信息执行此操作。
让我们的服务器生成以下 JSON 数据：
{
"total": 1,
"page": 1,
"records": 15,
"rows" : [
{"id":"1", "collapseTo":{"id":"6","colName":"column2"}, "expandTo":null, "column1":"534345345", "column2":"3523423423", "column3":"8563564", "column4":"75683", "column5":"4756436", "column6":"87689768", "column7":"8755"},
{"id":"2", "collapseTo":{"id":"6","colName":"column2"}, "expandTo":null, "column1":"534345345", "column2":"545345343", "column3":"8563564", "column4":"75683", "column5":"4756436", "column6":"7689768", "column7":"8755"},
{"id":"3", "collapseTo":{"id":"6","colName":"column2"}, "expandTo":null, "column1":"534345345", "column2":"4234235", "column3":"8563564", "column4":"75683", "column5":"4756436", "column6":"7689768", "column7":"8755"},
{"id":"4", "collapseTo":{"id":"6","colName":"column2"}, "expandTo":null, "column1":"534345345", "column2":"3242323", "column3":"8563564", "column4":"75683", "column5":"4756436", "column6":"7689768", "column7":"8755"},
{"id":"5", "collapseTo":{"id":"6","colName":"column2"}, "expandTo":null, "column1":"534345345", "column2":"6453334", "column3":"8563564", "column4":"75683", "column5":"4756436", "column6":"7689768", "column7":"8755"},
{"id":"6", "collapseTo":null, "expandTo":{"column2":["1","2","3","4","5"]}, "column1":"534345345", "column2":"+5", "column3":"8563564", "column4":"75683", "column5":"4756436", "column6":"7689768", "column7":"8755"},
{"id":"7", "collapseTo":{"id":"9","colName":"column4"}, "expandTo":null, "column1":"763484", "column2":"773845358", "column3":"7657565663", "column4":"87546598", "column5":"75675634", "column6":"89058", "column7":"3453463"},
{"id":"8", "collapseTo":{"id":"9","colName":"column4"}, "expandTo":null, "column1":"763484", "column2":"773845358", "column3":"7657565663", "column4":"98976989", "column5":"75675634", "column6":"89058", "column7":"3453463"},
{"id":"9", "collapseTo":null, "expandTo":{"column4":["7","8"]}, "column1":"763484", "column2":"773845358", "column3":"7657565663", "column4":"+2", "column5":"75675634", "column6":"89058", "column7":"3453463"},
{"id":"10", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"909424", "column7":"9768768"},
{"id":"11", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"22934920", "column7":"9768768"},
{"id":"12", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"124376325", "column7":"9768768"},
{"id":"13", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"36727845", "column7":"9768768"},
{"id":"14", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"6856345", "column7":"9768768"},
{"id":"15", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"43536366", "column7":"9768768"},
{"id":"16", "collapseTo":{"id":"17","colName":"column6"}, "expandTo":null, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"76543686", "column7":"9768768"},
{"id":"17", "collapseTo":null, "expandTo":{"column6":["10","11","12","13","14","15","16"]}, "column1":"5378756", "column2":"75675473", "column3":"264523", "column4":"423543", "column5":"34534534", "column6":"+7", "column7":"9768768"}
]
}
可以使用隐藏列来保存附加信息。我用它代替jQuery.data这可以更有效地保存信息。具有分组链接的行在 JSON 数据中包含以下信息："expandTo":{"column2":["1","2","3","4","5"]}。其他行包含"expandTo":null。代替loadComplete我们可以隐藏所有行"expandTo":null。在其他行中，我们将某些列的包含内容转换为链接。例如如果expandTo has {"column2":["1","2","3","4","5"]}那么我们应该将项目从“column2”列转换为链接。作为链接上的单击操作，我们将隐藏该行并使数组中的所有行["1","2","3","4","5"]可见的。
您可以找到演示这一点的演示here。单击链接后，分组将展开。双击展开的行会折叠行并使网格恢复到先前的状态。
对应的代码是：
var grid = $("#list"),
myExpanding = function(e) {
var myData = $(this).data("expandTo"), i, l;
if (myData && typeof(myData.length) !== "undefined" && myData.length>0) {
for (i=0,l=myData.length; i<l; i++) {
$("#"+myData[i]).show();
}
$(this).closest("tr").hide();
}
e.preventDefault();
}, cmNameToIndex = {};
grid.jqGrid({
datatype:'json',
url:'CustomGrouping.json',
colNames:[//'Expand To',
'Column 1','Column 2','Column 3','Column 4','Column 5','Column 6','Column 7'],
colModel:[
//{name:'expandTo', width:1, hidden:true},
{name:'column1'},
{name:'column2'},
{name:'column3'},
{name:'column4'},
{name:'column5'},
{name:'column6'},
{name:'column7'}
],
cmTemplate:{width:85,align:'center',sortable:false},
rowNum:10000,
gridview:true,
jsonReader:{repeatitems: false},
loadComplete: function(data) {
var i=0, rows = data.rows, l = rows.length, cm = grid[0].p.colModel, rowid,
idToItem = {}, item;
// The ids of the rows which has in the first column (expandTo) the information
// about rows which should be expanded will be saved in the nonHiddenRows array.
// For the rows the expandingInfo[rowid]
for(; i<l; i++) {
item = rows[i];
idToItem[item.id] = item;
}
// fill cmNameToIndex to find easier the column index by column name
cmNameToIndex = {};
for (i=0,l=cm.length;i<l;i++){
cmNameToIndex[cm[i].name] = i;
}
$("tr.jqgrow",this).each(function(){
var tr=$(this), colName, linkInfo, td, rowid = this.id, item = idToItem[rowid];
//if ($.inArray(rowid,nonHiddenRows) !== -1) {
if (item && item.expandTo) {
//tr.show();
linkInfo = item.expandTo;
for (colName in linkInfo) {
if (linkInfo.hasOwnProperty(colName)) {
i = cmNameToIndex[colName];
td = $("td:nth-child("+(i+1)+")",this);
td.wrapInner($('<a>',
{
href:"#",
click:myExpanding,
}).data("expandTo",linkInfo[colName]));
}
}
} else {
tr.hide();
}
if (item && item.collapseTo) {
tr.data("collapseTo",item.collapseTo)
}
});
},
ondblClickRow: function(rowid, iRow, iCol, e) {
var tr = $("#"+rowid), tr1 = $(e.target,grid[0].rows).closest("tr.jqgrow"),
collapse = tr.data("collapseTo"), i, ids, l;
if (collapse && collapse.id && collapse.colName) {
i = cmNameToIndex[collapse.colName];
tr = $("#"+collapse.id);
ids = $("a", tr[0].cells[i]).data("expandTo");
if (ids && ids.length) {
tr.show();
for(i=0,l=ids.length; i<l; i++) {
$("#"+ids[i]).hide();
}
}
}
},
height: '100%'
});