jqGrid выполняет итерацию по сетке. Данные в подсетке. - PullRequest
2 голосов
/ 16 августа 2011

Я хотел бы перебрать все данные, содержащиеся в объекте сетки. Моя сетка имеет определение, которое включает в себя объект подсетки, и создается таким образом

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
}

Есть ли способ сделать это?

1 Ответ

5 голосов
/ 17 августа 2011

OK.В ответе и этом я описываю, как наиболее эффективно перечислить строки сетки.Вероятно, если вы больше работаете с jQuery, а не с DOM, код будет выглядеть странно для вас.Я получил вопросы, безопасно ли использовать элементы DOM?Не лучше ли использовать вместо этого jQuery?Поэтому я прежде всего пытаюсь ответить на вопросы и объяснить, почему я считаю, что это лучший способ.Если вас интересует только код результата, а не объяснение, вы можете пропустить часть моего ответа.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...