Следует ли заменить использование addJSONData jqGrid на использование setGridParam() и trigger ('reloadGrid')?

Недавно я написал ответ на вопрос "jqGrid показывать сообщение по умолчанию "погрузка" при обновлении таблицы/на пользовательском обновлении". При написании ответа я подумал: почему он использует функцию addJSONData() для обновления данных в сетке вместо изменения URL-адреса в отношении setGridParam() и обновления данных jqGrid в отношении триггера ('reloadGrid')? Сначала я хотел рекомендовать использовать reloadGrid, но, подумав об этом, я понял, что не совсем уверен, что лучший способ. По крайней мере, я не могу объяснить в двух предложениях, почему я предпочитаю второй путь. Поэтому я решил, что это может быть интересным предметом обсуждения.

Итак, мы имеем типичную ситуацию. У нас есть веб-страница с хотя бы одним jqGrid и некоторыми другими элементами управления, такими как комбинированные поля (selects), флажки и т.д., Которые дают возможность пользователю изменять область информации, отображаемой в jqGrid. Обычно мы определяем какой-либо обработчик событий, например jQuery("#selector").change(myRefresh).keyup(myKeyRefresh) и нам нужно перезагрузить контейнер jqGrid на основе пользовательских вариантов.

После чтения и анализа информации из дополнительного пользовательского ввода мы можем обновить контейнер jqGrid по меньшей мере двумя способами:

Сделайте вызов $.ajax() вручную, а затем внутри успешного или полного дескриптора вызова $.ajax jQuery.parseJSON() (или eval), а затем вызовите функцию addJSONData из jqGrid. Я нашел много примеров на stackoverflow.com, которые используют addJSONData.
Обновить url jqGrid на основе пользовательского ввода, reset current page число до 1 и, при необходимости, изменить подпись сетки. Все это можно сделать в отношении методов setGridParam() и опций setCaption() jqGrid. В конце вызовите функцию триггера сетки ('reloadGrid'). Чтобы построить url, кстати, я использую в основном функцию jQuery.param, чтобы убедиться, что у меня все параметры url правильно упакованы относительно encodeURIComponent.

Я хотел бы, чтобы мы обсудили преимущества и недостатки обоих способов. В настоящее время я использую второй способ, поэтому я начну с преимуществ этого.

Можно сказать: я вызываю существующую веб-службу, конвертирую полученные данные в формат jqGrid и вызываю addJSONData. Именно по этой причине я использую метод addJSONData!

Хорошо, я выберу другой путь. jqGrid может напрямую обращаться к веб-службе и заполнять результаты внутри сетки. Существует множество опций jqGrid, которые позволяют вам настроить этот процесс.

Прежде всего, можно удалить или переименовать любой стандартный параметр, отправленный на сервер, в отношении параметра prmNames jqGrid или добавить дополнительные параметры в отношении postData (см. http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). Можно модифицировать все сконструированные параметры непосредственно перед тем, как jqGrid сделает соответствующий запрос $.ajax, определив функцию serializeGridData() (еще один вариант jqGrid). Более того, каждый параметр $.ajax можно изменить, установив параметр ajaxGridOptions для jqGrid. Я использую ajaxGridOptions: {contentType: "application/json"}, например, как общую настройку $.jgrid.defaults. Параметр ajaxGridOptions очень мощный. Что касается опции ajaxGridOptions, можно переопределить любой параметр отправки запроса $.ajax с помощью jqGrid, например, ошибок, завершения и событий beforeSend. Я вижу потенциально интересно определить событие dataFilter, чтобы иметь возможность производить любую модификацию данных строки, возвращаемых с сервера.

Еще один аргумент в пользу использования триггера ('reloadGrid') - это блокировка jqGrid во время обработки запроса AJAX. В основном я использую параметр loadui: 'block' для блокировки jqGrid во время отправки запроса JSON на сервер. Что касается модуля jQuery blockUI http://malsup.com/jquery/block/, можно заблокировать больше частей веб-страницы только в виде сетки. Для этого можно вызвать:

