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? Поэтому я прежде всего пытаюсь ответить на вопросы и объяснить, почему я считаю, что это лучший способ. Если вас интересует только код результата, а не объяснение, вы можете пропустить часть моего ответа.

Основная идея заключается в том, что $('#grid') это оболочка jQuery для HTML DOM <table> объект. Объект DOM таблицы (HTMLTableElement) $('#grid')[0] имеет свойство ряда, которое является коллекцией строк сетки: коллекция <tr> Элементы DOM (HTMLTableRowElement). Можно перебрать строки сетки для каждого индекса: $('#grid')[0].rows[i] который начинается с 0. Если кто-то знает rowid (идентификатор <tr> element) тогда можно получить соответствующий <tr> DOM объект в отношении $('#grid')[0].namedItem[rowid], Итак rows это коллекция Элементы DOM, имеющие свойство ячейки. Если вы хотите проверить содержание j-го столбца i-го ряда таблицы, вы можете получить <td> элемент непосредственно $('#grid')[0].rows[i].cells[j], Если вы знаете только имя столбца, вы можете проверить colModel массив и поиск столбца, имеющего name недвижимость, которая вам нужна Если индекс в colModel массив j Вы можете использовать индекс в $('#grid')[0].rows[i].cells[j] выражение.

Важно то, что rows коллекция и namedItem Метод является частью стандарта W3C (см. здесь и здесь). Так что там действительно безопасно. Все браузеры заполняют rows коллекция и все браузеры имеют собственный код (!!!), который реализует быструю индексацию в rows Коллекция и быстрый поиск в коллекции по идентификатору (я имею в виду namedItem метод). jqGrid использует их постоянно, и это причина, по которой jqGrid работает быстро. JQuery - это библиотека JavaScript, которая использует внутренне DOM. Это может быть не так быстро, как родной код браузера. В некоторых ситуациях, таких как вычисление положения или ширины, есть много хитростей для правильного получения информации во всех веб-браузерах, но работа с HTML-таблицей DOM является стандартом W3, и использование jQuery здесь не дает вам никаких преимуществ.

В некоторых моих старых ответах я использовал код grid.getDataIDs() и для идентификаторов. Теперь я бы предложил вам следовать коду из ответа. Одно только замечание о подсетках и других рядах.

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') с которого мы начали. Вы можете изучить содержимое подсетки, как я описал ранее.