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 (если они там есть);
  • применяются настройки, произведенные пользователем (если они есть).

Таким образом, результирующая ширина равна последней примененной ширине.