jQuery('#main').block({ message: '<h1>Die Daten werden vom Server geladen...</h1>' });

перед вызовом метода trigger ('reloadGrid') и jQuery ('# main'). unblock() внутри функций loadComplete и loadError. В этом случае параметр loadui может быть установлен на "disable".

И мое последнее замечание: В основном я использовал для создания jqGrid с datatype, установленным в 'local' вместо 'json', и я бы назвал функцию триггера ('change') некоторых из элементы управления (один из списков со списком): jQuery("#selector").change(myRefresh).keyup(myKeyRefresh).trigger('change'). Таким образом, я строю параметр url jqGrid только в одном месте внутри дескриптора изменения и изменяю тип данныхto 'json' внутри описанного выше setGridParam().

Поэтому я не понимаю, почему функция addJSONData() должна использоваться когда-либо.

Может ли кто-нибудь, кто использует функцию addJSONData(), объяснить мне преимущества его использования?

Чтобы быть справедливым, я могу добавить, что addJSONData(), который существует в более ранних версиях jqGrid, как имеющий большинство функций, которые я описываю здесь. Следует ли заменить использование addJSONData jqGrid на использование setGridParam() и trigger ('reloadGrid')?

Ответ 1

Я использую addJSONData с jqgrid, но было 1 год назад, с того времени в jqGrid многое изменилось.

Во всяком случае, мне нужно было тяжелое и сложное манипулирование с помощью gui на стороне клиента (вещи, связанные с банком), мои данные Json были только локальными и отправлены на сервер как часть jkey point (работа завершена). У меня было несколько jqgrid (некоторые из них внутри других jqgrids:-)) и какое-то локальное хранилище данных для браузера, которое было достаточно маленьким, чтобы оставаться в браузере и сложным и достаточно перемещаемым, чтобы быть непригодным в разумное время через ajax IO.

Первая версия использовала Ajax IO, когда меня поразили блокировки и проблемы с ожиданием, и по количеству новых сложных графических интерфейсов я был очень рад найти этот крюк addJSONData и у меня есть своя временная шкала ajax за пределами jQgrid.

Ответ 2

Простота построения сетки/данных с сервера. Одной из основных причин, по которой я использую JSON, является то, что он меньше, чем XML, и хорошо работает на стороне сервера (PHP) и клиента (JS). И в результате я стандартизовал (и я знаю несколько) передачу данных между JSON.

Следовательно, addJSONData обеспечивает простой выход для постоянного обновления всех данных в сетке и отображения его одним выстрелом. Его быстрый, быстрый, грязный, и он работает.

Однако лично это будет плохой идеей в долгосрочной перспективе, при этом большой datagrid постоянно освежает. И вот где, обновления для конкретной ячейки/столбцов, после первоначального get, является гораздо лучшей идеей иметь 2 вызова. Отправьте изменение сетки на сервер и получите изменения с сервера.

Таким образом, одним из основных преимуществ этого является то, что его быстрый старт. И когда данные становятся слишком большими, добавьте все варианты понижения, чтобы они появлялись только один раз в начале. Хотя индивидуальное обновление/получение может быть добавлено после захвата начальных данных.

Хороший рабочий цикл: быстрый прототип → Эффективный datagrid-клиент-сервер

Ответ 3

Я использую addJSONData для повышения производительности на странице. Вот мой прецедент

