jquery.colresize - плагин jQuery, предназначенный для добавления функциональности по настройке ширины колонок html-таблицам. Используется в WebObjectListView и AjaxGroupEdit. Поддерживает настройку ширины колонок мышью, связывание нескольких таблиц для синхронной настройки.
Использование
Прежде всего на странице должны быть подключены файлы jquery.colresize.css и jquery.colresize.js. Для того, чтобы применить к таблице плагин, нужно вызвать для соответствующего ей объекта функцию colresize. Если нужно связать таблицы, то коллекция jQuery должна содержать все эти таблицы.
В качестве параметра к функции colresize можно передать ассоциативный массив параметров. Можно задать следующие параметры:
| Ключ | Описание |
|---|---|
customizable |
Boolean. Определяет, разрешено ли пользователю изменять ширину колонок с помощью мыши |
minWidth |
Number. Минимальная ширина колонки, которая может быть установлена |
defaultWidth |
Number. Ширина колонки по-умолчанию. Используется, если ширина не задана и useDefaultWidth == true |
widths |
Array. Массив значений ширины колонок в порядке их следования. Данные значения будут использованы при инициализации colresize |
onResize(eventArgs) |
Function. Обработчик события изменения ширины колонок. Пока в eventArgs есть только currentTarget, указывающая на первую таблицу из группы связанных таблиц. |
Пример использования
jQuery('.resizable-table').colresize({
customizable: true,
minWidth: 50,
defaultWidth: 100,
widths: [110, 70, 170, 80],
onResize: function(e) {
alert('resized: ' + jQuery(e.currentTarget).id);
}
});
Работа с WebObjectListView и AjaxGroupEdit
Применение настроек ширины колонок производится в следующем порядке:
- берется ширина по-умолчанию в зависимости от типа данных;
- применяются настройки ширины из
ViewColumnProvider(если они там есть); - применяются настройки, произведенные пользователем (если они есть).
Таким образом, результирующая ширина равна последней примененной ширине.