Установить класс или идентификатор в строке jqGrid на основе пары ключ / значение, помещенной в строку (например, ID)

Question

Я предполагаю, что afterInsertRow - это метод для использования, и у меня уже есть дополнительные данные для каждой строки (чтение / чтение) с ключом "readStatus".

Чего я не хочу, так это проходить DOM после завершения сетки, чтобы добавить класс css в строку на основе некоторого значения ячейки.

Есть предложения?

Надстройка на:

Если это данные ячейки:

{"cell":["blah blah blah"],"id":"123456789","readstatus":"unread"}

Как мне добраться до части readstatus?

Answer 1

Использование функции afterInsertRow не лучший способ, особенно если вы используете gridview:true jqGrid, параметр , который почти всегда рекомендуется. Посмотрите на старый ответ , который в основном делает то, что вам нужно. Схема кода может быть примерно следующей

$('#list').jqGrid({
    //...
    loadComplete: function() {
        var ids = $(this).jqGrid("getDataIDs"), l = ids.length, i, rowid, status;
        for (i = 0; i < l; i++) {
            rowid = ids[i];
            // get data from some column "readStatus"
            status = $(this).jqGrid("getCell", rowid, "readStatus");
            // or get data from some 
            //var rowData = $(this).jqGrid("getRowData', rowid);

            // now you can set css on the row with some
            if (status === "error") {
                $('#' + $.jgrid.jqID(rowid)).addClass('myErrorClass');
            }
        }
    }
});

Это похоже на «прохождение DOM после завершения сетки», но оно работает быстро, как использование afterInsertRow.

ОБНОВЛЕНО : Ответ относительно старый. Более поздние версии jqGrid имеют обратные вызовы callattr и rowattr, которые можно использовать для более эффективной реализации тех же требований. Важно понимать, что установка класса на одну ячейку сетки или на строку сетки (см. .addClass('myErrorClass') в коде ответа) следует перекомпоновка браузера на всех элементов, существующих на странице . Поэтому следует уменьшить количество смены элементов DOM на странице. Для этого строго рекомендуется использовать gridview: true (подробнее см. ответ ). Обратные вызовы callattr, rowattr и пользовательские средства форматирования, используемые вместе с gridview: true, позволяют сразу создавать полное содержимое тела сетки . Таким образом, количество изменений на странице будет сокращено, а производительность улучшится.

Свойство столбца callattr из colModel может быть полезно для установки класса, стиля или некоторых других атрибутов в выбранных ячейках сетки. Обратный вызов rowattr может помочь установить класс, стиль или некоторые другие атрибуты для выбранных строк сетки (точно так же, как и в приведенном выше примере).

Я рекомендую всем, кто прочитал ответ выше, взгляните на ответ , который показывает, как использовать rowattr.

Подробнее о callattr можно прочитать, например, в следующих ответах: это , это , это , это . Если вы используете datatype: "xml", реализация может быть немного более сложной: подробности см. в ответе .

Answer 2

Это также можно использовать для добавления класса CSS в строку

var _tr = $("#gridId").jqGrid("getInd", rowid, true);
$(_tr).addClass("ui-state-error");

Надежды, которые помогают