Как улучшить производительность jqGrid

Question

У меня есть более 1000 строк для заполнения данных через jqGrid. Когда я заполняю данные через jqGrid, jqGrid занимает больше 20 секунд, чтобы заполнить данные. Это время используется только jqGird (время выполнения запроса и другое время исключаются). У меня есть требование заполнить 1000 строк с помощью jqGrid, и я не хочу использовать разбиение на страницы. Пожалуйста, помогите мне, как увеличить производительность jgGrid.

Версии, которые мы используем: jgGrid: 3.6.4 JQuery: 1.4.2 Пользовательский интерфейс jQuery: 1.7.2 Браузер: IE 7

Следующий код:

jQuery("#displayItemPerformanceGrid").jqGrid({
    //datatype: displayItemPerformanceGridData, //json
    url:'/DISMGMT/StandardProxy/displayItemPerformanceService?userRole='+userRole+
        '&userName='+userName+'&duration='+displayDuration+'&userId='+userId,
    datatype: 'json',
    colNames: ["CM","Display Location","Display Name","Item","Item Description",
               "Store","DC","Date","Type","Promo Retail","Reg. Retail 50" "Units",
               "Sales $", "Profit $"],
//      $("#load_navGrid").html("Loading...").show();
    colModel: [
        {name:"cmName",index:"cmName",classes:"metric",width:130,resizable:true,
         align:"left"},
        {name:"displayLocation",index:"displayLocation",width:80,align: "left"},
        {name:"displayName",index:"displayName",width:225,align:"left"},
        {name:"item",index:"item",sorttype:"int",width:60,align:"left"},
        {name:"itemDescription",index:"itemDescription",width:230,align:"left"},
        {name:"store",index:"store",sorttype:"int",width: 70,align: "right"//,
         //unformat : spaceFormatter
         },
        {name: "dc", index: "dc", sorttype: "int",width: 60,align: "right"//,
         //unformat : spaceFormatter
         },
        {name:"date",index:"date",sorttype:"date",datefmt:"mm-dd-yy",width:80,
         align: "left"},
        {name: "type",index: "type",width: 45,align: "left"},
        {name: "price",index: "price",width: 70,align: "left"},
        {name: "regRetail",index: "regRetail",width: 70,align: "left"},
        {name:"units",index:"units",sorttype:"int",width:45,align:"right",
         unformat : spaceFormatter},
        {name:"sales",index:"sales",sorttype:"int",width:45,align:"right",
         unformat : spaceFormatter},
        {name:"profit1",index:"profit1",sorttype:"int",width:40,align:"right",
         unformat : spaceFormatter}
    ],
    width: 982,
    height: 137,
    toolbar: [true, "top"],
    viewrecords: true,
    rowNum: 1500,
//      gridview:true,
    loadonce:true
});

Подскажите пожалуйста, как улучшить производительность jqGrid

Answer 1

Использовать виртуальную прокрутку (посмотрите демо , Новое в версии 3.7 -> Виртуальная прокрутка).

Answer 2

Ваш вопрос похож на другой вопрос с форума trirand, на который я недавно ответил . Чтобы быть уверенным, я могу повторить информацию здесь.

В целом для jqGrid нет проблем с отображением 1000 строк. Демонстрационный пример , содержащий 15 столбцов и 1000 строк, будет отображаться на моем компьютере достаточно быстро. У меня нет IE7, но в IE8, IE9 beta, Chrome, Firefox, Opera и Safari (все в последних версиях) время отображения таблицы очень быстро. В этом примере я использую модифицированный пользовательский интерфейс jQuery, где .ui-widget :active { outline: none; } удалено. См. здесь и здесь для более подробной информации.

Таким образом, чтобы помочь вам, вам нужно иметь полное определение вашего jqGrid, включая HTML-код и тестировать данные JSON . Вы можете захватить данные в отношении Fiddler или Firebug . Вероятно, у вас есть некоторые типы данных, не используйте опцию gridview:true и используйте afterInsertRow , который заставляет jqGrid работать медленнее, особенно для lagre страниц. Возможно также, что вы выполняете много работы внутри обработчика событий gridComplete или loadComplete. Так что без кода я могу только догадываться. Также может быть важно, какой столбец вы используете для сортировки данных и как вы вставляете данные в таблицу (с параметром data, loadonce:true или addRowData).

Еще одной точкой зрения является использование локальной подкачки . Если вы предпочитаете возвращать все 1000 строк сразу с сервера, это мешает вам не использовать локальную подкачку 1000 строк данных. На следующем примере я демонстрирую это. Проблема проста: все 1000 строк не могут отображаться для пользователя сразу . Пользователь должен прокручивать строки либо в веб-браузере, либо относительно локальной подкачки jqGrid. Преимущество локальной подкачки: только данные для одной страницы будут помещены в таблицу. Все остальные данные будут храниться только в отсортированной форме внутри. Это может улучшить производительность и практически ничего не менять с точки зрения пользователей.

Более того, интеллектуальная локальная фильтрация данных с учетом фильтрация на панели инструментов или отдельное поле / расширенный поиск может очень сильно помочь пользователю проанализировать много информации из 1000 строк , которая будет отображаться ему. Локальная фильтрация и локальный пейджинг могут быть использованы как собственные.