Jqgrid: agrupación de datos a nivel de fila

Con jqgrid, ¿es posible agrupar los datos de nivel de fila como en la imagen adjunta? Básicamente, quería dividir los datos de una fila en particular en varias filas de ciertas columnas en adelante.

Ejemplo

enter image description here

Le sugiero que use cellattr para establecer el atributo rowspan en algunas celdas o configure style="display:none" para ocultar otras celdas innecesarias. La idea es la misma que con colspan de la respuesta .

Como resultado, puede crear la siguiente grilla (ver la demostración )

enter image description here

u otro (ver otra demostración )

enter image description here

El problema con las cuadrículas se encuentra en otras características de jqGrid, como clasificación, paginación, desplazamiento y selección. Algunas de las características que uno puede implementar con esfuerzos adicionales, pero otra es más difícil de implementar.

El código que utilicé en la demostración es el siguiente:

 var mydata = [ { id: "1", country: "USA", state: "Texas", city: "Houston", attraction: "NASA", zip: "77058", attr: {country: {rowspan: "5"}, state: {rowspan: "5"}} }, { id: "2", country: "USA", state: "Texas", city: "Austin", attraction: "6th street", zip: "78704", attr: {country: {display: "none"}, state: {display: "none"}} }, { id: "3", country: "USA", state: "Texas", city: "Arlinton", attraction: "Cowboys Stadium", zip: "76011", attr: {country: {display: "none"}, state: {display: "none"}} }, { id: "4", country: "USA", state: "Texas", city: "Plano", attraction: "XYZ place", zip: "54643", attr: {country: {display: "none"}, state: {display: "none"}} }, { id: "5", country: "USA", state: "Texas", city: "Dallas", attraction: "Reunion tower", zip: "12323", attr: {country: {display: "none"}, state: {display: "none"}} }, { id: "6", country: "USA", state: "California", city: "Los Angeles", attraction: "Hollywood", zip: "65456", attr: {country: {rowspan: "4"}, state: {rowspan: "4"}} }, { id: "7", country: "USA", state: "California", city: "San Francisco", attraction: "Golden Gate bridge", zip: "94129", attr: {country: {display: "none"}, state: {display: "none"}} }, { id: "8", country: "USA", state: "California", city: "San Diego", attraction: "See world", zip: "56653", attr: {country: {display: "none"}, state: {display: "none"}} }, { id: "9", country: "USA", state: "California", city: "Anaheim", attraction: "Disneyworld", zip: "92802", attr: {country: {display: "none"}, state: {display: "none"}} } ], arrtSetting = function (rowId, val, rawObject, cm) { var attr = rawObject.attr[cm.name], result; if (attr.rowspan) { result = ' rowspan=' + '"' + attr.rowspan + '"'; } else if (attr.display) { result = ' style="display:' + attr.display + '"'; } return result; }; $("#list").jqGrid({ datatype: 'local', data: mydata, colNames: ['Country', 'State', 'City', 'Attraction', 'Zip code'], colModel: [ { name: 'country', width: 70, align: 'center', cellattr: arrtSetting }, { name: 'state', width: 80, align: 'center', cellattr: arrtSetting }, { name: 'city', width: 90 }, { name: 'attraction', width: 120 }, { name: 'zip', index: 'tax', width: 60, align: 'right' } ], cmTemplate: {sortable: false}, rowNum: 100, gridview: true, hoverrows: false, autoencode: true, ignoreCase: true, viewrecords: true, height: '100%', caption: 'Grid with rowSpan attributes', beforeSelectRow: function () { return false; } }); 

Utilicé en el código anterior propiedad attr adicional junto con los datos de entrada. Es solo un ejemplo. Quería hacer la implementación de la función cellattr más simple. Puede usar la misma idea y colocar la información necesaria para cellattr en cualquier otro formato.

Esta es mi solución para datos JSON:

 var prevCellVal = { cellId: undefined, value: undefined }; $("#list").jqGrid({ url: 'your WS url' datatype: 'json', mtype: "POST", ajaxGridOptions: { contentType: "application/json" }, colNames: ['Country', 'State', 'City', 'Attraction', 'Zip code'], colModel: [ { name: 'country', width: 70, align: 'center', cellattr: function (rowId, val, rawObject, cm, rdata) { var result; if (prevCellVal.value == val) { result = ' style="display: none" rowspanid="' + prevCellVal.cellId + '"'; } else { var cellId = this.id + '_row_' + rowId + '_' + cm.name; result = ' rowspan="1" id="' + cellId + '"'; prevCellVal = { cellId: cellId, value: val }; } return result; } }, { name: 'state', width: 80, align: 'center' }, { name: 'city', width: 90 }, { name: 'attraction', width: 120 }, { name: 'zip', index: 'tax', width: 60, align: 'right' } ], cmTemplate: {sortable: false}, rowNum: 100, gridview: true, hoverrows: false, autoencode: true, ignoreCase: true, viewrecords: true, height: '100%', caption: 'Grid with rowSpan attributes', beforeSelectRow: function () { return false; }, gridComplete: function () { var grid = this; $('td[rowspan="1"]', grid).each(function () { var spans = $('td[rowspanid="' + this.id + '"]', grid).length + 1; if (spans > 1) { $(this).attr('rowspan', spans); } }); } }); 

Este ejemplo es para una sola columna, pero con pocas correcciones puede usarse también para múltiples columnas.

Hola, “pistipanko”

He hecho un cambio en su solución, creo que funcionó mejor.

 cellattr: function(rowId, val, rawObject, cm, rdata) { var result; var cellId = this.id + '_row_' + rawObject[3] + grid.getGridParam('page'); if (prevCellVal.cellId == cellId) { result = ' style="display: none"'; } else { result = ' rowspan="' + rawObject[6] + '"'; prevCellVal = { cellId: cellId, value: rawObject[3] }; } return result; } 

Estoy haciendo la agrupación con el valor de otra columna, es por eso que rawObject[3] Y estoy usando un valor rowspan devuelto por la aplicación en rawObject[6]

Funciona genial.

Espero eso ayude 🙂