Este artigo foi traduzido por máquina. Para visualizar o arquivo em inglês, marque a caixa de seleção Inglês. Você também pode exibir o texto Em inglês em uma janela pop-up, movendo o ponteiro do mouse sobre o texto.
Tradução
Inglês

TreeView Classe

Exibe hierárquico dados, como um Tabela conteúdo, em uma estrutura árvore.

Namespace:  System.Web.UI.WebControls
Assembly:  System.Web (em System.Web. dll)

[ControlValuePropertyAttribute("SelectedValue")]
[AspNetHostingPermissionAttribute(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]
[AspNetHostingPermissionAttribute(SecurityAction.LinkDemand, Level = AspNetHostingPermissionLevel.Minimal)]
public class TreeView : HierarchicalDataBoundControl, IPostBackEventHandler, 
	IPostBackDataHandler, ICallbackEventHandler

The TreeView control is used to display hierarchical data, such as a table of contents or file directory, in a tree structure and supports the following features:

  • Ligação de dados que permite que os nós do Controlarar seja Ligado para XML, tabular, ou relacional dados.

  • Site de navegação através da integração com controle SiteMapDataSource.

  • Nó texto que pode ser exibido como texto sem formatação ou hiperlinks.

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

  • População nó do lado do cliente (em navegadores com suporte).

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

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

Nodes

The TreeView control is made up of nodes.Each entry in the tree is called a node and is represented by a TreeNode object.Tipos de nós são definidos da seguinte maneira:

  • A node that contains other nodes is called a parent node.

  • The node that is contained by another node is called a child node.

  • A node that has no children is called a leaf node.

  • The node that is not contained by any other node but is the ancestor to all the other nodes is the root node.

Um nó pode ser tanto um pai e um pai filho, mas raiz, e nós folha são mutuamente exclusivos.Várias propriedades visuais e comportamentais de nós são determinadas pelo se um nó é uma raiz, pai ou nó de folha.

Although a typical tree structure 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 as listagens item sem exibir um nó raiz Simples, como em uma lista de categorias de produtos.

Each node has a Text property and a Value property.The value of the Text property is displayed in the TreeView, while the Value property is used to store any additional data about the node, such as data that is passed to the postback event that is associated with the node.

Um nó pode estar em um dos dois modos: Modo de seleção e o modo de navegação.Por padrão, um nó está no modo de seleção.To put a node into navigation mode, set the NavigateUrl property for the node to a value other than an empty string ("").To put a node into selection mode, set the NavigateUrl property for the node to an empty string ("").

Observação:

Some Internet browsers have a limitation that can affect the performance of the TreeView control.Por exemplo, o Microsoft Internet Explorer 6.0 tem um limite de caracteres URL de caracteres 2067 que ele envia.Se o número de caracteres em um URL de um nó é maior do que esse número, expandindo desse nó falhará e nenhuma exceção é acionada.

Dados estáticos

O modelo de dados mais simples do controle TreeView é dados estáticos.To display static data using declarative syntax, first nest opening and closing <Nodes> tags between the opening and closing tags of the TreeView control.Next, create the tree structure by nesting <asp:TreeNode> elements between the opening and closing <Nodes> tags.Each <asp:TreeNode> element represents a node in the tree and maps to a TreeNode object.You can set the properties of each node by setting the attributes of its <asp:TreeNode> element.To create child nodes, nest additional <asp:TreeNode> elements between the opening and closing <asp:TreeNode> tags of the parent node.

Vinculando a dados

The TreeView control can also be bound to data.You can use either of two methods to bind the TreeView control to the appropriate data source type:

  • The TreeView control can use any data source control that implements the IHierarchicalDataSource interface, such as an XmlDataSource control or a SiteMapDataSource control.To bind to a data source control, set the DataSourceID property of the TreeView control to the ID value of the data source control.The TreeView control automatically binds to the specified data source control.Este é o método preferencial para vincular a dados.

  • The TreeView control can also be bound to an XmlDocument object or a DataSet object with relations.To bind to one of these data sources, set the DataSource property of the TreeView control to the data source, and then call the DataBind method.

When binding to a data source where each data item contains multiple properties (such as an XML element with several attributes), a node displays the value that is returned by the ToString method of the data item, by default.Na maiúscminúsc de um elemento XML, o nó exibe o nome elemento, que mostra o subjacente estrutura da árvore, mas não caso contrário muito útil é.You can bind a node to a specific data item property by specifying tree node bindings using the DataBindings collection.The DataBindings collection contains TreeNodeBinding objects that define the relationship between a data item and the node that it is binding to.Você pode especificar os critérios para ligação e a propriedade de item dados para exibir no nó.For more information on tree node bindings, see TreeNodeBinding.

Observação de segurança:

A malicious user can create a callback request and get data for the nodes of the TreeView control that the page developer is not displaying.Portanto, segurança dos dados deve ser implementada pela Fonte de Dados.Do not use the MaxDataBindDepth property to hide data.

Preenchimento de nós dinâmico

Às vezes, ele não é prático definir estaticamente a estrutura árvore porque a Fonte de Dados retorna muito dados ou porque os dados para exibir depende informações que você get em tempo de execução.Devido a isso, o controle TreeView oferece suporte dinâmico nó da população.When the PopulateOnDemand property for a node is set to true, that node gets populated at run time when the node is expanded.To populate a node dynamically, you must define an event-handling method that contains the logic to populate a node for the TreeNodePopulate event.

O Microsoft Internet Explorer versão 5.0 e posterior e Netscape 6.0 e posterior também podem aproveitar da população de nó do lado do cliente.Client-side node population enables the TreeView control to populate a node using client script when users expand the node, without requiring a round trip to the server.For more information on client-side node population, see PopulateNodesFromClient.

Personalizando a interface do usuário

There are many ways to customize the appearance of the TreeView control.Primeiro, você pode especificar um estilo diferente (como tamanho da fonte e cor) para cada um dos tipos de nó.

Se você usar em cascata folhas estilo (folhas de estilo em cascata) para personalizar a aparência do Controlarar, use um Em Linha estilos ou um separar arquivo folhas de estilo em cascata, mas não ambos.Usando ambas Em Linha estilos e um separar arquivo folhas de estilo em cascata poderia causar resultados inesperados.For more information on using style sheets with controls, see Controle de Servidor Web do ASP.NET e Estilos CSS.

A tabela a seguir lista os estilos nó disponível.

Propriedade de estilo nó

Descrição

HoverNodeStyle

As configurações de estilo para um nó quando o ponteiro do mouse é posicionado sobre ele.

LeafNodeStyle

As configurações de estilo para os nós folha.

NodeStyle

As configurações de estilo padrão para um nó.

ParentNodeStyle

As configurações de estilo para os nós pai.

RootNodeStyle

As configurações de estilo para o nó de raiz.

SelectedNodeStyle

As configurações de estilo para um nó selecionado.

You can also control the style of nodes at specific depths within the tree by using the LevelStyles collection.O primeiro estilo na coleção corresponde ao estilo dos nós no primeiro nível na árvore.O estilo segundo na coleção corresponde ao estilo dos nós no segundo nível a árvore e assim por diante.Isso geralmente é usado para gerar Tabela de menus de navegação Contents–Estilo onde nós em uma determinada profundidade devem ter a aparência mesma, independentemente de terem nós filho.

Observação:

If a style is defined for a certain depth level using the LevelStyles collection, that style overrides any root, parent, or leaf node style settings for the nodes at that depth.

Another way to alter the appearance of the control is to customize the images that are displayed in the TreeView control.Você pode especificar seu próprios Personalizar conjunto de imagens para as partes diferentes do Controlarar por Configuração as propriedades mostradas a seguinte tabela.

Propriedade Image

Descrição

CollapseImageUrl

A URL a uma imagem exibida para o indicador de nó recolhíveis.Esta imagem é normalmente um sinal de menos (-).

ExpandImageUrl

A URL a uma imagem exibida para o indicador de nó expansível.Esta imagem é normalmente um sinal de mais (+).

LineImagesFolder

O URL para a pasta que contém as imagens de linha usadas para conectar nós pai nós filho.The ShowLines property must also be set to true for this property to have an effect.

NoExpandImageUrl

A URL a uma imagem exibida para o indicador de nó não-expansíveis.

Observação:

Você não precisará personalizar cada propriedade de imagem.Se uma propriedade de imagem não é explicitamente definida, a imagem interna padrão será usada.

The TreeView control also allows you to display a check box next to a node.When the ShowCheckBoxes property is set to a value other than TreeNodeTypes.None, check boxes are displayed next to the specified node types.

Observação:

The ShowCheckBoxes property can be set to a bitwise combination of the TreeNodeTypes enumeration member values.

Each time the page is posted to the server, the CheckedNodes collection is automatically populated with the selected nodes.When check boxes are displayed, you can use the TreeNodeCheckChanged event to run a custom routine whenever the state of a check box changes between posts to the server.

Eventos

The TreeView control provides several events that you can program against.Isso permite que você para executar uma rotina personalizada sempre que ocorrer um evento.The following table lists the events that are supported by the TreeView control.

Evento

Descrição

TreeNodeCheckChanged

Occurs when the check boxes of the TreeView control change state between posts to the server.

SelectedNodeChanged

Occurs when a node is selected in the TreeView control.

TreeNodeExpanded

Occurs when a node is expanded in the TreeView control.

TreeNodeCollapsed

Occurs when a node is collapsed in the TreeView control.

TreeNodePopulate

Occurs when a node with its PopulateOnDemand property set to true is expanded in the TreeView control.

TreeNodeDataBound

Occurs when a data item is bound to a node in the TreeView control.

Acessibilidade

A marcação processada por padrão para este controle pode atendem aos padrões de acessibilidade, como as diretrizes Prioridade 1 Web conteúdo acessibilidade diretrizes 1.0 (WCAG) não. Para mais detalhes sobre o suporte à acessibilidade deste controle, consulte Controles ASP.NET e acessibilidade.

Rolagem

The TreeView control does not have built-in scrolling.To add scrolling, place the TreeView control in a Panel control and add scrollbars to the Panel control.For more information, see Visão Geral sobre Controle Panel do Servidor Web.

TopicLocation
Como: Adicionar ou Excluir Exibição em Árvore nó elementos (Visual Studio)dv_vwdcon
Demonstra Passo a passo: Adicionando de navegação do site a um site da Webdv_vwdcon
Demonstra Passo a passo: A filtragem nós site-estrutura baseadas em funções de segurançadv_vwdcon
Demonstra Passo a passo: Exibindo dados hierárquica em um Exibição em Árvore controledv_vwdcon
Demonstra Passo a passo: Personalizando um site da Web usando temas no Visual Studiodv_vwdcon
Como: Programmatically Enumerate Nós Site-Mapdv_aspnetcon
Como: Filtro the Nós Retrieved by SiteMapDataSource Servidor Web Controlesdv_aspnetcon
Como: Configure Maps Múltiplo Site and Providers Site-Mapdv_aspnetcon
Como: Exibir Site-Map Dados in Non-Hierarchical Servidor Web Controlesdv_aspnetcon
Como: Personalizar the Aparência of SiteMapPath Servidor Web Controlesdv_aspnetcon
Como: Adicionar navegação de site simplesdv_aspnetcon
Como: Implementar provedores do site ASP.NET-mapadv_aspnetcon
Como: Programaticamente enumerar nós de mapas do siteBuilding ASP .NET Web Applications in Visual Studio
Como: Adicionar ou excluir elementos TreeView nóBuilding ASP .NET Web Applications in Visual Studio
Como: configurar Multiple Site Maps and Site Map ProvidersBuilding ASP .NET Web Applications in Visual Studio
Como: Filtrar os nós recuperados por controles de servidor Web SiteMapDataSourceBuilding ASP .NET Web Applications in Visual Studio
Demonstra Passo a passo: Exibindo dados hierárquicos em um controle TreeViewBuilding ASP .NET Web Applications in Visual Studio
Demonstra Passo a passo: Filtragem de nós de mapas do site baseados em papéis de segurançaBuilding ASP .NET Web Applications in Visual Studio
Como: Personalizar a aparência de controles de servidor Web SiteMapPathBuilding ASP .NET Web Applications in Visual Studio
Como: Exibir dados de um MAP de site em controles de servidor Web não hierárquicosBuilding ASP .NET Web Applications in Visual Studio
Como: Adicionar navegação simplesBuilding ASP .NET Web Applications in Visual Studio
Como: Implementar provedores de mapas de site ASP.NETBuilding ASP .NET Web Applications in Visual Studio
Como: Programaticamente enumerar nós de mapas do siteBuilding ASP .NET Web Applications in Visual Studio
Como: Adicionar ou excluir elementos TreeView nóBuilding ASP .NET Web Applications in Visual Studio
Como: configurar Multiple Site Maps and Site Map ProvidersBuilding ASP .NET Web Applications in Visual Studio
Como: Filtrar os nós recuperados por controles de servidor Web SiteMapDataSourceBuilding ASP .NET Web Applications in Visual Studio
Demonstra Passo a passo: Exibindo dados hierárquicos em um controle TreeViewBuilding ASP .NET Web Applications in Visual Studio
Demonstra Passo a passo: Filtragem de nós de mapas do site baseados em papéis de segurançaBuilding ASP .NET Web Applications in Visual Studio
Como: Personalizar a aparência de controles de servidor Web SiteMapPathBuilding ASP .NET Web Applications in Visual Studio
Como: Exibir dados de um MAP de site em controles de servidor Web não hierárquicosBuilding ASP .NET Web Applications in Visual Studio
Como: Adicionar navegação simplesBuilding ASP .NET Web Applications in Visual Studio
Como: Implementar provedores de mapas de site ASP.NETBuilding ASP .NET Web Applications in Visual Studio

Esta seção contém sete exemplos de código:

  • O primeiro exemplo de código demonstra como configurar os quadros para o segundo exemplo de código.

  • The second code example demonstrates how to use declarative syntax to display static data in the TreeView control.

  • The third code example demonstrates how to bind the TreeView control to an XML data source.

  • O exemplo de código quarto fornece dados XML de exemplo para o terceiro exemplo de código.

  • The fifth code example demonstrates how to use the TreeView control for site navigation by binding it to a SiteMapDataSource control.

  • O exemplo de código sexto fornece exemplo Mapa de Site dados para o quinto exemplo de código.

  • The seventh code example demonstrates how to populate the nodes in the TreeView control from the client.

O exemplo de código a seguir demonstra como configurar os quadros para o exemplo de código a seguir.


<html xmlns="http:
<head>
    <title>TreeView Frameset Example</title>
</head>

    <frameset cols=>

        <frame title= name= src=/>
        <frame title= name= src=/> 

    </frameset>      

</html>



The following code example demonstrates how to use declarative syntax to display static data in the TreeView control.Este exemplo é usado dentro do conjunto de quadro do acima exemplo para exibir um Tabela do conteúdo.


<%@ Page Language= %>

<!DOCTYPE html PUBLIC "-
    "http:
<html xmlns="http:
  <head runat=>
    <title>TreeView Declarative Syntax Example</title>
</head>
<body>
    <form id= runat=>

      <h3>TreeView Declarative Syntax Example</h3>

      <asp:TreeView id= 
        runat=>

        <Nodes>

          <asp:TreeNode Value= 
            NavigateUrl= 
            Text=
            Target= 
            Expanded=>

            <asp:TreeNode Value= 
              NavigateUrl= 
              Text=
              Target=>

              <asp:TreeNode Value= 
                NavigateUrl= 
                Text=
                Target=/>

            </asp:TreeNode>              

            <asp:TreeNode Value= 
              NavigateUrl=
              Text=
              Target=>

            </asp:TreeNode> 

          </asp:TreeNode>

        </Nodes>

      </asp:TreeView>

    </form>
  </body>
</html>



The following code example demonstrates how to bind the TreeView control to an XML data source.Para esse exemplo funcione corretamente, você deve copiar os dados XML de exemplo, fornecidos após esse exemplo de código, para um arquivo denominado Book.xml.


<%@ Page Language= %>

<!DOCTYPE html PUBLIC "-
    "http:
<html xmlns="http:
  <head runat=>
    <title>TreeView XML Data Binding Example</title>
</head>
<body>
    <form id= runat=>

      <h3>TreeView XML Data Binding Example</h3>

      <asp:TreeView id= 
        DataSourceID=
        runat=>

        <DataBindings>
          <asp:TreeNodeBinding DataMember= TextField=/>
          <asp:TreeNodeBinding DataMember= TextField=/>
          <asp:TreeNodeBinding DataMember= TextField=/>
        </DataBindings>

      </asp:TreeView>

      <asp:XmlDataSource id=  
        DataFile=
        runat=>
      </asp:XmlDataSource>

    </form>
  </body>
</html>



O exemplo de código a seguir fornece dados XML de exemplo para o exemplo anterior.

<Book Title="Book Title">
    <Chapter Heading="Chapter 1">
        <Section Heading="Section 1">
        </Section>
        <Section Heading="Section 2">
        </Section>
    </Chapter>
    <Chapter Heading="Chapter 2">
        <Section Heading="Section 1">
        </Section>
    </Chapter>
</Book>

The following code example demonstrates how to use the TreeView control for site navigation by binding it to a SiteMapDataSource control.Para esse exemplo para trabalho corretamente, você deve copiar o exemplo Mapa de Site dados, fornecidos após este exemplo de código, para um arquivo nomeado WEB.sitemap.


<%@ Page Language= %>

<!DOCTYPE html PUBLIC "-
    "http:
<html xmlns="http:
  <head runat=>
    <title>TreeView AutoGenerateBindings Example</title>
</head>
<body>
    <form id= runat=>

      <h3>TreeView AutoGenerateBindings Example</h3>

      <!-- Set the AutoGenerateBindings property -->
      <!-- to  declaratively to allow    -->
      <!-- the user-defined Bindings collection. -->
      <asp:TreeView id= 
        DataSourceID=
        AutoGenerateDataBindings=
        runat=>

        <DataBindings>

          <asp:TreeNodeBinding TextField= NavigateUrlField=/>

        </DataBindings>

      </asp:TreeView>

      <asp:SiteMapDataSource ID= runat=/>

    </form>
  </body>
</html>



O seguinte exemplo fornece exemplo de código Mapa de Site dados para a acima exemplo de código.

<siteMap>
    <siteMapNode title="Home" description="Home" url="default.aspx">
        <siteMapNode title="Products" description="Products" url="Products.aspx">
            <siteMapNode title="Computers" url="Computers.aspx"/>
            <siteMapNode title="Accessories" url="Accessories.aspx"/>     
        </siteMapNode>
    </siteMapNode>
</siteMap>

The following code example demonstrates how to populate the nodes in the TreeView control from the client.Quando o nó client-side população é Habilitado, nós são preenchidas dinamicamente sobre o cliente, sem a necessidade postagem voltar para o servidor.


<%@ Page Language= %>
<%@ Import Namespace= %>
<%@ Import Namespace= %>

<!DOCTYPE html PUBLIC "-
    "http:
<script runat=>

   PopulateNode(Object sender, TreeNodeEventArgs e)
  {

    
    (e.Node.Depth)
    {
       0:
        
        PopulateCategories(e.Node);
        ;
       1:
        
        PopulateProducts(e.Node);
        ;
      :
        
        ;
    }

  }

   PopulateCategories(TreeNode node)
  {

    
    
    DataSet ResultSet = RunQuery();

    
    (ResultSet.Tables.Count > 0)
    {

      
      
       (DataRow row  ResultSet.Tables[0].Rows)
      {

        
        
        
        TreeNode newNode =  TreeNode();
        newNode.Text = row[].ToString(); 
        newNode.Value = row[].ToString();        

        
        
        newNode.PopulateOnDemand = ;

        
        newNode.SelectAction = TreeNodeSelectAction.Expand;

        
        node.ChildNodes.Add(newNode);

      }

    }

  }

   PopulateProducts(TreeNode node)
  {

    
    
    DataSet ResultSet = RunQuery( + node.Value);

    
    (ResultSet.Tables.Count > 0)
    {

      
      
       (DataRow row  ResultSet.Tables[0].Rows)
      {

        
        TreeNode NewNode =  TreeNode(row[].ToString());

        
        
        NewNode.PopulateOnDemand = ;

        
        NewNode.SelectAction = TreeNodeSelectAction.None;

        
        node.ChildNodes.Add(NewNode);

      }

    }

  }

  DataSet RunQuery(String QueryString)
  {

    
    
    String ConnectionString = ; 

    SqlConnection DBConnection =  SqlConnection(ConnectionString);
    SqlDataAdapter DBAdapter;
    DataSet ResultsDataSet =  DataSet();

    
    {

      
      DBAdapter =  SqlDataAdapter(QueryString, DBConnection);
      DBAdapter.Fill(ResultsDataSet);

      
      DBConnection.Close();

    }
    (Exception ex)
    {

      
      (DBConnection.State == ConnectionState.Open)
      {
        DBConnection.Close();
      }

      Message.Text = ;

    }

     ResultsDataSet;

  }

</script>

<html xmlns="http:
  <head runat=>
    <title>TreeView PopulateNodesFromClient Example</title>
</head>
<body>
    <form id= runat=>

      <h3>TreeView PopulateNodesFromClient Example</h3>

      <asp:TreeView id=
        Font-Names= 
        ForeColor=
        EnableClientScript=
        PopulateNodesFromClient=  
        OnTreeNodePopulate=
        runat=>

        <Nodes>

          <asp:TreeNode Text= 
            SelectAction=  
            PopulateOnDemand=/>

        </Nodes>

      </asp:TreeView>

      <br /><br />

      <asp:Label id= runat=/>

    </form>
  </body>
</html>



  • AspNetHostingPermission 

    for running the TreeView control in a hosted environment.Valor de enumeração associado: AspNetHostingPermissionLevel.Minimal

Quaisquer membros públicos estático (compartilhados na Visual Basic) desse tipo são Thread seguro. Não há garantia de que qualquer membro de instância seja isento de segmentos.

Contribuições da comunidade

ADICIONAR
Mostrar: