jqGrid itera sobre la grilla Datos en una subruta

Me gustaría iterar sobre todos los datos contenidos en el objeto de grilla. Mi grilla tiene una definición que incluye un objeto de subgrid y se crea de esta manera

var grid = $(gridID); var pager = $(pagerID); grid.jqGrid({ url: GetBaseWSUrl() + 'MyWs.asmx/MyMethod', colNames: ['UMLT', 'FF', 'PC'], colModel: [ { name: 'Name', index: 'Name', width: 180, template: colTextTemplate }, { name: 'AlertFF', index: 'AlertFF', width: 22, align: 'center', sortable: false, formatter: "checkbox", formatoptions: { disabled: false} }, { name: 'AlertPC', index: 'AlertPC', width: 22, align: 'center', sortable: false, formatter: "checkbox", formatoptions: { disabled: false} } ], [...] subGrid: true, subGridOptions: { "plusicon": "ui-icon-triangle-1-e", "minusicon": "ui-icon-triangle-1-s", "openicon": "ui-icon-arrowreturn-1-e", "reloadOnExpand": true, "selectOnExpand": true }, subGridRowExpanded: function (subgrid_id, row_id) { var subgrid_table_id = subgrid_id + "_t"; $("#" + subgrid_id).html("
"); $("#" + subgrid_table_id).jqGrid({ [...] omitted for brevity }); } });

Sé que puedo usar código como este para iterar en los datos, y efectivamente funciona para el primer nivel, pero estoy buscando un método que me permita iterar incluso en los datos de la sub-red.

 var grid = $('#grid'); var m = grid.getDataIDs(); for (var i = 0; i < m.length; i++) { var record = grid.getRowData(m[i]); //do something with the record } 

¿Hay alguna forma de lograr esto?

DE ACUERDO. En la respuesta y en esta , describo cómo enumerar las filas de la cuadrícula de manera más efectiva. Probablemente si trabajas más con jQuery y no con DOM, el código te parecerá extraño. Recibí preguntas sobre si es seguro usar los elementos DOM. ¿No es mejor usar jQuery en su lugar? Entonces, antes de todo, bash responder las preguntas y explicar por qué creo que es la mejor manera. Si solo tiene interés en el código de resultado y no en la explicación, puede omitir la parte de mi respuesta.

La idea principal es que $('#grid') es un contenedor jQuery al objeto HTML DOM

. El objeto DOM de tabla ( HTMLTableElement ) $('#grid')[0] tiene propiedad de filas que es una colección de filas de grillas: colección de elementos de

DOM ( HTMLTableRowElement ). Uno puede iterar las filas de la cuadrícula por índice: $('#grid')[0].rows[i] que comienza con 0. Si uno conoce el rowid (el id del

element

), entonces uno puede obtener el correspondiente

Objeto DOM con respecto a $('#grid')[0].namedItem[rowid] . Entonces las rows son colección de Elementos DOM que tienen propiedad de celdas . Si desea examinar el contenido de la j-ésima columna de la i-ésima fila de la grilla, puede obtener el elemento

directamente por $('#grid')[0].rows[i].cells[j] . Si solo conoce el nombre de la columna, puede examinar la matriz colModel y buscar la columna que tenga la propiedad de name que necesita. Si el índice en la matriz colModel es j , puede usar el índice en la expresión $('#grid')[0].rows[i].cells[j] .

Importante es que la colección de rows y el método namedItem son partes del estándar W3C (ver aquí y aquí ). Entonces es realmente seguro usarlo allí. Todos los navegadores llenan la colección de rows y todos los navegadores tienen código nativo (!!!) que implementa la indexación rápida en la colección de rows y la búsqueda rápida en la colección por identificación (me refiero al método namedItem ). jqGrid internamente usa estos permanentemente y es la razón por la cual jqGrid funciona rápidamente. JQuery es una biblioteca de JavaScript que usa DOM internamente. No puede ser tan rápido como el código de navegador nativo. En algunas situaciones, como el cálculo de la posición o el ancho, existen muchos trucos para obtener la información correctamente en todos los navegadores web, pero trabajar con la tabla HTML DOM es el estándar W3 y el uso de jQuery aquí no ofrece ninguna ventaja.

En algunas de mis respuestas anteriores, utilicé el código grid.getDataIDs() y para los ids. Ahora le sugiero que siga el código de la respuesta . Un comentario único sobre subgrids y otras filas.

jqGrid tiene 4 tipos de elementos

que tiene 4 clases diferentes. De modo que puede examinar las clases de elementos

para determinar si la fila contiene subgrid, encabezado de agrupación, fila estándar o primera fila oculta utilizada internamente para establecer el ancho de las columnas.

 var grid = $('#grid')[0], rows = grid.rows, cRows = rows.length, iRow, row, trClasses; for (iRow = 0; iRow < cRows; iRow++) { row = rows[iRow]; // row.id is the rowid trClasses = row.className.split(' '); if ($.inArray('jqgrow', trClasses) > 0) { // the row is a standard row } else if ($.inArray('ui-subgrid', trClasses) > 0) { // the row contains subgrid (only if subGrid:true are used) } else if ($.inArray('jqgroup', trClasses) > 0) { // the row is grouping header (only if grouping:true are used) } else if ($.inArray('jqfoot', trClasses) > 0) { // the row is grouping summary (only if grouping:true are used) // and groupSummary: [true] inside of groupingView setting } else if ($.inArray('jqgfirstrow', trClasses) > 0) { // the row is first dummy row of the grid. we skip it } } 

Ahora, si tiene una row que es una fila de grilla estándar, puede examinar la checkbox de la columna que tiene el nombre ‘AlertFF’. En primer lugar, debe obtener el índice de las columnas (fuera del ciclo). Puede usar el método getColumnIndexByName pequeño de la respuesta : var iCol = getColumnIndexByName($('#grid'), 'AlertFF') . Ahora dentro del cuerpo de if ($.inArray('jqgrow', trClasses) > 0) puedes hacer

 if ($.inArray('jqgrow', trClasses) > 0) { if ($(row.cells[iCol]).children("input:checked") > 0) { // the checkbox in the column is checked } } 

Para examinar los datos de la sub-cuadrícula como una cuadrícula que usa, puede hacer lo siguiente

 ... } else if ($.inArray('ui-subgrid', trClasses) > 0) { // the row contains subgrid var subgridTable = $(row).find("table.ui-jqgrid-btable:first"); // you can work with the subgridTable like with a grid } 

En la forma en que obtienes subgridTable que tiene la misma estructura como $('#grid') desde la que comenzamos. Puede examinar el contenido de la subred como he descrito anteriormente.