I would like to iterate all over the data contained in grid object. My grid has a definition that include a subgrid object and is created this way
var grid =
OK. In the answer and in this one I describe how to enumerate the grid rows mostly effectively. Probably if you works more with jQuery and not with DOM the code will looks strange for you. I received questions whether it is safe to use the DOM elements? Is it not better to use jQuery instead? So I before all I try to answer on the questions and explain why I think it's the best way. If you have an interest only in the result code and not in the explanation you can skip the part of my answer.
The main idea is that $('#grid')
is a jQuery wrapper to the HTML DOM <table> object. The table DOM object (HTMLTableElement
) $('#grid')[0]
has rows property which is collection of grid rows: collection of <tr>
DOM elements (HTMLTableRowElement
). One can iterate the grid rows per index: $('#grid')[0].rows[i]
which starts with 0. If one knows the rowid (the id of the <tr> element
) then one can get the corresponding <tr>
DOM object with respect of $('#grid')[0].namedItem[rowid]
. So the rows
is collection of DOM elements having cells property. If you want to examine the contain of the j-th column of the i-th row of the grid you can get the <td>
element directly by $('#grid')[0].rows[i].cells[j]
. If you know only the column name you can examine colModel
array and search for the column having the name
property which you need. If index in the colModel
array is j
you can use the index in the $('#grid')[0].rows[i].cells[j]
expression.
Important is that rows
collection and namedItem
method are parts of W3C standard (see here and here). So it's really safe to use there. All browsers fill the rows
collection and all browsers has native code (!!!) which implement quick indexing in rows
collection and quick searching in the collection by id (I mean the namedItem
method). jqGrid internally use these permanently and it is the reason why jqGrid works quickly. The jQuery is JavaScript library which use internally DOM. It can be not so quickly as native browser code. In some situations like calculation of position or width there are many tricks to get the information correctly in all web browsers, but working with HTML table DOM is W3 standard and the usage of jQuery here gives you no advantages.
In some my old answers I used code grid.getDataIDs()
and for by the ids. Now I would suggest you to follow the code from the answer. One only remark about subgrids and other rows.
jqGrid has 4 types of <tr>
elements which has 4 different classes. So you can examine the classes of <tr>
elements to determine whether the row contains subgrid, grouping header, standard row or hidden first row used internally to set the width of the columns.
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
}
}
Now if you have row
which is standard grid row you can examine the checkbox from the column having 'AlertFF' name. First of all you should get the index of the column ones (outside of the loop). You can use small getColumnIndexByName
method from the answer: var iCol = getColumnIndexByName($('#grid'), 'AlertFF')
. Now inside of the body of if ($.inArray('jqgrow', trClasses) > 0)
you can do
if ($.inArray('jqgrow', trClasses) > 0) {
if ($(row.cells[iCol]).children("input:checked") > 0) {
// the checkbox in the column is checked
}
}
To examine the data from subgrid as grid which you use you can do following
...
} 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
}
In the way you get subgridTable
which has the same structure like $('#grid')
from which we started. You can examine the contain of subgrid like I described before.