Общие сведения о серверном веб-элементе управления TreeView

Статья
10/22/2014

Обновлен: Ноябрь 2007

Серверный веб-элемент управления TreeView используется для отображения иерархических данных, таких как оглавление или каталог файлов, в древовидной структуре.

В этом разделе рассматриваются следующие темы:

Функциональные возможности
Общие сведения
Примеры кода
Ссылка на классы

Функциональные возможности

Элемент управления TreeView поддерживает следующие функциональные возможности:

Автоматическая привязка данных, благодаря которой узлы элемента управления привязываются к иерархическим данным, таким как XML-документ.
Поддержка структуры переходов по веб-узлу благодаря интеграции с элементом управления SiteMapDataSource.
Текст узла, который может отображаться или как обычный текст, или как гиперссылки.
Настройка внешнего вида с помощью тем, определенных пользователем изображений и стилей.
Программный доступ к объектной модели TreeView, которая позволяет создавать древовидные структуры, заполнять узлы, устанавливать свойства и пр., динамическим образом.
Заполнение клиентских узлов (на поддерживаемых обозревателях).
Возможность отображения флажков рядом с каждым узлом.

К началу

Базовые сведения

Элемент управления TreeView может отображать различные типы данных: статические данные, заданные декларативно в элементе управления, данные, привязанные к элементу управления, или данные, добавленные к элементу управления TreeView программным путем в результате действий пользователя.

Отображение статических данных

Статические данные в элементе управления TreeView можно отображать путем создания коллекции элементов TreeNode, которые являются дочерними элементами элемента управления TreeView. Эти дочерние элементы называются также дочерними узлами.

В следующем примере показана разметка элемента управления TreeView с тремя узлами, каждый из которых имеет два дочерних элемента.

<asp:TreeView ID="MyTreeView" Runat="server">
  <Nodes>
    <asp:TreeNode Value="Child1" Expanded="True" Text="1">
      <asp:TreeNode Value="Grandchild1" Text="A" />
      <asp:TreeNode Value="Grandchild2" Text="B" />
    </asp:TreeNode>
    <asp:TreeNode Value="Child2" Text="2" />
    <asp:TreeNode Value="Child3" Expanded="True" Text="3">
      <asp:TreeNode Value="Grandchild1" Text="A" />
    </asp:TreeNode>
  </Nodes>
</asp:TreeView>

Привязка данных к элементу управления TreeView

Элемент управления TreeView можно привязать к источнику данных, который поддерживает интерфейс IHierarchicalDataSource, например, элементы управления XmlDataSource и SiteMapDataSource. Кроме того, при привязке данных можно управлять тем, какие поля следует заполнять из источника данных. Дополнительные сведения см. в разделе Привязка данных к серверному веб-элементу управления TreeView.

Отображение данных программным путем при помощи TreeNodeCollection

Элемент управления TreeView можно заполнить данными программным путем, обратившись к свойству Nodes, которое возвращает класс TreeNodeCollection. Коллекция TreeNodeCollection является очень строго типизированной коллекцией объектов TreeNode. Так как объект TreeNode содержит свойство ChildNodes, которое может содержать объекты TreeNode, то класс TreeNodeCollection является иерархической структурой данных, представляющей все узлы элемента управления TreeView.

Пример прохождения коллекции узлов см. в описании свойства Nodes.

Типы узлов TreeView

Элемент управления TreeView состоит из одного или нескольких узлов. Узлом называется каждая запись в дереве, представленная объектом TreeNode. В следующей таблице описаны три разных типа узлов.

Тип узла	Описание
Корневой	Узел без родительского узла и с одним или несколькими дочерними узлами.
Родительский	Узел с родительским узлом и с одним или несколькими дочерними узлами.
Конечный	Узел без дочерних узлов.

Несмотря на то, что одно дерево имеет, как правило, только один корневой узел, элемент управления TreeView позволяет добавление нескольких элементов управления в структуру дерева. Подобные возможности полезны, когда есть необходимость в отображении списка без единого корневого узла, как, например, в списке категорий продуктов.

Каждый узел содержит свойства Text и Value. Значение свойства Text отображается в элементе управления TreeView, а свойство Value используется для хранения дополнительных данных об узле, например, данных, передаваемых событию обратной передачи, связанному с узлом.