У меня есть 4 jqGrids на странице. Метод поиска данных одинаковый для всех 4 сеток, но столбцы и строки различаются в каждой сетке. Поэтому вместо того, чтобы делать 4 вызова сервера для заполнения данных в каждой сетке, я делаю один вызов, который возвращает дополнительные данные JSON для остальных 3-х сеток. И в событии "loadComplete" первой сетки я разделяю данные для каждой из трех других сеток и загружаю их отдельно. Ниже приведена сокращенная версия события loadComplete первой сетки

 loadComplete:function (data) {

        //clear and reload area summary table
        var areaSummary = data.areaSummary;
        jQuery("#areaSummaryTable").jqGrid('clearGridData');
        jQuery("#areaSummaryTable")[0].addJSONData(areaSummary);

        //clear and reload area total table
        var areaTotal = data.areaTotal;
        jQuery("#areaTotalTable").jqGrid('clearGridData');
        jQuery("#areaTotalTable")[0].addJSONData(areaTotal);

        //clear and reload area detail table
        jQuery("#detailedAreaTable").jqGrid('clearGridData');
        var areaDetail = data.areaDetail;
        jQuery("#detailedAreaTable")[0].addJSONData(areaDetail);
    }

Это работает очень хорошо за последние 2 недели, пока сегодня я не заметил, что при загрузке страницы каждая из трех сеток делает серверные вызовы случайным URL. Причина этого заключалась в том, что тип данных для этих сеток был определен как "json". Если я изменил тип данных на "локальный", из этой сетки не будут вызваны вызовы сервера, но метод addJSONData в приведенном выше коде перестает работать. Я попытался использовать "setGridParam", чтобы изменить тип данных на "json" перед использованием addJSONData, как показано ниже, но это также не работает.

        jQuery("#areaSummaryTable").jqGrid('clearGridData');
        jQuery("#areaSummaryTable").jqGrid('setGridParam', {datatype:'json'});
        jQuery("#areaSummaryTable")[0].addJSONData(areaSummary);

Я надеюсь, что есть простой способ конвертировать данные в массив и использовать addRowData:) Дайте мне знать, есть ли лучший способ справиться с таким вариантом использования

Ответ 4

Вот почему я использую addJSONData()...

В моем случае у меня есть одна страница, содержащая сетку данных, и другую страницу, которая используется для построения критериев поиска.

Страница поиска, которая ничего не знает о странице сетки, содержит семь полей. Пользователь может заполнить хотя бы одно или все семь полей.

При отправке поисковая страница форматирует данные как пары "ключ/значение" в объекте JSON, который отправляется на сервер.

На сервере данные JSON анализируются в предложение SQL WHERE.

Результаты SQL-данных отправляются обратно клиенту как объект JSON в ответе HTTP, который также создает страницу сетки из кода, отправленного с сервера.

Насколько я знаю, единственный способ получить данные JSON из ответа HTTP в сетке - использовать addJSONData().

Крис

Ответ 5

Когда вам нужно иметь полный контроль над тем, как и когда отправляется ajax, вы предпочитаете использовать addJSONData.

например. Форма поиска содержит два блока <select>, оба засеянных, значение первого select будет влиять на второе. Возможно, пользователь установил значение по умолчанию для полей select. И вы хотите искать сетку только после определения двух значений.

Затем более предпочтительно использовать такие вещи, как $.Deferred, для управления порядком создания и заполнения вызовов ajax. Конечно, вы можете установить данные jqgrid как local, затем json, а затем reloadGrid для управления запуском. Но это просто не тот треугольник.

Ответ 6

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

При загрузке страницы jqgrid загружается данными JSON, возвращаемыми по URL-адресу. Нам нужна следующая функциональность страницы для работы, но без необходимости переключения страниц. Вначале загружается, например, 10 записей. Когда я нажимаю кнопку "Далее" (NavButton), вместо загрузки следующих 10 записей на следующей странице, я хочу, чтобы все 20 записей отображались на самой странице.

Здесь, во втором и последующих запросах, я использую метод addJSONData. Я делаю ajax-вызов при нажатии кнопки Next, а затем используйте addJSONData для добавления данных json в существующие 10 записей. Я не могу использовать setGridParam, потому что, когда я его использую, начальные 10 записей исчезли, и он просто загружает следующие 10 записей на одной странице.

Если у вас есть альтернатива для addJSONData для этой конкретной функции, я буду рад узнать. Поскольку я сталкиваюсь с проблемами с расширением Subgrid, панель инструментов фильтра и т.д., Когда следующий набор записей загружается с помощью addJSONData.