Javascript jqGrid中的自定义聚合/分组

概述

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

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

详细信息

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

用户最初会看到如下所示的数据网格，根据“第1列”进行分组。请注意超链接（例如“+5”）；这些超链接表示“折叠”行，其中除具有超链接的列外，这些行中的所有数据对所有列都具有相同的值

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

---

关于如何实现这一点有什么想法吗？这在任何其他网格插件中都是可能的吗？

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"}
  ]
}

可以使用隐藏列保存其他信息。我使用而不是那些可以更有效地保存信息的工具。带有分组链接的行在JSON数据中包含信息，如

“expandTo”：{“column2”：[“1”、“2”、“3”、“4”、“5”]}

。其他行包含

“expandTo”：null

。在

loadComplete

的内部，我们可以隐藏所有具有

“expandTo”：null的行。在其他行中，我们将把一些列的包含转换为链接。例如，如果
expandTo
具有
{“column2”：[“1”、“2”、“3”、“4”、“5”]}
，那么我们应该将项目从“column2”列转换为链接。当单击链接时，我们将隐藏该行，并使数组中的所有行可见

演示这一点的演示可以找到。单击链接后，分组将展开。双击展开的行之后，将折叠行并使网格处于上一状态

相应的代码是：

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%'
});

var grid=$（“#列表”），
myExpanding=函数（e）{
var myData=$（this）.data（“expandTo”），i，l；
if（myData&&typeof（myData.length）！=“未定义”&&myData.length>0）{
对于（i=0，l=myData.length；iYou描述了在单击“+5”后可以展开网格行链接。以后是否可以将行折叠回来？我在您的建议中看到没有执行此操作的界面。不。行一旦展开，就不能再折叠。谢谢。您想如何处理交叉点？例如，您可以在一列中有5个公共值，在另一列中有5个。如果有3行，您会显示什么第一组中是否存在第二组？@peter回答第一个问题：如屏幕截图所示，一行可以有多个分组（即，“+3”和“+2”在一行中）。对于第二个问题：结果集在一个特定列上分组，该列只包含该列的唯一行；在该约束下，所有其他列都将分组/折叠。@Jack B。因此，根据处理列的顺序，是否会有不同的分组模式？例如，如果从左到右，最左边的列将“纯粹”使用公共值对所有行进行分组。当您查看下一列时，您已经折叠了行。随着从左到右进行分组，为每列设置的值将越来越小。这是可取的吗？似乎可能会产生误导-计数不会反映整列的公共性，而是t的公共性他没有按照上一列对值进行分组。非常感谢您的回答。我现在正在审阅，但它看起来非常非常好，包括您的演示。@Jack B:不客气！我选择了JSON中的结构
expandTo
，以便它可以将有关多个分组的信息作为一个分组
column2
和
column4
fo保存（r示例）。我的回答只说明了如何实现您的需求。我希望您可以轻松地将其修改到您的环境中。我们必须对多行执行此操作，但此回答将我们引向正确的方向。谢谢！@Jack B:我想象了在一列中扩展多个链接的情况：如果您单击链接中的某个以前隐藏的链接w将是可见的。新的可见行中的一些行也可能有链接。要实现此行为，您应该只从服务器发布隐藏行，如我的示例中所示。唯一的区别是，在开始时，一些内部有链接的行最初将被隐藏。唯一的问题是，例如，其中有两个链接扩展行的顺序是空闲的。因此，可能需要包含更多（或更多）隐藏行。@ Jack B.：您也可以考虑以更紧凑的形式从服务器发送数据，并使用<代码> AdRoDeDATAs/Cuff>添加行（扩展为<代码>点击< /COD>事件处理程序）。。在这种情况下，除了当前在
expandTo
中使用的ID之外，还应包括expanding column的值。这样可以从本质上减少服务器响应的大小。