agregación personalizada/agrupación en jqGrid

Question

general

Necesito alguna manera personalizar el plugin jqGrid, ya sea por ingeniosos trucos, hacks, o modificación del complemento, para apoyar el siguiente tipo de agregación/agrupación.

estaría muy agradecido por algunas ideas de la comunidad jqGrid sobre cómo implementar esto.

detalles

La agregación/agrupación funciona como sigue.

Al usuario se le presenta inicialmente una cuadrícula de datos como la siguiente, agrupada de acuerdo con "Columna 1". Observe los hipervínculos (por ejemplo, "+5"); estos hipervínculos representan filas "colapsadas" en las que todos los datos en esas filas tienen los mismos valores para todas las columnas, excepto las que tienen hipervínculos.

Al hacer clic, por ejemplo, en el enlace de "5", la tabla se expande para mostrar los 5 filas que se colapsaron previamente en uno (en sustitución de la fila colapsada que incluía el enlace "5") Tenga en cuenta que ahora todas las filas expandidas tienen valores únicos en la Columna 2, que anteriormente tenía el enlace "+5".

Cualquier ideas sobre cómo implementar esto? ¿Es posible esto con cualquier otro plugin de cuadrícula?

Answer 1

jqGrid no admite directamente el tipo de agrupación que necesita, por lo que hay que implementar algún tipo de agrupamiento manual.

la agrupación en sí se debe hacer en el servidor y la respuesta del servidor debe contener ambas filas extendidas y collaped. No entiendo muy bien cómo debería funcionar un solo enlace de expansión de grupo, así que describo cómo se puede implementar el gruping con un enlace por fila. Por otro lado, decido implementar el colapso de la fila anterior ampliada. Lo hago con respecto a la información adicional incluida en los datos de JSON.

Hagamos el servidor producir los siguientes datos 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"} 
    ] 
} 

Uno puede utilizar la columna oculta para guardar información adicional. Uso en lugar de ese jQuery.data que permite guardar la información de manera más efectiva. Las filas con los enlaces de agrupamiento contienen en los datos JSON la información como "expandTo":{"column2":["1","2","3","4","5"]}. Otras filas contienen "expandTo":null. Dentro de loadComplete podemos ocultar todas las filas que tengan "expandTo":null. En las otras filas convertiremos el contenido de algunas columnas a enlaces. Por ejemplo, si expandTo tiene {"column2":["1","2","3","4","5"]}, entonces debemos convertir el elemento de la columna "columna2" al enlace. Como acción de clic en el enlace, ocultaremos la fila y haremos visibles todas las filas de la matriz ["1","2","3","4","5"].

La demostración que demuestran esto se puede encontrar here. Al hacer clic en el enlace, la agrupación se expandirá. El doble clic en las filas expandidas sigue para colapsar las filas y retirar la cuadrícula en el estado anterior.

El código correspondiente es:

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