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?

推荐答案

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

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> 对象.表格 DOM 对象 (HTMLTableElement) $('#grid')[0] 具有 rows 属性，它是网格行的集合:<tr> DOM 元素的集合 (HTMLTableRowElement).可以迭代每个索引的网格行: $('#grid')[0].rows[i] 以 0 开头.如果知道 rowid(< 的 id;tr> element) 则可以得到 $('#grid')[0].namedItem[rowid]<对应的 <tr> DOM 对象/代码>.所以 rows 是 DOM 元素的集合 细胞 属性.如果要检查网格第 i 行的第 j 列的包含，可以通过 $('#grid') 直接获取 <td> 元素[0].rows[i].cells[j].如果您只知道列名，则可以检查 colModel 数组并搜索具有您需要的 name 属性的列.如果 colModel 数组中的索引是 j 你可以使用 $('#grid')[0].rows[i].cells[j] 表达式.

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 集合，并且所有浏览器都有 native code (!!!) 在 rows 集合中实现快速索引并在按 id 收集(我的意思是 namedItem 方法).jqGrid 在内部永久使用这些，这就是 jqGrid 快速工作的原因.jQuery 是使用内部 DOM 的 JavaScript 库.它可能没有原生浏览器代码那么快.在某些情况下，例如计算位置或宽度，有很多技巧可以在所有 Web 浏览器中正确获取信息，但是使用 HTML 表格 DOM 是 W3 标准 在这里使用 jQuery 没有任何优势.

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() 和 for 的 ids.现在我建议您遵循 答案.仅关于子网格和其他行的评论.

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"名称的列中的复选框.首先，您应该获取列的索引(在循环之外).您可以使用 答案:var iCol = getColumnIndexByName($('#grid'), 'AlertFF').现在在 if ($.inArray('jqgrow', trClasses) > 0) 的主体内部你可以做

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

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

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屋！