Цикл статей «Документация jqGrid на русском».
Следующая статья — «Сводная таблица (Pivot table) в jqGrid».
Предыдущая статья — «Группировка данных в jqGrid».
Поддерживается два способа группировки заголовков столбцов: с включённым свойством colSpan, с выключенным свойством colSpan.
Если colSpan выключен (по умолчанию), то заголовки столбцов, которые не участвуют в группировке, имеют дополнительную ячейку над собой.
Если colSpan включён, то дополнительных ячеек не появляется.
Ниже будут примеры обоих случаев.
Ограничения
- Колонки с возможностью сортировки не совместимы с группировкой. Поэтому нужно использовать только одну из этих возможностей, но не обе сразу.
- Column Chooser несовместим с группировкой заголовков столбцов.
Использование группировки заголовков столбцов
Группировка заголовков столбцов должна использоваться на уже созданной таблице. Для включения группировки заголовков столбцов используется метод setGroupHeaders.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
... jQuery("#grid").jqGrid({ ... colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'], colModel: [ {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date', formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'}, {name: 'name', index: 'name', width: 70 }, {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'}, {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'}, {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'}, {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox', edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}}, {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select', edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}}, {name: 'note', index: 'note', width: 70, sortable: false} ], rowNum: 10, rowList: [5, 10, 20], ... }); jQuery("#grid").jqGrid('setGroupHeaders', { useColSpanStyle: false, groupHeaders:[ {startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'}, {startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'} ] }); ... |
Свойства
Метод setGroupHeaders задаёт группировку заголовков столбцов таблицы. После создания группировки свойства группировки сохраняются в свойстве таблицы groupHeader. Его можно получить с помощью метода getGridParam.
Объект, передающийся в качестве параметра в setGroupHeader, имеет следующие свойства:
Свойство: useColSpanStyle
Тип: boolean
Определяет, должен ли заголовок столбца, не участвующий в группировке, иметь ячейку над собой. Если false, то добавляется ячейка, если true, то ячейка не добавляется.
По умолчанию: false
Свойство: groupHeaders
Тип: array
Множество объектов, описывающих правила группировки и надписи в заголовках группировки. Ниже приведён список свойств элементов этого массива.
По умолчанию: пусто
Свойства элементов groupHeaders:
Свойство: startColumnName
Тип: string
Значение name из colModel, с которого начинается группировка включительно.
Свойство: numberOfColumns
Тип: integer
Количество колонок, которые включаются в группировку. Группировка начинается от startColumnName. Если колонка скрыта, то она пропускается, и результирующая группировка не содержит её, но этот метод учитывает эту колонку.
Свойство: titleText
Тип: string
Надпись для группы. Может содержать HTML-теги.
Уничтожение группировки заголовков колонок
Чтобы убрать группировку заголовков колонок, нужно вызвать метод destroyGroupHeader. Этот метод возвращает заголовки столбцов в первоначальный вид.
Пример вызова метода:
1 2 3 |
... jQuery("#grid").jqGrid('destroyGroupHeader'); ... |
Метод имеет один необязательный параметр логического типа. По умолчанию значение этого параметра равно true. Если параметр установлен в false так:
1 2 3 |
... jQuery("#grid").jqGrid('destroyGroupHeader', false); ... |
то он восстанавливает первоначальные заголовки таблицы, но не убирает свойства группировки, на основе которых он создан. Свойства последней использованной группировки могут быть использованы позже.
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Сводная таблица (Pivot table) в jqGrid».
Предыдущая статья — «Группировка данных в jqGrid».