Esta documentação foi arquivada e não está sendo atualizada.

Visão geral do Controle do Servidor Web TreeView

The TreeView Web server control is used to display hierarchical data, such as a table of contents or file directory, in a tree structure.Ele oferece suporte os seguintes recursos:

  • Ligação de dados automática, o que permite que os nós do controle sejam ligados aos dados hierárquicos, como um documento XML.

  • Site navigation support through integration with the SiteMapDataSource control.

  • Texto de nó que pode ser exibido tanto como texto selecionável quanto como hyperlinks.

  • Aparência personalizável através de temas, imagens definidas pelo usuário, e estilos.

  • Programmatic access to the TreeView object model, which allows you to dynamically create trees, populate nodes, set properties, and so on.

  • Preenchimento de nós através de callbacks do lado do cliente para o servidor (em navegadores com suporte).

  • A capacidade de exibir uma caixa de seleção ao lado de cada nó.

The TreeView control is made up of one or more nodes.Each entry in the tree is called a node and is represented by a TreeNode object.The following table describes the three different node types.

Tipo de nó

Descrição

Raiz

Um nó que possui nenhum nó pai e um ou mais nós filho.

Pai

Um nó que possui um nó pai e um ou mais nós filho.

Folha

Um nó que não possui nenhum nó filho.

Although a typical tree has only one root node, the TreeView control allows you to add multiple root nodes to your tree structure.Isso é útil quando você deseja exibir listagens de itens sem exibir um único nó raiz principal, como em uma lista de categorias de produto.

Cada nó tem uma propriedade Text e uma propriedade Value.O valor da propriedade Text é exibida no controle TreeView, enquanto a propriedade Value é usada para armazenar quaisquer dados adicionais sobre o nó, como dados passados para o evento de postagem que está associado com o nó.

When a node of the TreeView control is clicked, it can either raise a selection event (via postback) or navigate to another page.Quando a propriedade NavigateUrl for Não Definido, clicando em um nó irá aumentar um evento SelectedNodeChanged que pode ser tratado para fornecer personalizado funcionalidade.Each node also has a SelectAction property that can be used to determine specific actions that happen when the node is clicked, such as expand or collapse the node.Instead of raising a selection event to navigate to a page when a node is clicked, set the NavigateUrl property of the node to a value other than an empty string ("").

The Controlar TreeView can exibir several different Tipos of dados: dados estáticos que é especificado de modo declarativo no Controlar, dados que estão ligado ao Controlar ou dados que são adicionados ao Controlar TreeView programaticamente, em resposta às ações usuário.

Exibindo Dados Estáticos

You can display static data in the TreeView control by creating a collection of TreeNode elements that are children of the TreeView control.These child elements are also known as child nodes.

The following example shows the markup for a TreeView control that contains three nodes, two of which have child nodes.

<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>

Ligando Dados ao Controle TreeView

You can bind a TreeView control to a data source that supports the IHierarchicalDataSource interface, such as the XmlDataSource and SiteMapDataSource controls.Additionally, when binding data, you have complete control over which fields are populated from the data source.Para obter mais informações, consulte Ligando Dados ao Controle de Servidor Web TreeView.

Exibindo Dados Programaticamemte Usando TreeNodeCollection

Você pode preencher um TreeView Controlar com dados programaticamente acessando a propriedade Nodes , que retorna uma classe TreeNodeCollection. TreeNodeCollection é uma coleção de objetos TreeNode fortemente tipado.Because a TreeNode object contains a property called ChildNodes that can contain TreeNode objects, the TreeNodeCollection class is a hierarchal data structure that represents all of the nodes of the TreeView control.

For an example of how to traverse the Nodes collection, see Nodes.

Pode não ser prático definir a estrutura de dados estaticamente, pois os dados podem dependem de informações que são obtidas em tempo de execução.To display data dynamically, the TreeView control supports dynamic node population.When the TreeView control is configured to populate on demand, the control raises an event when a user expands the node.O manipulador de eventos recupera os dados apropriados e depois preenche o nó que o usuário clicou.To populate the TreeNode object with data on demand, set the PopulateOnDemand property of a node to true, and create a TreeNodePopulate event handler to populate the TreeNode object with data.

Any browser that has the SupportsCallback property set to true in the browser capabilities configuration file supports client-side node population.

