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），则可以获得相应的<tr> DOM对象$('#grid')[0].namedItem[rowid]。因此rows是具有属性的cells DOM元素的集合。如果要检查网格第i行的第j列的包含，可以直接通过<td>获取$('#grid')[0].rows[i].cells[j]元素。如果只知道列名，则可以检查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()和ids。现在我建议您按照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')相同的结构。您可以像我之前描述的那样检查子网格的包含。

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

1 个答案: