Цикл статей «Документация jqGrid на русском».
Следующая статья — «Datatype function в jqGrid».
Предыдущая статья — «JsonReader как функция в jqGrid».
Несмотря на то, что основной целью jqGrid является отображение динамических данных, полученных из базы, jqGrid включает широкий спектр методов для манипуляции данными на клиенте.
Связанное свойство в массиве свойств: datatype
Связанные свойства в colModel: sorttype, datefmt
Связанные методы: getRowData, delRowData, setRowData, addRowData, updateGridRows. Для получения более подробной информации обратитесь к статье «Список методов экземпляров jqGrid» и Дополнительные методы jqGrid.
В версии 3.7 были добавлены два дополнительных свойства: data и localReader. Свойство data описано в статье «Свойства jqGrid». Свойство localReader имеет тот же смысл, что и свойство jsonReader, описанное в предыдущих статьях, но применяется для массива данных, хранящегося локально.
Начальная конфигурация localReader такая же, как и у jsonReader
1 2 3 4 5 6 7 8 9 10 11 |
localReader = { root: "rows", page: "page", total: "total", records: "records", repeatitems: false, cell: "cell", id: "id", userdata: "userdata", subgrid: {root:"rows", repeatitems: true, cell:"cell"} } |
Все операции из jsonReader могут быть применены и к localReader.
Если мы определили панель постраничной навигации для таблицы с локальными данными, то кнопки в панели навигации автоматически становятся недоступными. Другими словами, текущая версия таблицы не поддерживает постраничную навигацию и поиск.
Сначала мы должны указать jqGrid, что данные будут находиться в клиентской части. Это может быть сделано с помощью свойства datatype. Для этого мы должны установить:
1 2 3 4 5 |
jQuery("#grid_id").jqGrid({ ... datatype: "clientSide", ... }); |
Вместо "clientSide" можно указать "local" . Это одно и то же.
После этого будет хорошей идеей указать sorttype для колонок. Если sorttype не установлен, то sorttype по умолчанию будет "text" . Давайте рассмотрим наш пример в условиях массива данных.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
... <script> jQuery(document).ready(function(){ jQuery("#list").jqGrid({ datatype: 'clientSide', colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'], colModel :[ {name:'invid',index:'invid', width:55, sorttype:'int'}, {name:'invdate',index:'invdate', width:90, sorttype:'date', datefmt:'Y-m-d'}, {name:'amount',index:'amount', width:80, align:'right',sorttype:'float'}, {name:'tax',index:'tax', width:80, align:'right',sorttype:'float'}, {name:'total',index:'total', width:80,align:'right',sorttype:'float'}, {name:'note',index:'note', width:150, sortable:false} ], pager: '#pager', rowNum:10, viewrecords: true, caption: 'My first grid' }); ... }); </script> |
Здесь вы можете увидеть новые свойства: datatype, sortype and datefmt.
Возможные значения для sorttype:
'int' — данные будут интерпретированы как целое число,
'float' — данные будут интерпретированы как десятичная дробь,
'date' — данные будут интерпретированы как дата,
'text' — данные будут интерпретированы как текст.
Нам нужна эта информация для выбора подходящей сортировки для колонки. В дополнение к sorttype date нам нужно знать формат данных, который будет отображаться в таблице. Формат по умолчанию ‘Y-m-d’. Описание формата даты идентично с форматом даты в PHP. Для получения более подробной информации обратитесь к php.net.
Давайте добавим какие-нибудь данные. Это может быть сделано с помощью метода addRowData.
Параметры этого метода:
1 |
jQuery("#grid_id").addRowData( rowid, data, position, srcrowid ); |
где:
- rowid — это значения будет использоваться в качестве id строки
- data — массив с данными в виде пар «имя:значение», где имя — имя из colModel.
- position — указывает куда добавлять данные: 'first', 'last', 'before' или 'after'. Значение "first" добавляет новую строку в начало таблицы, "last" добавляет строку в конец таблицы, "before"и "after" используют id строки из srcrowid
-
srcrowid — id строки для случаев "before" и "after".
1 2 3 4 5 6 |
<script> ... var myfirstrow = {invid:"1", invdate:"2007-10-01", note:"note", amount:"200.00", tax:"10.00", total:"210.00"}; jQuery("#list").addRowData("1", myfirstrow); ... </script> |
Этой строкой мы добавляем нашу первую запись в таблицу. Важно иметь в виду, что порядок пар ключ‐значение не важен. Более того, мы можем иметь одну пару ключ‐значение:
1 2 3 4 5 |
<script> ... jQuery("#list").addRowData("2", {amount:"300.00"}); ... </script> |
Этой строкой мы добавили запись с только одним значением в колонке amount.
Чтобы получить данные из конкретной строки мы должны использовать метод getRowData:
1 |
jQuery("#grid_id").getRowData( rowid ); |
где rowid — это id строки, данные из которой мы хотим получить.
1 |
jQuery("#list").getRowData( "1" ); |
Вернёт массив пар имя-значение. Результат:
1 |
{invid:"1", invdate:"2007-10-01", note:"note", amount:"200.00", tax:"10.00", total:"210.00"}; |
Для удаления строки мы должны использовать метод delRowData:
1 |
jQuery("#grid_id").delRowData( rowid ); |
где rowid — это id строки, которую нужно удалить.
1 |
jQuery("#list").delRowData( "2" ); |
удалит строку с id= 2.
Этот метод вернёт true, если удаление прошло успешно, false — в противном случае.
Чтобы поменять все или часть значений в строке мы можем использовать метод setRowData.
1 |
jQuery("#grid_id").setRowData( rowid, data ); |
где rowid — это id строки, в которой мы хотим поменять значения, data — массив с новыми значениями. Массив содержит пары вида «имя:значение».
1 |
jQuery("#list").setRowData( "1", { tax:"5", total:"205" }); |
поменяет значения в ячейках tax и total строки с id = 1.
Метод возвращает true, если изменение данных прошло успешно, в противном случае — false.
Для обновления нескольких строк таблицы сразу можно использовать метод updateGridRows. Для получения большей информации обратитесь к статье «Дополнительные методы jqGrid».
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Datatype function в jqGrid».
Предыдущая статья — «JsonReader как функция в jqGrid».
DOM-хранилище, или локальное хранилище (localStorage). Атрибут localStorage предоставляет области постоянного хранения для доменов. И укаждого свой. Тоесть нельзя открыть страницу одного домена и сохранить переменую на клиенте window.localStorage.setItem(«Аааа», 123);, а потом открыть страницу другого домена и прочитать эту перемменую window.localStorage.getItem(«Аааа»);. Или просто пообмениваться переменими…. Это возможно использовав jqGrid? Как реализовать? Где «копать» примеры?