jqGrid遍历子网格中的网格数据
我想遍历包含在网格对象中的数据。 我的网格有一个包含一个子网格对象的定义，并以此方式创build
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("<table id='" + subgrid_table_id + "' class='scroll'></table>"); $("#" + subgrid_table_id).jqGrid({ [...] omitted for brevity }); } }); 我知道我可以使用这样的代码来迭代数据，并且有效地为第一级工作，但我正在寻找一种方法，即使在子网格数据上也可以迭代。
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 }
有什么办法可以做到这一点？
好。 在答案和这一个我描述如何枚举网格行大多有效。 也许如果你使用jQuery而不是使用DOM，那么代码对你来说看起来很奇怪。 我收到了使用DOM元素是否安全的问题？ 是不是更好地使用jQuery？ 所以我最早试图回答这个问题，并解释为什么我认为这是最好的方法。 如果您只对结果代码有兴趣，而没有解释，则可以跳过我的答案部分。
主要思想是$('#grid')是一个jQuery封装到HTML DOM <table>对象 。 表格DOM对象（ HTMLTableElement ） $('#grid')[0]具有行属性，它是网格行的集合： <tr> DOM元素（ HTMLTableRowElement ）的集合。 可以迭代每个索引的网格行： $('#grid')[0].rows[i]以0开始。如果知道rowid（ <tr> element的id），那么可以得到相应的<tr>关于$('#grid')[0].namedItem[rowid] DOM对象。 所以rows是集合的 DOM元素具有单元属性。 如果要检查网格第i行的第j列的包含，可以直接通过$('#grid')[0].rows[i].cells[j] 。 如果只知道列名，则可以检查colModel数组并search具有所需name属性的列。 如果colModel数组中的索引是j ，则可以使用$('#grid')[0].rows[i].cells[j]expression式中的$('#grid')[0].rows[i].cells[j] 。
重要的是rows集合和namedItem方法是W3C标准的一部分（参见这里和这里 ）。 所以在这里使用真的很安全 。 所有的浏览器填充rows集合，所有的浏览器都有本地代码 （!!!），这些代码实现了rows集合中的快速索引，并通过id（我的意思是namedItem方法）在集合中快速search。 jqGrid内部永久使用这些，这是jqGrid快速工作的原因。 jQuery是内部使用DOM的JavaScript库。 它可能不像原生浏览器代码那么快。 在某些情况下，如位置或宽度的计算，有许多技巧可以在所有浏览器中正确地获取信息，但使用HTML表格的DOM是W3标准 ，这里使用jQuery并没有什么优势。
在我的一些旧的答案中，我使用了代码grid.getDataIDs()和ids。 现在我build议你按照答案的代码。 只有一个关于子网格和其他行的评论。
jqGrid有4种<tr>元素，它们有4个不同的类。 因此，您可以检查<tr>元素的类，以确定行是否包含子网格，分组标题，标准行或隐藏的第一行，用于设置列的宽度。
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 } }
现在，如果您有标准网格行的行，您可以检查具有“AlertFF”名称的列中的checkbox。 首先你应该得到列的索引（在循环之外）。 你可以使用小的getColumnIndexByName方法： var iCol = getColumnIndexByName($('#grid'), 'AlertFF') 。 现在在if ($.inArray('jqgrow', trClasses) > 0)你可以做
if ($.inArray('jqgrow', trClasses) > 0) { if ($(row.cells[iCol]).children("input:checked") > 0) { // the checkbox in the column is checked } }
要检查从子网格的数据作为您使用的网格 ，您可以执行以下操作
... } 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 }
以这种方式，你得到了像我们开始的$('#grid')具有相同结构的subgridTable 。 你可以像我之前描述的那样检查子网格的包含。
