Деревьевидная таблица treeTable реализует большую часть функциональностей layui данных таблиц и при этом имеет схожее использование с обычной данными таблицей, поддерживает ленивую загрузку, связывание чекбоксов (полуотмеченное состояние), возможность изменения ширины столбцов путём перетаскивания, а также фиксированную вершину таблицы.
Журнал обновлений
-
27 апреля 2020 года
- Устранение ошибки в методе refresh, когда данные не преобразованы в формат pid
- Устранение ошибки при редактировании ячеек
- В режиме ленивой загрузки, если haveChild равно true и после запроса нет данных, автоматически обновляется значок
- По умолчанию параметр useAdmin установлен как false (по умолчанию не используется admin.ajax)
- В параметрах колонок добавлен thAlign для конфигурации выравнивания заголовков
-
18 апреля 2020 года (версия 3.0)
- Поддержка перетаскивания для изменения ширины столбцов, панели инструментов toolbar
- Поддержка скрытия/показа колонок, печати, экспорта
- Поддержка url, method, where, headers и других параметров для загрузки через URL, совместимо со старым способом reqData
- Использование двумерного массива для cols, что позволяет настроить сложные заголовки так же, как это делается в layui таблицах
- Полуотмеченное состояние чекбокса больше не зависит от form.render
- Устранение проблемы с расчётом высоты ful-xxx, которая отличалась от layui таблиц
- Устранение проблемы с min-width параметром, который ранее не работал
- Устранение проблемы с переполнением колонок с иконками, где не отображались многоточия
- Для данных в формате children id свойство больше не используется
- Устранение проблемы получения выбранного значения при одиночном выборе
-
27 декабря 2019 года
- Добавление возможности скрытия содержимого ячеек при превышении размера, с возможностью его просмотра при наведении курсора (27 декабря 2019 года)
- Устранение ошибки при обновлении пустой таблицы, когда сообщение "пустых данных" не удалялось (21 декабря 2019 года)
- Оптимизация фиксированной вершины и фиксированной ширины (21 декабря 2019 года)
- Возможность получения выбранных данных, включая те, которые не являются полуотмеченными (21 декабря 2019 года)
-
18 ноября 2019 года (версия 2.0)
- Переработка treeTable, теперь она не основана на модуле таблицы table
- Поддержка ленивой загрузки (асинхронной загрузки) и рендера данных
- Поддержка данных в форматах pid и children
- Нет необходимости указывать самый верхний pid, он автоматически определяется
- Поддержка связывания чекбоксов, полуотмеченного состояния
- Поддержка запоминания состояния сворачивания/разворачивания
- Поддержка обновления только части данных узла
- Поддержка пользовательских иконок дерева
- Поддержка установки отметок узлов, получение отмеченных узлов
- Поддержка событий одиночного клика, двойного клика, одиночного клика ячейки, двойного клика ячейки
- Поддержка редактирования ячеек, включая проверку формата
- Поддержка фиксированной вершины, поддержка записи ful-xxx
- Поддержка пользовательских сложных заголовков
- Оптимизация функции поиска, предоставляющая лучший опыт поиска
-
22 июля 2018 года (версия 1.0)
- Реализация деревьевидной структуры на основе шаблона таблицы data
- Реализация функций сворачивания/разворачивания
Мелкие проблемы будут решаться по мере возможности, крупные обновления будут происходить реже. На данный момент единственным недостающим функционалом является поддержка фиксированных колонок. Страницы и сортировка менее распространены в деревьях, поэтому ленивая загрузка может заменять страницы.
Импорт модулей
Последняя версия требует только одного файла treeTable.js, CSS не требуется:
layui.config({
base: '/' // Конфигурация директории модулей
}).use(['treeTable'], function () {
var treeTable = layui.treeTable;
});
Если возникают трудности с импортом, рекомендуется обратиться к официальной документации layui.
Примеры использования
Комментарии ( 0 )