Client-side node population enables the TreeView control to populate a node by calling the server's TreeNodePopulate event from client script instead of requiring a full postback to the server.For more information about client-side node population, see PopulateNodesFromClient.

By default, on up-level browsers, the expand-collapse functionality of a node on the TreeView control is performed using client script.O uso de script de cliente aumenta a eficiência do processamento porque o controle não tem que fazer postback para o servidor para processar a nova configuração.

ObservaçãoObservação:

If client script is disabled in the browser or the browser does not support client script, then the TreeView control will revert to down-level mode and post back to the server each time a user clicks the node.

By default, the TreeView control handles expand-collapse functionality on the client unless the browser does not support client script or the EnableClientScript property is set to false.If the PopulateNodesFromClient property is set to true and the browser supports client script, then the TreeView control retrieves the data from the server without posting the entire page back.

When the TreeView control is in selection mode, each time a user clicks a node, a postback to the server occurs and the SelectedNodeChanged event is raised.

Typically, you should handle postback events when the TreeView control is in selection mode or the nodes are being dynamically populated.This is because either the PopulateOnDemand or PopulateNodesFromClient property is set to true.

Each TreeNode object contains four UI elements, which are shown in the following image and described in the table below.

Elementos de Interface de Usuário do TreeNode

Elementos de Interface de Usuário do TreeNode

Item

Descrição

Expandir/recolher imagem

Uma imagem opcional que indica se o nó pode ser expandido para mostrar os nós filho.Por padrão, é um sinal de adição [+] se o nó pode ser expandido, ou um sinal de subtração [-] se o nó pode ser recolhido.

Caixa de seleção

Caixas de seleção podem ser opcionalmente ativadas, o que permite aos usuários selecionarem um nó específico.

Imagem do nó

Você pode especificar uma imagem do nó a ser exibida ao lado do texto do nó.

Texto do nó

Node text is the actual text that displays on the TreeNode object.Node text can behave like a hyperlink in navigation mode, or like a button in selection mode.

In addition to its own properties, the TreeView control supports properties of the TreeNodeStyle control for each node type.These style properties override the NodeStyle property, which applies to all node types.

The TreeView also has a NodeIndent property that specifies the indentation level for all nodes.Nodes are indented from the side on which the TreeView control is rendered.É o lado esquerdo para localidades que processam da esquerda para direita, e é o lado direito para localidades que processam da direita para esquerda.

Um nó também pode ter um estilo diferente aplicado quando ele estiver selecionada ou quando o mouse focaliza o nó.When the Selected property of a node is set to true, the SelectedNodeStyle property is applied, which overrides any unselected style properties for the selected node.When the mouse hovers over a node, the HoverNodeStyle property is applied.The following image and table describe the TreeNodeStyle properties.

Propriedades do TreeNodeStyle

Exibição em Árvore NODE estilo gráfico

Propriedade do nó

Descrição

NodeSpacing

Especifica a quantidade de espaçamento vertical entre a nó inteiro atual e nós adjacentes acima e abaixo.

VerticalPadding

Specifies the amount of space rendered on the top and bottom of the TreeNode text.

HorizontalPadding

Specifies the amount space rendered on the left and right of the TreeNode text.

ChildNodesPadding

Specifies the amount of space above and below the child nodes of the TreeNode.

ImageUrl

Specifies the path to the image that displays next to the TreeNode.

Para obter mais informações, consulte Personalizando a Aparência (Look and Feel) do Controle do Servidor Web TreeView.

Another custom rendering feature of the TreeView control is its ability to render check boxes between the node text and image by using the ShowCheckBoxes property.Showing check boxes allows the user to select multiple nodes at once, which is especially useful for interfaces like a newsgroup tree, where users can select and subscribe to multiple newsgroups at once.For more information about using check boxes, see Seleção, Navegação, e Caixas de Seleção no Controle de Servidor Web TreeView.

By default, the TreeView control displays all of the nodes of the tree expanded.You can configure the TreeView control to initially display to any depth.To do so, you can set the ExpandDepth property to a number reflecting the node level that you want to display.For example, if you set the ExpandDepth property to 2, then two levels of the node, or two child nodes, will display when the site initially renders on the client.

Mostrar: