Стандарты проектирования
Древовидная таблица


Древовидная таблица

Древовидная таблица позволяет отображать связанные записи в иерархии наглядно в одной странице.

Древовидная таблица или древовидное меню. Что использовать?

Критерий / КомпонентДревовидная таблицаДревовидное меню
Нужно видеть одновременно всю иерархию, чтобы с ней работать, анализировать, сравнивать (например, потомков сразу нескольких соседних записей)🟢🔴
Нужна связь “родительская запись - дочерняя запись"🟢🔴
Нужно создать удобную навигацию, разбить записи по группам, уметь фильтроваться по ним🔴🟢
Атрибутный состав дочерних записей различается🔴🟢

Критерии использования древовидной таблицы

  1. Необходимо наглядно отобразить иерархичную структуру объектов;
  2. Связанные записи являются одинаковыми сущностями, например, все связанные записи являются задачами;
  3. Следовательно, все записи имеют одинаковый атрибутный состав (и дочерние записи, и родительские);
  4. У таблицы может быть максимум 10 уровней. Кейсы с большим количеством уровней обсуждаются индивидуально с сообществом;
  5. Древовидную таблицу нельзя использовать вместе с раскрывающейся строкой;
  6. Древовидная таблица не должна содержать строки, выделенные цветом.

Правила использования древовидной таблицы

  1. У записей в таблице должна быть сквозная нумерация, которая помогает ориентироваться в структуре. Она располагается в первом столбце, при необходимости столбец можно скрыть.
  2. Иконка, которая раскрывает таблицу располагается после чекбокса и номера объекта, в столбце с наименованием объекта.

Важно! Исключением может стать признак, который предшествуют наименованию и, соответственно, иконке, которая раскрывает подуровни.

  1. При выборе записи чекбоксом, выбираются все дочерние записи, а у родительской записи чекбокс переходит в состояние:
    3.1. Intermidiate, если у выбраной записи есть сосед;
    3.2. Checked, если выбранная запись - единственный ребенок.
    Пример: у выбранной записи есть сосед, поэтому родительский чекбокс перешел в состояние intermidiate.
  2. Ширина столбца закладывается исходя из уровня вложенности. Чем больше уровней, тем шире столбец. Цель - сохранить читаемость в таблице.

🔴 Плохо

🟢 Хорошо

  1. Сортировка:
    5.1. В древовидной таблице может не быть возможности сортировки, когда все записи уже отсортированы по ключевому атрибуту, например, по номеру в структуре, как в кейсе Q.PM:

5.2. Если в таблице включена сортировка, то записи сортируются внутри каждого уровня, например: Было отсортировано по приоритету по умолчанию:

Стало отсортировано по наименованию внутри каждого уровня:

  1. Фильтрация осуществляется следующим образом. Если отфильтрованная запись находится на n-уровне в иерархии, то в отфильтрованной таблице выводится вся раскрытая иерархия, которая включает эту запись.

  2. Пагинация. Если на странице выводится n-записей, то n - это количество родительских записей. То есть, если последняя n-родительская запись содержит m потомков, то все они раскрываются на этой же странице. Дочерние записи загружаются по мере их раскрытия.

Добавление в древовидную таблицу

В сайдбаре/форме добавления появляется необязательное поле “Родительский объект”. Если оно не заполнено, то запись добавляется как корневая (на самый верхний уровень).

Клик на поле поднимает Searchbox с древовидной структурой, где можно выбрать родительский объект.

Удаление записи

Пока у записи есть дочерние, ее нельзя удалить. Кнопка удаления должна быть в состоянии Disabled, а при наведении появляется тултип с текстом "У записи есть дочерние, отвяжите их, чтобы удалить запись".

Прогресс длительной операции в таблицеЧек-лист проверки интерфейса