OK. In 答案 and in this one我描述了如何最有效地枚举网格行。如果您更多地使用 jQuery 而不是 DOM,那么代码可能会让您看起来很奇怪。我收到一些问题,使用 DOM 元素是否安全?使用 jQuery 不是更好吗?因此,我首先尝试回答这些问题并解释为什么我认为这是最好的方法。如果您只对结果代码感兴趣而不是对解释感兴趣,您可以跳过我的答案部分。
主要思想是$('#grid')
是一个 jQuery 包装器HTML 文档对象模型<table> object。表 DOM 对象 (HTMLTableElement
) $('#grid')[0]
has rows属性是网格行的集合:集合<tr>
DOM 元素 (HTMLTableRowElement
)。可以迭代每个索引的网格行:$('#grid')[0].rows[i]
从 0 开始。如果知道 rowid(<tr> element
)则可以得到对应的<tr>
DOM 对象关于$('#grid')[0].namedItem[rowid]
。所以rows
是集合DOM 元素具有cells财产。如果你想检查网格第 i 行的第 j 列的内容,你可以得到<td>
元素直接由$('#grid')[0].rows[i].cells[j]
。如果您只知道列名,则可以检查colModel
数组并搜索具有name
您需要的财产。如果索引在colModel
数组是j
您可以使用中的索引$('#grid')[0].rows[i].cells[j]
表达。
重要的是rows
收集和namedItem
方法是 W3C 标准的一部分(请参阅here and here)。所以就是真的很安全在那里使用。所有浏览器都填写rows
集合和所有浏览器都有本机代码(!!!) 实现快速索引rows
集合并通过 id 在集合中快速搜索(我的意思是namedItem
方法)。 jqGrid 内部永久使用这些,这就是 jqGrid 运行速度快的原因。 jQuery 是内部使用 DOM 的 JavaScript 库。它可能不如本机浏览器代码那么快。在某些情况下,例如位置或宽度的计算,有很多技巧可以在所有 Web 浏览器中正确获取信息,但使用 HTML 表 DOM 是W3标准在这里使用 jQuery 并没有给你带来任何优势。
在我的一些旧答案中我使用了代码grid.getDataIDs()
并通过 ids 进行。现在我建议您遵循以下代码答案。关于子网格和其他行的唯一评论。
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
}
}
现在如果你有row
这是标准网格行,您可以检查名称为“AlertFF”的列中的复选框。首先,您应该获取列的索引(在循环之外)。你可以用小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
}
以你得到的方式subgridTable
它具有相同的结构$('#grid')
我们从这里开始。您可以像我之前描述的那样检查子网格的包含情况。