Почему gridview: true используется и что это значит?

Ответ 1

Я согласен с тем, что параметр gridview: true не является хорошим объяснением в документации. В некоторых случаях (например, в случае TreeGrid) параметр будет автоматически установлен. Поэтому я пытаюсь объяснить, что это значит и почему я рекомендую всегда использовать параметр gridview: true и никогда не использовать afterInsertRow.

Многие люди начинают с некоторых других компьютерных языков в качестве JavaScript и пишут свою первую программу, которая запускается в веб-браузере после того, как у них есть стиль написания программ. У меня была такая же проблема 3 года назад. Важно понять, что должен делать веб-браузер после внесения некоторых изменений на странице HTML. В использовании использования jQuery это то, что вы постоянно делаете.

Если вы измените какой-либо элемент DOM на странице, можно изменить положение на всех других элементах DOM, существующих на странице. Если вы думаете о плавающей модели (например, с помощью float: left) или многих других настройках CSS, вы поймете, что веб-браузер не может просто переместить растровое представление существующей страницы и вставить новый вставленный элемент. Таким образом, веб-браузер должен пересчитать позицию всех элементов, существующих на странице, и переместить некоторые элементы из другого места. Даже если вы измените стиль CSS элемента, произойдет так называемое перепланирование. Я рекомендую вам прочитать статью и посмотреть видео о предмете.

Основная идея повышения производительности веб-браузера в описанном выше случае будет , чтобы уменьшить количество изменений на странице. Так что вам нужно изменить 5 стилей одного элемента DOM, который вы должны сделать это за одну операцию. Вы можете использовать jQuery.css({...}) со всеми измененными стилями вместо 5 отдельных вызовов. Еще лучше было бы определить один класс CSS и использовать метод jQuery.addClass.

В случае jqGrid нужно заполнить <tbody> всеми строками и ячейками сетки. Если вы используете опцию gridview: true, тогда jqGrid собирает содержимое всех строк в виде строк с фрагментами HTML. Позже jqGrid вызовет jQuery.append в строке, которая устанавливает внутренне innerHTML свойство для установки всего фрагмента HTML на странице.

По той же причине вы должны использовать cellattr, rowattr или настраиваемые форматы, которые работают с фрагментами HTML, представленными ячейками или строками как строки. В конце строки будут добавлены к другим строкам и будут использоваться в операции jQuery.append, как описано выше.

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

Чтобы быть точным, я должен упомянуть, что снижение производительности, о котором я рассказывал ранее, можно было увидеть только в случае большой сетки и будет в основном очевидным в случае медленного веб-браузера (например, Internet Explorer, особенно старых версий IE).

Ответ 2

Согласно документации jqGrid для gridview:

В предыдущих версиях jqGrid, включая 3.4.X, чтение относительно большого набора данных (число строк >= 100) вызывало проблемы с производительностью. Причиной этого было то, что по мере того, как каждая ячейка была вставлена ​​в сетку, мы применяли к ней около 5-6 вызовов jQuery. Теперь эта проблема решена; мы теперь вставляем строку ввода сразу с помощью jQuery append. Результат впечатляет - примерно в 3-5 раз быстрее. Каков будет результат, если мы сразу вставим все данные? Да, это можно сделать с помощью опции gridview (установите значение true). Результатом является сетка, которая в 5-10 раз быстрее. Конечно, когда этот параметр установлен в true, мы имеем некоторые ограничения. Если установлено значение true, мы не можем использовать treeGrid, subGrid или событие afterInsertRow. Если вы не используете эти три параметра в сетке, вы можете установить эту опцию в true и наслаждаться скоростью.

Таким образом, используя эту опцию, вы можете получить хорошее улучшение скорости с предупреждением о том, что он несовместим с treeGrid, subGrid или afterInsertRow. Я считаю, что это ограничение. Если вы найдете больше, сообщите нам, чтобы документация могла быть обновлена.

Для чего вы действительно можете видеть конкретные случаи в grid.base.js методах addXmlData и addJSONData, где afterInsertRow есть пропущено:

if(ts.p.gridview === false ) {
    $("tbody:first",t).append(rowData.join(''));
    $(ts).triggerHandler("jqGridAfterInsertRow", [rid, rd, xmlr]);
    if(afterInsRow) {ts.p.afterInsertRow.call(ts,rid,rd,xmlr);}
    rowData=[];
}

Ограничения treeGrid и subGrid более тонкие и явно не вызывают в коде.