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

好.在答案和本文中,我将介绍如何有效地枚举网格行.可能如果你更多地使用jQuery而不是DOM,那么代码对你来说会很奇怪.我收到的问题是,使用DOM元素是否安全？使用jQuery不是更好吗？所以我在尝试回答问题并解释为什么我认为这是最好的方法之前.如果您只对结果代码感兴趣而不在解释中,则可以跳过我的答案部分.

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

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

在我的一些旧答案中,我使用了代码grid.getDataIDs()和id.现在我建议你按照答案中的代码.关于子网格和其他行的唯一评论.

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