jqGrid遍历子网格中的网格数据 [英] jqGrid iterate over the grid Data in a subgrid

问题描述

我想遍历网格对象中包含的所有数据. 我的网格具有一个包含子网格对象的定义，并且是通过这种方式创建的

I would like to iterate all over the data contained in grid object. My grid has a definition that include a subgrid object and is created this way

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
        });
    }
});

我知道我可以使用像这样的代码对数据进行迭代，并且有效地适用于第一级，但是我正在寻找一种方法，甚至可以对子网格数据进行迭代.

I know I can use code like this one to iterate on the data, and effectively it works for the first level but I am looking for a method that will permit me to iterate even on the subgrid data.

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
}

有什么办法可以做到这一点?

Is there any way to accomplish this?

推荐答案

确定.在答案和

OK. In the answer and in this one I describe how to enumerate the grid rows mostly effectively. Probably if you works more with jQuery and not with DOM the code will looks strange for you. I received questions whether it is safe to use the DOM elements? Is it not better to use jQuery instead? So I before all I try to answer on the questions and explain why I think it's the best way. If you have an interest only in the result code and not in the explanation you can skip the part of my answer.

主要思想是$('#grid')是 HTML DOM <table>的jQuery包装.对象.表DOM对象(HTMLTableElement)$('#grid')[0]具有行属性，该属性是集合网格行数:<tr> DOM元素(HTMLTableRowElement)的集合.一个人可以迭代每个索引的网格行:$('#grid')[0].rows[i]，它从0开始.如果一个人知道rowid(<tr> element的ID)，则可以相对于$('#grid')[0].namedItem[rowid]获得相应的<tr> DOM对象.因此，rows是 具有

The main idea is that $('#grid') is a jQuery wrapper to the HTML DOM <table> object. The table DOM object (HTMLTableElement) $('#grid')[0] has rows property which is collection of grid rows: collection of <tr> DOM elements (HTMLTableRowElement). One can iterate the grid rows per index: $('#grid')[0].rows[i] which starts with 0. If one knows the rowid (the id of the <tr> element) then one can get the corresponding <tr> DOM object with respect of $('#grid')[0].namedItem[rowid]. So the rows is collection of DOM elements having cells property. If you want to examine the contain of the j-th column of the i-th row of the grid you can get the <td> element directly by $('#grid')[0].rows[i].cells[j]. If you know only the column name you can examine colModel array and search for the column having the name property which you need. If index in the colModel array is j you can use the index in the $('#grid')[0].rows[i].cells[j] expression.

重要的是rows集合和namedItem方法是W3C标准的一部分(请参见这里和这里).因此在此使用非常安全.所有浏览器都填充rows集合，并且所有浏览器都具有本机代码(!!!)，可在rows集合中实现快速索引编制，并通过id在集合中进行快速搜索(我指的是namedItem方法). jqGrid在内部永久使用它们，这就是jqGrid快速工作的原因. jQuery是内部使用DOM的JavaScript库.它不能像本机浏览器代码那么快.在某些情况下，例如位置或宽度的计算，有许多技巧可以在所有Web浏览器中正确获取信息，但是使用HTML表DOM是

Important is that rows collection and namedItem method are parts of W3C standard (see here and here). So it's really safe to use there. All browsers fill the rows collection and all browsers has native code (!!!) which implement quick indexing in rows collection and quick searching in the collection by id (I mean the namedItem method). jqGrid internally use these permanently and it is the reason why jqGrid works quickly. The jQuery is JavaScript library which use internally DOM. It can be not so quickly as native browser code. In some situations like calculation of position or width there are many tricks to get the information correctly in all web browsers, but working with HTML table DOM is W3 standard and the usage of jQuery here gives you no advantages.

在我的一些旧答案中，我使用了代码grid.getDataIDs()并使用了ID.现在，我建议您遵循

In some my old answers I used code grid.getDataIDs() and for by the ids. Now I would suggest you to follow the code from the answer. One only remark about subgrids and other rows.

jqGrid具有4种<tr>元素类型，这些元素具有4个不同的类.因此，您可以检查<tr>元素的类，以确定该行是否包含内部用于设置列宽的子网格，分组头，标准行或隐藏的第一行.

jqGrid has 4 types of <tr> elements which has 4 different classes. So you can examine the classes of <tr> elements to determine whether the row contains subgrid, grouping header, standard row or hidden first row used internally to set the width of the columns.

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"名称的列中的复选框.首先，您应该获取列索引(在循环外部).您可以从

Now if you have row which is standard grid row you can examine the checkbox from the column having 'AlertFF' name. First of all you should get the index of the column ones (outside of the loop). You can use small getColumnIndexByName method from the answer: var iCol = getColumnIndexByName($('#grid'), 'AlertFF'). Now inside of the body of if ($.inArray('jqgrow', trClasses) > 0) you can do

if ($.inArray('jqgrow', trClasses) > 0) {
    if ($(row.cells[iCol]).children("input:checked") > 0) {
        // the checkbox in the column is checked
    }
}

要检查来自子网格为网格的数据，其中您可以使用以下方法

To examine the data from subgrid as grid which you use you can do following

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

In the way you get subgridTable which has the same structure like $('#grid') from which we started. You can examine the contain of subgrid like I described before.

这篇关于jqGrid遍历子网格中的网格数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！