Темы :
Содержание
1(1
2)
2(1
2
3
4)
3(1
2
3
4
5)
4(1
2
3)
5(1
2
3
4)
6(1
2)
П(1
2
3
4
5
6)
25 апреля 2016. Категория: Магия CSS стилей
Древовидный вид HTML списков является лучшим вариантом визуального обзора и изучения их иерархической структуры. Рассмотрим несколько преобразований обычного HTML списка в более наглядное древовидное состояние при помощи магии CSS стилей.
Представление дерева в виде списка списков¶
Воплощать дерево в виде списка списков мы начнём со структуры данных Python “список” и напишем для неё функции, определённые выше. Также мы создадим интерфейс – набор операций над списком, немного отличный от тех АТД, которые уже были нами реализованы. Это будет интересно и предоставит в наше распоряжение простую рекурсивную структуру данных, которую потом можно будет изучать и тестировать. В дереве, представленном как список списков, на первой позиции мы будем хранить значение корневого узла. Второй элемент сам по себе будет списком и представит левое поддерево. Третий элемент станет правым поддеревом. Чтобы проиллюстрировать такую технику хранения, рассмотрим пример. Рисунок 1 демонстрирует простое дерево и связанную с ним списковую реализацию.
Рисунок 1: Маленькое дерево
Использование индексации для доступа к поддеревьям. (tree_list1)
Давайте формализуем это определение с помощью некоторых функций, которые сделают проще использование списков в качестве деревьев. Обратите внимание, мы не собираемся определять новый класс для двоичного дерева. Функции, которые будут написаны, всего лишь помогут манипулировать стандарным списком, с которым мы работаем, как с деревом.
Функция просто создаёт список из корневого узла и двух пустых подсписков в качестве его потомков. Чтобы добавить к корню левое поддерево, нам нужно вставить на вторую позицию новый список. Тут следует быть внимательными. Если на второй позиции уже что-то имеется, то этот факт нужно отследить и сдвинуть элемент вниз по дереву, как левого потомка добавляемого списка.
Обратите внимание, что прежде, чем вставлять что-либо, мы получаем (возможно пустой) список, связанный с текущим левым потомком. Когда мы вставляем новое левое поддерево, то старое делаем его левым потомком. Благодаря этому мы можем встраивать новый узел на любую позицию в дереве. Код для аналогичен и показан в листинге 2.
Чтобы закончить с набором для создания дерева (см. листинг 3), давайте напишем несколько функций доступа для установки и получения значений в корне и правого и левого поддеревьев.
ActiveCode 2 использует только что написанные функции для дерева. Попробуйте поработать с ними самостоятельно. Одно из упражнений попросит вас нарисовать структуру дерева, которое станет результатом такого набора вызовов:
Сессия Python, демонстрирующая основные функции для работы с деревьями. (bin_tree)
Q-65: Дан следующий код:
Какой из ответов будет правильным представлением дерева?
Напишите функцию , которая использует функции для списка списков и возвращает дерево, выглядящее примерно так:
Пример горизонтального древовидного списка
Приведу небольшой примерчик как одним запросом и одним циклом получить иерархию разделов в виде:
На мой взгляд, с такой структурой работать в большинстве случаев удобнее, чем со списком, отсортированном по LEFT_MARGIN
Построение иерархии происходит через массив ссылок $sectionLinc
Пример вертикального древовидного списка
К CSS из предыдущего примера необходимо дописать следующие стили:
Скрипт, реализующий функцию раскрывающегося списка
Помимо HTML и CSS, данный способ оформления древовидных списков требует использование JS:
1 Дерево-список — наглядное представление результатов поиска документов
Список документов, полученный по запросу в Карточке поиска, Правовом навигаторе, с помощью значков
Рис. 1 Дерево-список документов
Такое представление наглядно информирует, документы каких типов и в каком количестве удовлетворяют нашему запросу, позволяет легко ориентироваться в полученном списке и выбирать искомые документы.
Если в левой части дерева-списка установить курсор на названии какого-либо информационного банка, то в правой части появится список документов данного банка, соответствующих запросу. В дереве-списке можно уточнить запрос, нажав кнопку
над списком (рис. 5.1). Если нажать на стрелку
, откроется список для выбора области поиска:
• текущий ИБ;
• текущий раздел;
• все разделы.
При этом уточнение списка можно проводить по любым полям соответствующей Карточки поиска.
2 Зададим в строке поиска: больничный расчет. В группе понятий «Больничный лист» выберем выделенное ключевое понятие «Расчет больничного», отметив его галочкой (рис. 5.2).
3 Нажмем кнопку
. Получим искомые документы, представленные в виде дерева-списка.
4 Чтобы найти разъяснения по нашему вопросу в материалах прессы, выберем слева в дереве-списке информационный банк «Бухгалтерская пресса и книги». Справа будет представлен список документов этого информационного банка (рис. 5.3).
5 Уточним полученный список по полю «Текст документа». Для этого нажмем стрелку
6 В поле «Текст документа» введем: совместитель и нажмем кнопку
Рис. 2 Запрос в Правовом навигаторе