Древовидная таблица
Древовидная таблица позволяет отображать связанные записи в иерархии наглядно в одной странице.
Древовидная таблица или древовидное меню. Что использовать?
| Критерий / Компонент | Древовидная таблица | Древовидное меню |
|---|---|---|
| Нужно видеть одновременно всю иерархию, чтобы с ней работать, анализировать, сравнивать (например, потомков сразу нескольких соседних записей) | 🟢 | 🔴 |
| Нужна связь “родительская запись - дочерняя запись" | 🟢 | 🔴 |
| Нужно создать удобную навигацию, разбить записи по группам, уметь фильтроваться по ним | 🔴 | 🟢 |
| Атрибутный состав дочерних записей различается | 🔴 | 🟢 |
Критерии использования древовидной таблицы
- Необходимо наглядно отобразить иерархичную структуру объектов;
- Связанные записи являются одинаковыми сущностями, например, все связанные записи являются задачами;
- Следовательно, все записи имеют одинаковый атрибутный состав (и дочерние записи, и родительские);
- У таблицы может быть максимум 10 уровней. Кейсы с большим количеством уровней обсуждаются индивидуально с сообществом;
- Древовидную таблицу нельзя использовать вместе с раскрывающейся строкой;
- Древовидная таблица не должна содержать строки, выделенные цветом.
Правила использования древовидной таблицы
- У записей в таблице должна быть сквозная нумерация, которая помогает ориентироваться в структуре. Она располагается в первом столбце, при необходимости столбец можно скрыть.
- Иконка, которая раскрывает таблицу располагается после чекбокса и номера объекта, в столбце с наименованием объекта.
Важно! Исключением может стать признак, который предшествуют наименованию и, соответственно, иконке, которая раскрывает подуровни.
- При выборе записи чекбоксом, выбираются все дочерние записи, а у родительской записи чекбокс переходит в состояние:
3.1.Intermidiate, если у выбраной записи есть сосед;
3.2.Checked, если выбранная запись - единственный ребенок.
Пример: у выбранной записи есть сосед, поэтому родительский чекбокс перешел в состояниеintermidiate.
- Ширина столбца закладывается исходя из уровня вложенности. Чем больше уровней, тем шире столбец. Цель - сохранить читаемость в таблице.
🔴 Плохо
🟢 Хорошо
- Сортировка:
5.1. В древовидной таблице может не быть возможности сортировки, когда все записи уже отсортированы по ключевому атрибуту, например, по номеру в структуре, как в кейсе Q.PM:
5.2. Если в таблице включена сортировка, то записи сортируются внутри каждого уровня, например:
Было отсортировано по приоритету по умолчанию:
Стало отсортировано по наименованию внутри каждого уровня:
-
Фильтрация осуществляется следующим образом. Если отфильтрованная запись находится на n-уровне в иерархии, то в отфильтрованной таблице выводится вся раскрытая иерархия, которая включает эту запись.
-
Пагинация. Если на странице выводится n-записей, то n - это количество родительских записей. То есть, если последняя n-родительская запись содержит m потомков, то все они раскрываются на этой же странице. Дочерние записи загружаются по мере их раскрытия.
Добавление в древовидную таблицу
В сайдбаре/форме добавления появляется необязательное поле “Родительский объект”. Если оно не заполнено, то запись добавляется как корневая (на самый верхний уровень).
Клик на поле поднимает Searchbox с древовидной структурой, где можно выбрать родительский объект.
Удаление записи
Пока у записи есть дочерние, ее нельзя удалить. Кнопка удаления должна быть в состоянии Disabled, а при наведении появляется тултип с текстом "У записи есть дочерние, отвяжите их, чтобы удалить запись".