Производительность рендеринга JQGrid

Question

У нас есть проблемы с производительностью рендеринга JQgrid. Пожалуйста, порекомендуйте.

JQGrid v4.3.2, jquery-1.7.2.min.js, jquery-ui-1.8.1.sortable.min.js, jquery-ui-1.8.20.custom.min.js Браузер: IE6,7

Каждому пользователю отображаются данные в 2 сетках - акции и фьи. Типичный диапазон данных составляет ~300 строк в каждой сетке. Список столбцов может варьироваться для групп пользователей, и, следовательно, структура colModel является динамической. После получения данных мы применяем условные стили к каждой строке (жирный шрифт или нет) и меняем форматирование чисел.

Пример кода для сетки приведен ниже:

jQuery('#ActionItems').jqGrid({
    url: 'http://actionsurl',
    mtype: 'GET',
    datatype: 'json',
    page: 1,
    colNames: actionsColNames,
    colModel: actionsColModel,
    viewrecords: true,
    loadonce: true,
    scrollrows: false,
    prmNames: { id: "PrimaryID" },
    hoverrows: false,
    jsonReader: { id: "PrimaryID" },
    sortname: 'CreateDt',
    sortorder: 'desc',
    gridComplete: function () {
        fnActionsGridComplete();
    },
    recordtext: "Displaying {1} of {2} Records",
    emptyrecords: "No data to view",
    emptyDataText: "No data found.",
    loadtext: "Loading...",
    autoWidth: true,
    rowNum: 1000,
    grouping: true,
    groupingView: groupingViewOp
});

Форматирование кода в fnActionsGridComplete():

1. Установить ширину столбца в%

2. Итерация по строкам для применения условных стилей CSS

   $("#Actions").find("tbody tr").each(function () {
       if ($(this)[0].id != '') { 
           var data = $(this).find('.IsItemNew').html();
               if(data == "Y") {            
               $(this).css("fontWeight", "bold");
               }                
       }                    
   });
   

3. Форматирование для определенных столбцов.

В настоящее время у нас есть проблемы с производительностью>200 строк данных в любой сетке. После анализа мы обнаружили, что форматирование и рендеринг занимают больше всего времени.

Можете ли вы предложить какой-либо оптимальный способ улучшить производительность здесь. (пейджинг нет-нет)

С уважением, Раджани

- Мы провели тестирование на IE9 и его намного лучше. Но пользователи не могут сразу обновить.

Answer 1

Причина в коде fnActionsGridComplete, Я рекомендую вам прочитать ответ, который объясняет, почему это очень важно использовать gridview: true и уменьшить количество изменений DOM-элементов страницы.

То, что вы пытаетесь сделать, кажется, может быть реализовано путем добавления cellattr к колонне "IsItemNew", Код может быть примерно следующим

cellattr: function (rowId, value) {
    // additional parameter of cellattr: rawObject, cm, rdata are optional
    if (value === "Y") {
        return ' style="font-weight:bold;"';
    }
}

В качестве альтернативы вы можете добавить class атрибут вместо style и определить font-weight: bold в классе.

Я рекомендую вам прочитать ответ, этот, этот и т. Д. Если вам нужно установить некоторые свойства для всей строки, а не только для ячейки, которую вы можете использовать rowattr (см. ответ).

Если бы вы включили gridview: true и использовать cellattr, rowattr или пользовательские средства форматирования вы увидите, что производительность сетки будет на совершенно другом уровне.