При щелчке узла элемента управления TreeView он может либо инициировать событие выбора (через обратную отправку), либо перенаправить на другую страницу. Если свойство href не задано, то при щелчке узла инициируется событие SelectedNodeChanged, которое можно обработать для предоставления пользовательских функций. Каждый узел имеет свойство SelectAction, которое можно использовать для определения отдельных действий, происходящих при щелчке узла, например, разворачивание или сворачивание узла. Чтобы при щелчке узла вместо инициирования события выбора происходило перенаправление на страницу, присвойте свойству href узла значение, отличное от пустой строки («»).

Заполнение данных TreeNode по требованию

Иногда не очень удобно определять структуру данных статически, так как данные могут зависеть от информации, получаемой во время выполнения. Для динамического отображения данных элемент управления TreeView поддерживает динамическое заполнение узла. Если элемент управления TreeView настроен на заполнение по требованию, то элемент управления инициирует событие, когда пользователь разворачивает узел. Обработчик событий извлекает соответствующие данные и заполняет узел, который щелкнул пользователь. Чтобы заполнить объект TreeNode данными по требованию, присвойте свойству PopulateOnDemand узла значение true и создайте обработчик событий TreeNodePopulate для заполнения данными объекта TreeNode.

Заполнение узла в TreeView на стороне клиента

Любой обозреватель, имеющий свойство SupportsCallback с установленным значением true в файле конфигурации возможностей обозревателя, поддерживает заполнение узла на стороне клиента.

Заполнение узла на стороне клиента позволяет элементу управления TreeView заполнить узел с помощью вызова события TreeNodePopulate сервера из клиентского сценария, вместо запрашивания обмена данными с сервером. Дополнительные сведения о заполнении клиентского узла см. в описании свойства PopulateNodesFromClient.

Разрешение сценариев клиента

По умолчанию в обозревателях высокого уровня функции разворачивания и сворачивания узлов в элементе управления TreeView производятся на основе клиентских сценариев. Использование клиентских сценариев увеличивает эффективность отображения, так как элементу управления не надо обмениваться данными с сервером для отображения новой конфигурации.

Примечание.
Если клиентские сценарии отключены в обозревателе или обозреватель не поддерживает их, то элемент управления TreeView перейдет в режим работы на нижнем уровне и будет обмениваться данными с сервером при каждом щелчке узла пользователем.

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

Обратная передача в TreeView

По умолчанию элемент управления TreeView управляет функциями разворачивания и сворачивания на стороне клиента за исключением тех случаев, когда обозреватель не поддерживает клиентские сценарии или свойство EnableClientScript имеет значение false. Если свойство PopulateNodesFromClient имеет значение true и обозреватель поддерживает клиентские сценарии, то элемент управления TreeView извлекает данные с сервера, но не передает обратно всю страницу целиком.

Если элемент управления TreeView поставлен в режим выбора, то каждый раз при щелчке узла пользователем происходит обратная передача на сервер и инициируется событие SelectedNodeChanged.

Обычно управлять обратной передачей событий стоит, когда элемент управления TreeView находится в режиме выбора или узлы заполняются динамически. Это так, потому что либо свойство PopulateOnDemand, либо свойство PopulateNodesFromClient имеют значение true.

Использование элемента управления TreeView с элементами управления UpdatePanel

Элементы управления UpdatePanel используются для обновления выбранных областей страницы вместо обновления всей страницы с помощью обратной передачи. Элемент управления TreeView можно использовать внутри элемента управления UpdatePanel со следующими ограничениями:

Обратные вызовы элемента управления TreeView должны быть связаны с асинхронными обратными передачами, иначе проверка события обратного вызова завершится неудачей. При присваивании свойству PopulateOnDemand элемента управления TreeNode значения true обратные вызовы разрешены. Чтобы удостовериться, что обратные вызовы элемента управления TreeView работают с элементом управления UpdatePanel можно использовать один из следующих подходов:
- Если элемент управления TreeView не внутри элемента управления UpdatePanel, то следует отключить обратные вызовы элементов управления TreeNode, которые не являются частью асинхронной обратной передачи. Для этого надо присвоить свойству PopulateOnDemand значение false.
- Обновите программным путем все элементы управления, которые регистрируют обратные вызовы во время асинхронной обратной передачи. Например, можно поместить элемент управления TreeView внутри элемента управления UpdatePanel. Элемент управления TreeView не обязательно должен быть внутри элемента управления UpdatePanel, из которого происходят асинхронные обратные передачи, так как элемент управления UpdatePanel, содержащий элемент управления TreeView, обновляется.
Применять стили следует путем ссылки на класс таблиц каскадных стилей (Cascading Style Sheet – CSS). Например, вместо того, чтобы установить атрибут свойства NodeStyle в форме «свойство.подчиненное_свойство», задавайте стиль с помощью атрибута в форме «CssClass=имя_класса». Аналогично, при использовании шаблона NodeStyle для задания стиля, используйте атрибут CssClass шаблона.
Свойство EnableClientScript должно иметь значение true (значение по умолчанию). Кроме того, если обратные вызовы включены для элемента управления TreeView, то нельзя менять свойство EnableClientScript между асинхронными обратными передачами.

