【ASP.NET】——複合控制元件之TreeView控制元件
阿新 • • 發佈：2018-12-02
在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/>");
}
}
}顯示效果如下：
