jqGrid 遍历子网格中的网格数据

Question

我想遍历网格对象中包含的所有数据。 我的网格有一个包含子网格对象的定义，并以这种方式创建

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
}

有没有办法做到这一点？

Answer 1

好的。在the answer 和this one 中，我描述了如何最有效地枚举网格行。如果您更多地使用 jQuery 而不是 DOM，那么代码对您来说可能看起来很奇怪。我收到了使用 DOM 元素是否安全的问题？改用jQuery不是更好吗？所以我首先尝试回答这些问题并解释为什么我认为这是最好的方法。如果您只对结果代码感兴趣而不对解释感兴趣，您可以跳过我的回答部分。

主要思想是$('#grid') 是HTML DOM <table> object 的jQuery 包装器。表 DOM 对象 (HTMLTableElement) $('#grid')[0] 具有 rows 属性，它是网格行的集合：<tr> DOM 元素的集合 (HTMLTableRowElement)。可以迭代每个索引的网格行：$('#grid')[0].rows[i]，它以 0 开头。如果知道 rowid（<tr> element 的 id），那么可以得到与$('#grid')[0].namedItem[rowid] 对应的<tr> DOM 对象。所以rows 是具有cells 属性的 DOM 元素的集合。如果要检查网格第 i 行的第 j 列的包含，可以直接通过 $('#grid')[0].rows[i].cells[j] 获取 <td> 元素。如果您只知道列名，您可以检查 colModel 数组并搜索具有您需要的 name 属性的列。如果colModel 数组中的索引是j，您可以使用$('#grid')[0].rows[i].cells[j] 表达式中的索引。

重要的是rows 集合和namedItem 方法是W3C 标准的一部分（参见here 和here）。所以在那里使用是非常安全。所有浏览器都填充rows 集合，所有浏览器都有本机代码 (!!!)，它实现了在rows 集合中的快速索引和通过id 在集合中快速搜索（我的意思是namedItem方法）。 jqGrid 在内部永久使用这些，这就是 jqGrid 快速工作的原因。 jQuery 是使用内部 DOM 的 JavaScript 库。它可能没有原生浏览器代码那么快。在某些情况下，例如计算位置或宽度，有很多技巧可以在所有 Web 浏览器中正确获取信息，但是使用 HTML 表格 DOM 是W3 standard，这里使用 jQuery 并没有任何优势。

在我的一些旧答案中，我使用了代码 grid.getDataIDs() 和 id。现在我建议你遵循the answer 的代码。仅关于子网格和其他行的评论。

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”名称的列中的复选框。首先，您应该获取列的索引（在循环之外）。您可以使用来自the answer 的小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
    }
}

要检查您使用的来自subgrid as grid 的数据，您可以执行以下操作

...
} 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') 具有相同的结构。您可以像我之前描述的那样检查子网格的包含。