【ASP.NET】——复合控件之TreeView控件

在ASP.NET中常用的复合控件有：TreeView控件，MultiView控件，JavaScript方式的选项卡，WiZard控件。

今天先来学习TreeView控件。

在开发过程中经常会遇到一些有树形层次关系的数据，比如显示无限极分类和显示某个文件下的所有文件及文件夹，对于这些带有树形层次关系的数据的显示用TreeView控件是一个比较不错的选择。TreeView控件支持数据绑定，也支持以编程方式动态添加节点。在TreeView控件中每一个节点都是一个TreeNode对象，可以通过TreeNode对象的Nodes属性来添加其他的TreeNode对象，使之成为TreeNode对象的子节点。

TreeView对象常见属性如下：

下面展示一个简单例子：

我们的数据都是从一个XML文件中读取的，并将它的节点通过代码的方式添加到TreeView控件中。新建一个XML文件，其物理文件名为area.xml，与下面的aspx在同一个文件夹下，XML中内容如下：

<?xml version="1.0" encoding="utf-8" ?> 
<Area>
    <Province iArea="1" cAreaName="北京市"/>
    <Province iArea="2" cAreaName="上海市"/>
    <Province iArea="3" cAreaName="天津市"/>
    <Province iArea="4" cAreaName="重庆市"/>
    <Province iArea="5" cAreaName="湖北市">
      <City iAreaID="51" cAreaName="武汉市"/>
      <City iAreaID="52" cAreaName="黄冈市"/>
      <City iAreaID="53" cAreaName="荆州市"/>
      <City iAreaID="54" cAreaName="武穴市"/>
      <City iAreaID="55" cAreaName="十堰市"/>
      <City iAreaID="55" cAreaName="黄石市"/>
    </Province>
     <Province iAreaID="6" cAreaName="河北省">
        <City iAreaID="61" cAreaName="石家庄市"/>
        <City iAreaID="62" cAreaName="唐山市"/>
    </Province>
    <Province iAreaID="7" cAreaName="山西省">
      <City iAreaID="71" cAreaName="太原市"/>
      <City iAreaID="72" cAreaName="大同市"/>      
    </Province>      
</Area>

前台的aspx中的内容如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeDemo.aspx.cs" Inherits="WebApplication2.NewFolder1.TreeDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>TreeView控件的例子</title>
</head>

<body>
    <form id="form1" runat="server">
        <div>
            <asp:TreeView ID="treeAreaList" runat="server" AutoGenerateDataBindings="false" OnSelectedNodeChanged="Tree_SelectedNodeChanged"></asp:TreeView>
            
        </div>
    </form>
</body>
</html>

后台代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml;
using System.Xml.XPath;

namespace WebApplication2.NewFolder1
{
    public partial class TreeDemo : System.Web.UI.Page
    {
        XmlDocument xmlDoc;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack){
                MakeParentNode();
            }
        }

        protected void MakeParentNode()
        {
            treeAreaList.Nodes.Clear();
            xmlDoc = new XmlDocument();
            xmlDoc.Load(Server.MapPath("area.xml "));//动态加载XML文档    
            XmlNodeList nodeList = xmlDoc.SelectSingleNode("Area").ChildNodes;//获取Area节点下 的所有子结点           
                                                                              //定义Area结点          
            TreeNode topNode = new TreeNode();//定义顶级节点          
            topNode.Text = "area ";         // 
            //tn.Value = "-1";
            topNode.Expanded = true;
            treeAreaList.Nodes.Add(topNode);
            //添加"区域"父结点       

            XmlElement element = null;
            TreeNode treeNode = null;
            //遍历区域下的所有省和直辖市        
            foreach (XmlNode node in nodeList)
            {             element = (XmlElement)node;
                treeNode = new TreeNode();
                treeNode.Text = element.GetAttribute("cAreaName");
                //在树控件上显示省或直辖市的 名称     
                treeNode.Value = element.GetAttribute("iAreaID");//获取节点值 
                treeNode.Expanded = true;
                topNode.ChildNodes.Add(treeNode);//将省或直辖市级结点添加到顶级节点中               
                MakeChildNode(node.ChildNodes, treeNode);//通过递归将所有子节点添加到节点集合
            }
        }

        protected void MakeChildNode(XmlNodeList nodeList, TreeNode treeNode)
        {
            XmlElement element = null;
            TreeNode subTreeNode = null;
            //遍历省级节点下的所有市，市辖区   
            foreach (XmlNode node in nodeList)
            {   element = (XmlElement)node;
                subTreeNode = new TreeNode();
                subTreeNode.Text = element.GetAttribute("cAreaName");
                //在树控件上显示市或市辖 区的名称              
                subTreeNode.Value = element.GetAttribute("iAreaID");
                //这里设置节点Value          
                subTreeNode.Expanded = true;     
                treeNode.ChildNodes.Add(subTreeNode);//将子结点添加到父结点下面      
                MakeChildNode(node.ChildNodes, subTreeNode);//递归调用本方法       
            }
        }

        protected void Tree_SelectedNodeChanged(object sender, EventArgs e)
        {
            Response.Write("节点的值：" + treeAreaList.SelectedNode.Value + "<br/>"); Response.Write("节点的路径：" + treeAreaList.SelectedNode.ValuePath + "<br/>"); Response.Write("节点的数据路径：" + treeAreaList.SelectedNode.DataPath + "<br/>");


        }
        }

}

显示效果如下：

【ASP.NET】——复合控件之TreeView控件

猜你喜欢