Дополнительные сведения о работе с элементами управления UpdatePanel см. в разделах Общие сведения об элементе управления UpdatePanel и Общие сведения о частичной отрисовке страниц.

Отрисовка TreeNode

Каждый объект TreeNode содержит четыре элемента пользовательского интерфейса, которые показаны на следующем изображении и описаны в нижеприведенной таблице.

Элементы пользовательского интерфейса TreeNode

Элементы пользовательского интерфейса TreeNode

Элемент	Описание
Развернуть/свернуть изображение	Необязательное изображение, которое показывает, можно ли развернуть узел, чтобы показать дочерние узлы. По умолчанию, если узел можно развернуть, то это знак «плюс» [«+»], а если узел можно свернуть, то это знак «минус» [«-»].
Флажок	Флажки можно при желании включить, что позволяет пользователям выбирать отдельные узлы.
Изображение узла	Изображение узла можно задать, чтобы оно отображалось рядом с текстом узла.
Текст узла	Текст узла — это текст, отображаемый объектом TreeNode. Текст узла может отображаться в виде ссылки в режиме навигации, а в режиме выбора — в виде кнопки.

Помимо собственных свойств элемент управления TreeView поддерживает свойства элемента управления TreeNodeStyle для всех типов узлов. Эти свойства стиля замещают свойство NodeStyle, применяющееся для всех типов узлов.

Класс TreeView содержит свойство NodeIndent, которое определяет уровень отступа для всех узлов. Отступ для узлов используется с той стороны, с которой отображается элемент управления TreeView. Это левая сторона, для языков, отображение которых происходит слева направо, и правая сторона — для языков, отображение которых происходит справа налево.

У узла также может быть другой стиль, если он выбран или если указатель мыши находится над узлом. Если значение свойства Selected узла равно значению true, применяется свойство SelectedNodeStyle, замещающее все невыбранные свойства стиля выбранного узла. Если над узлом проходит указатель мыши, то применяется свойство HoverNodeStyle. На следующем рисунке и в следующей таблице описаны свойства TreeNodeStyle.

Свойства TreeNodeStyle

График стиля узла TreeView

Свойство узла	Описание
NodeSpacing	Задает вертикальный отступ между всем текущим узлом и его смежными узлами, расположенными выше и ниже.
VerticalPadding	Задает отступ, который отображается сверху и снизу текста TreeNode.
HorizontalPadding	Задает отступ, который отображается слева и справа от текстаTreeNode.
ChildNodesPadding	Задает отступ сверху и снизу от дочерних узлов элемента управления TreeNode.
ImageUrl	Задает путь к изображению, отображаемому рядом с элементом управления TreeNode.

Дополнительные сведения см. в разделе Настройка внешнего вида и поведения серверного веб-элемента управления TreeView.

Отображение флажка рядом с узлом TreeView

Другая пользовательская функция отображения элемента управления TreeView — это возможность отображения флажков между текстом узла и изображением узла при помощи свойства ShowCheckBoxes. Отображение флажков позволяет пользователям выбирать несколько узлов одновременно, что особенно удобно в интерфейсах наподобие дерева новостей, где пользователи могут выбирать и подписываться на множество новостных групп одновременно. Дополнительные сведения об использовании флажков см. в разделе Выбор, переход и флажки в серверном веб-элементе управления TreeView.

Использование свойства ExpandDepth

По умолчанию элемент управления TreeView показывает все узлы дерева в развернутом виде. Элемент управления TreeView можно настроить так, чтобы он изначально отображал древовидную структуру на любую глубину. Чтобы это сделать, надо присвоить свойству ExpandDepth значение, равное количеству уровней узлов в числовом виде, которое вы хотите показывать. Например, если свойство ExpandDepth будет иметь значение «2», то будут отображаться два уровня узлов или два дочерних узла при начальном отображении веб-узла у клиента.