Подтаблицы (Subgrid) в jqGrid

Цикл статей «Документация jqGrid на русском».

Следующая статья — «Подтаблица как таблица в jqGrid».
Предыдущая статья — «Метод FormToGrid в jqGrid».

В некоторых случаях возникает необходимость отображать (или редактировать) данные, которые являются дочерними к выбранной строке родительской таблицы. Хочется, конечно, отображать только те записи, которые связаны с выбранной записью таблицы, а не записи, которые являются дочерними ко всем записям таблицы.

jqGrid предлагает два способа обработки дочерних записей:

  • subGrid
  • таблица как subGrid

Установка

Для того чтобы использовать этот модуль нужно выбрать Subgrid при скачивании таблицы. Для получения большей информации обратитесь к статье «Установка jqGrid».
Разработчики могут найти исходные коды в файле grid.subgrid.js в каталоге src.

Свойства

Подтаблицы используют следующие свойства, события и методы родительской таблицы, то есть вы должны устанавливать эти свойства в свойствах таблицы.

Свойство: subGrid
Тип: boolean
Если установлен в true, то включает использование подтаблиц. Если подтаблицы включены, то добавляется дополнительная колонка в левой части родительской таблицы. Эта колонка содержит картинку 'plus' (плюсик), которая показывает, что пользователь может кликнуть на неё, чтобы развернуть строку. По умолчанию все строки свёрнуты.
По умолчанию: false

Свойство: subGridOptions
Тип: object
Множество свойств для подтаблицы. Ниже перечислены все свойства с их значениями по умолчанию:
{plusicon : "ui-icon-plus",minusicon : "ui-icon-minus",openicon: "ui-icon-carat-1-sw",expandOnLoad: false,selectOnExpand : false,reloadOnExpand : true}
plusicon и minusicon определяют иконки для случаев, когда таблица свёрнута и развёрнута. Должно быть корректным именем иконки из темы.
openicon иконка под иконкой minusicon, когда подтаблица развёрнута.
expandOnLoad если установлено в true, то делает так, что все строки будут автоматически развёрнуты при загрузке новый данных.
selectOnLoad если установлено в true, то строка становится выбранной, когда происходит клик мышкой на иконке plusicon.
reloadOnExpand Если установлено в false, то данные в подтаблице загружаются только один раз, и все последующие клики просто скрывают/показывают данные, но AJAX-вызовов не происходит.
По умолчанию:

Свойство: subGridModel
Тип: array
Это свойство описывает модель данных подтаблицы, имеет эффект, только когда свойство subGrid равно true. Это массив, описывающий колонки подтаблицы. Синтаксис:
subGridModel : [{ name : ['name_1','name_2',,'name_n'],width : [width_1,width_2,,width_n] ,align : ['left','center',,'right'] ,params : [param_1,,param_n],mapping:['name_1_map','name_2_map',,'name_n_map']}
Где
name — массив, содержащий надписи для колонок подтаблицы.
width — массив, содержащий значения ширины колонок. Этот массив должен иметь то же количество элементов, что и массив name.
align — массив, содержащий выравнивание колонок. Возможные значения: "left", "center" или "right". Если пропущено, то используется выравнивание "left".
params — массив, в который передаётся name из colModel, чтобы передавать в качестве дополнительного параметра в subGridUrl.
mapping — этот параметр используется только когда repeatitems в подтаблице установлено в false. Если указано, то используются имена из этого массива, чтобы отображать их в имена колонок подтаблицы. Если не указано, и repeatitems равно false, то используется свойство name.
По умолчанию:

Свойство: subgridtype
Тип: смешанный
Это свойство позволяет загружать подтаблицу как сервис. Если не указано, то используется свойство datatype из родительской таблицы. Смотрите пример ниже.
По умолчанию: null

Свойство: subGridWidth
Тип: integer
Определяет ширину добавленной колонки для подтаблицы, если подтаблица включены.
По умолчанию: 20

Свойство: subGridUrl
Тип: string
Это свойство имеет эффект, только если свойство subGrid установлено в true. Это свойство указывает на URL, из которого берутся данные для подтаблицы. JqGrid добавляет id строки к url в качестве параметра. Если требуется указать дополнительные параметры, то используйте свойство params из subGridModel.
По умолчанию: пустая строка

Свойство: ajaxSubgridOptions
Тип: object
Это свойство позволяет устанавливать глобальные настройки AJAX для подтаблицы. С помощью этого свойства можно переопределить все текущие настройки AJAX в подтаблице, включая событие complete.
По умолчанию: пустой объект

Для того чтобы настроить подтаблицу, вам нужно настроить subgrid в xmlReader или jsonReader. Настройки по умолчанию такие:

и свойство jsonReadoer:

Правила отображения такие же, как и в обычной таблице. Для получения большей информации обратитесь к статье «Манипуляция данными в jqGrid».

Для того чтобы использовать правильный subGridType как сервис, ниже приведён простой код, который показывает, как это может быть достигнуто:

где rowidprm — это массив, содержащий id строки и другие параметры, необходимые для subGridModel. И subGridJson — это метод, описанный ниже.

Использование переменной thegrid.

События

В этих событиях:

  • pID — уникальный id элемента div, где можно разместить содержимое, когда включена подтаблица.
  • id — id строки.
  • sPostData — данные, отправляемые в запросе получения данных для подтаблицы.

Событие: subGridBeforeExpand
Параметры: pID, id
Событие возникает перед развёртыванием подтаблицы. Если установлено, то это событие должно возвращать true или false. Если оно возвращает false, то строка подтаблицы не развёртывается, и подтаблица не открывается.

Событие: subGridRowExpanded
Параметры: pID, id
Это событие возникает, когда подтаблица включена, и пользователь кликает на иконку плюса в таблице. Может использоваться для вставки произвольных данных в подтаблицу.

Событие: subGridRowColapsed
Параметры: pID, id
Это событие возникает, когда пользователь кликает на иконку минуса. Событие должно вернуть true или false. Если возвращает false, то строка не сворачивается.

Событие: serializeSubGridData
Параметры: sPostData
Если установлено, то это событие может сериализовать данные, отправляемые в AJAX-запрос. Функция должна вернуть сериализованные данные. Это событие может использоваться, когда нужно передать на сервер JSON или XML.

Методы

Метод: expandSubGridRow
Параметры: rowid
Возвращает: объект jqGrid
Развёртывает подтаблицу с id=rowid.

Метод: collapseSubGridRow
Параметры: rowid
Возвращает: объект jqGrid
Сворачивает подтаблицу для строки с id = rowid.

Метод: toggleSubGridRow
Параметры: rowid
Возвращает: объект jqGrid
Сворачивает/разворачивает строку с id = rowid.

Метод: subGridJson
Параметры: json, rowid
Возвращает: false
Добавляет строку в подтаблицу. Параметр json — это JSON-объект, параметр rowid — id строки, после которой нужно добавить данные.

Метод: subGridXml
Параметры: xml, rowid
Возвращает: false
Добавляет строку в подтаблицу. Параметр xml — это объект XML, параметр rowid — id строки, после которой нужно добавить данные.

Пример

Продолжаем использовать пример из статьи «Моя первая таблица в jqGrid». Предположим, что нам нужно отображать строки для инвойсов в подтаблице. Javascript-код для этого выглядит так:

Следующим шагом будет создание subgrid.php. Этот пример для PHP и MySQL.

Мы предполагаем, что имя таблицы, хранящей данные для элемента инвойсов, invlines, и эта таблица содержит следующие колонки: invid, item_num, item, qty, unit.

Включение/выключение подтаблиц

Подтаблица может быть включена и выключена динамически (например, чтобы соответствовать данным в главной таблице).
Чтобы выключить подтаблицу:

Чтобы включить подтаблицу:

Где

  • grid_id — id таблицы
  • subgrid — имя колонки подтаблиц. Нужно оставить, как есть.

Чтобы это работало, свойство subGrid должно быть равно true в свойствах jqGrid, только потом можно включать и выключать подтаблицу кодом, приведённым выше.

Цикл статей «Документация jqGrid на русском».

Следующая статья — «Подтаблица как таблица в jqGrid».
Предыдущая статья — «Метод FormToGrid в jqGrid».


Поделиться:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован.

*