jqGrid中的自定义聚合/分组

概观

我需要以某种方式自定义jqGrid插件，通过巧妙的技巧，黑客或修改插件，以支持以下类型的聚合/分组。

我非常感谢jqGrid社区关于如何实现这一点的一些想法。

细节

聚合/分组的工作原理如下。

最初向用户呈现如下的数据网格，根据“列1”分组。 注意超链接（例如“+5”）; 这些超链接表示“折叠”行，其中这些行中的所有数据对于除具有超链接的列之外的所有列具有相同的值。

例如，通过单击“+5”链接，表格将展开以显示之前折叠为一行的5行（替换包含“+5”链接的折叠行）。 请注意，现在扩展的行在第2列中都具有唯一值，该列之前具有“+5”链接。

有关如何实现这一点的任何想法？ 是否可以使用任何其他网格插件？

Answer 1

jqGrid不直接支持你需要的这种分组，因此必须实现某种手动分组。

分组本身应在服务器上完成，服务器响应应包含扩展行和折叠行。 我不太明白为什么更多的扩展链接组应该工作，所以我描述了如何实现每行一个链接的gruping。 另一方面，我决定实施先前扩展的行的崩溃。 我这样做是为了关注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":{"column2":["1","2","3","4","5"]} 。 其他行包含"expandTo":null 。 在loadComplete我们可以隐藏具有"expandTo":null所有行。 在其他行中，我们将一些列的包含转换为链接。 例如，如果expandTo具有{"column2":["1","2","3","4","5"]}那么我们应该将项目从列“column2”转换为链接。 作为链接上的点击动作，我们将隐藏行并使arrays中的所有行["1","2","3","4","5"]可见。

您可以在此处找到演示此演示文稿。 点击链接后，分组将被扩展。 双击展开的行后，折叠行并在之前的状态下停用网格。

相应的代码是：

 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', { 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