Цикл статей «Документация jqGrid на русском».
Следующая статья — «Группировка данных в jqGrid».
Предыдущая статья — «TreeGrid Adjacency Model в jqGrid».
Можно сделать некоторые колонки заблокированными от прокрутки по горизонтали. Это полезно, когда вы хотите сделать некоторые поля постоянно видимыми для очень широкой таблицы.
Настройка
Сначала нужно настроить колонки, которые должны быть непрокручиваемыми. Это делается с помощью свойства frozen:true в colModel. Пример настройки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.. jQuery("#grid").jqGrid({ ... colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'], colModel: [ {name: 'name', index: 'name', width: 70, frozen:true }, {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date', formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y', frozen:true}, {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], ... }); |
После этого нужно вызвать метод, включающий непрокручиваемые колонки:
|
1 |
jQuery("#grid").jqGrid('setFrozenColumns'); |
Колонки со свойством frozen должны идти одна за другой. Если в последовательности колонок одно свойство frozen пропущено, то будет использоваться последняя позиция, удовлетворяющая непрерывности.
Код ниже будет блокировать от прокрутки только одну колонку, несмотря на то что третья колонка тоже установлена в frozen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.. jQuery("#grid").jqGrid({ ... colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'], colModel: [ {name: 'name', index: 'name', width: 70, frozen:true }, {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, frozen:true}, {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('setFrozenColumns'); |
Уничтожение
Можно уничтожить frozenColumns в таблице с помощью метода destroyFrozenColumns. Этот метод восстанавливает настройку таблицы, которая была до вызова setupFrozenColums.
|
1 |
jQuery("#grid").jqGrid('destroyFrozenColumns'); |
Динамическая настройка
Можно менять непрокручиваемые колонки динамически. В этом случае нужно вызвать сначала destroyFrozenColumns, затем установить новые свойства frozen и снова вызвать setFrozenColumns.
Пример:
|
1 2 3 4 5 6 7 |
jQuery("#mybutton").click(function(){ jQuery("#grid") .jqGrid('destroyFrozenColumns'); .jqGrid('setColProp','invdate', {frozen:true}); .jqGrid('setFrozenColumns'); .trigger('reloadGrid', [{current:true}]); }); |
На текущий момент нужно вызвать trigger('reloadGrid') , чтобы обновить непрокручиваемые колонки. Позже это будет изменено на более лёгкий способ.
Ограничения
Следующие ограничения указывают на случаи, когда непрокручиваемые колонки нельзя использовать:
- Когда включёно TreeGrid (иерархические данные).
- Когда включено SubGrid (подтаблицы).
- Когда включён режим редактирования в ячейке.
- Когда используется режим редактирования строки — непрокручиваемые колонки не могут редактироваться.
- Когда свойство scroll таблицы установлено в true или 1.
- Когда свойство sortable равно true или равно функции.
- Когда включена группировка данных.
- Когда включена строка подвала (footerrow).
Цикл статей «Документация jqGrid на русском».
Следующая статья — «Группировка данных в jqGrid».
Предыдущая статья — «TreeGrid Adjacency Model в jqGrid».