上一篇文章我們介紹了樹控件的基本用法，不過(guò)都是通過(guò)標(biāo)簽來(lái)聲明樹控件的結(jié)構(gòu)，本章我們會(huì)詳細(xì)講解如何在后臺(tái)綁定樹控件。

?

綁定到XmlDocument

下面通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)看如何將XmlDocument和樹控件綁定，頁(yè)面的標(biāo)簽結(jié)構(gòu)：

1: <ext:Tree ID="Tree1" Width="500px" EnableArrows="false" EnableLines="false" ShowHeader="true" 2: Title="樹控件（綁定到 XmlDocument）" runat="server"> 3: </ext:Tree>

這里有兩個(gè)屬性需要注意：

• EnableArrows：是夠啟用箭頭折疊標(biāo)示，否則是默認(rèn)的加減折疊標(biāo)示。
• EnableLines：是否啟用折疊標(biāo)示之間的連接虛線。

?

來(lái)看下后臺(tái)的初始化代碼：

1: private void LoadData() 2: { 3: string xmlPath = Server.MapPath("~/tree/databind/website.xml"); 4: ? 5: string xmlContent = String.Empty; 6: using (StreamReader sr = new StreamReader(xmlPath)) 7: { 8: xmlContent = sr.ReadToEnd(); 9: } 10: ? 11: XmlDocument xdoc = new XmlDocument(); 12: xdoc.LoadXml(xmlContent); 13: ? 14: Tree1.DataSource = xdoc; 15: Tree1.DataBind(); 16: }

這段代碼的邏輯很簡(jiǎn)單：

獲得需要讀取XML文件的服務(wù)器路徑；

使用StreamReader來(lái)讀取文件的內(nèi)容；

創(chuàng)建XmlDocument實(shí)例，并加載XML文件內(nèi)容；

設(shè)置樹控件的DataSource為此實(shí)例，并調(diào)用DataBind執(zhí)行數(shù)據(jù)綁定。

?

最后來(lái)看下XML文件的內(nèi)容和最終的效果截圖：

1: <?xml version="1.0" encoding="utf-8" ?> 2: <Tree> 3: <TreeNode Text="中國(guó)" Expanded="true" NodeId="China"> 4: <TreeNode Text="河南省" Expanded="true" NodeId="henan"> 5: <TreeNode Text="駐馬店市" NodeId="zhumadian" /> 6: <TreeNode Text="漯河市" NodeId="luohe" /> 7: </TreeNode> 8: // 省略其他節(jié)點(diǎn)... 9: </TreeNode> 10: </Tree>

?

綁定到XmlDataSource

綁定到XmlDataSource簡(jiǎn)化了上面的步驟，我們來(lái)看一下實(shí)現(xiàn)相同功能的示例：

1: <ext:Tree ID="Tree1" Width="500px" EnableArrows="true" EnableSingleExpand="true" 2: ShowHeader="true" Title="樹控件（綁定到 XmlDataSource）" runat="server"> 3: </ext:Tree> 4: <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/tree/databind/website.xml"> 5: </asp:XmlDataSource>

?

在來(lái)看下后臺(tái)初始化代碼和顯示效果：

1: private void LoadData() 2: { 3: Tree1.DataSource = XmlDataSource1; 4: Tree1.DataBind(); 5: }

?

注意：在ASPX中設(shè)置了樹控件的EnableSingleExpand屬性，也就是說(shuō)同一級(jí)目錄只能展開一個(gè)節(jié)點(diǎn)。

?

綁定到SiteMap

不知道你有沒有注意到，上面兩個(gè)例子XML文件中定義的節(jié)點(diǎn)屬性和樹節(jié)點(diǎn)的屬性一模一樣，如果不一樣怎么辦？

?

沒關(guān)系，可以為樹控件指定映射關(guān)系，用來(lái)將XML中定義的節(jié)點(diǎn)屬性名稱和樹節(jié)點(diǎn)的屬性進(jìn)行對(duì)應(yīng)，SiteMap就是一個(gè)典型例子。

來(lái)看一下SiteMap文件：

1: <?xml version="1.0" encoding="utf-8" ?> 2: <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > 3: <siteMapNode title="中國(guó)" Expanded="true" NodeId="China"> 4: <siteMapNode title="河南省" description="河南省省會(huì)" Expanded="true" NodeId="henan"> 5: <siteMapNode title="駐馬店市" NodeId="zhumadian" /> 6: <siteMapNode title="漯河市" NodeId="luohe" /> 7: </siteMapNode> 8: // 省略其他節(jié)點(diǎn)... 9: </siteMapNode> 10: </siteMap>

其中title, description, url是SiteMap節(jié)點(diǎn)標(biāo)準(zhǔn)的屬性名稱，下面我們看下ASPX標(biāo)簽的定義，看看如何將這些屬性名映射到樹節(jié)點(diǎn)的屬性：

1: <ext:Tree ID="Tree1" Width="500px" ShowHeader="true" Title="樹控件（綁定到 SiteMap）" runat="server"> 2: <Mappings> 3: <ext:XmlAttributeMapping From="url" To="NavigateUrl" /> 4: <ext:XmlAttributeMapping From="title" To="Text" /> 5: <ext:XmlAttributeMapping From="description" To="ToolTip" /> 6: </Mappings> 7: </ext:Tree> 8: <asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile="~/tree/databind/Web.sitemap"> 9: </asp:XmlDataSource>

?

看下最終的顯示效果，特別注意“河南省”節(jié)點(diǎn)的Tooltip：

?

綁定到DataTable

在實(shí)際項(xiàng)目中，我們可能需要從一個(gè)數(shù)據(jù)表中讀出具有層次結(jié)構(gòu)的數(shù)據(jù)，比如菜單表中通過(guò)ID和ParentID來(lái)定義這種結(jié)構(gòu)。

?

下面我們通過(guò)一段代碼來(lái)生成類似的DataTable結(jié)構(gòu)：

1: private DataTable CreateDataTable() 2: { 3: DataTable table = new DataTable(); 4: DataColumn column1 = new DataColumn("Id", typeof(string)); 5: DataColumn column2 = new DataColumn("Text", typeof(String)); 6: DataColumn column3 = new DataColumn("ParentId", typeof(string)); 7: table.Columns.Add(column1); 8: table.Columns.Add(column2); 9: table.Columns.Add(column3); 10: ? 11: DataRow row = table.NewRow(); 12: row[0] = "china"; 13: row[1] = "中國(guó)"; 14: row[2] = DBNull.Value; 15: table.Rows.Add(row); 16: ? 17: row = table.NewRow(); 18: row[0] = "henan"; 19: row[1] = "河南省"; 20: row[2] = "china"; 21: table.Rows.Add(row); 22: ? 23: row = table.NewRow(); 24: row[0] = "zhumadian"; 25: row[1] = "駐馬店市"; 26: row[2] = "henan"; 27: table.Rows.Add(row); 28: ? 29: row = table.NewRow(); 30: row[0] = "luohe"; 31: row[1] = "漯河市"; 32: row[2] = "henan"; 33: table.Rows.Add(row); 34: ? 35: // 省略其他節(jié)點(diǎn)... 36: ? 37: return table; 38: }

毫無(wú)疑問，這段代碼生成的層次結(jié)構(gòu)如下所示：

當(dāng)然，這也是我們最終要實(shí)現(xiàn)的效果，來(lái)看下樹控件的初始化代碼：

1: protected void Page_Load(object sender, EventArgs e) 2: { 3: if (!IsPostBack) 4: { 5: LoadData(); 6: } 7: } 8: ? 9: private void LoadData() 10: { 11: DataTable table = CreateDataTable(); 12: ? 13: DataSet ds = new DataSet(); 14: ds.Tables.Add(table); 15: ds.Relations.Add("TreeRelation", ds.Tables[0].Columns["Id"], ds.Tables[0].Columns["ParentId"]); 16: ? 17: foreach (DataRow row in ds.Tables[0].Rows) 18: { 19: if (row.IsNull("ParentId")) 20: { 21: TreeNode node = new TreeNode(); 22: node.Text = row["Text"].ToString(); 23: node.Expanded = true; 24: Tree1.Nodes.Add(node); 25: ? 26: ResolveSubTree(row, node); 27: } 28: } 29: } 30: ? 31: private void ResolveSubTree(DataRow dataRow, TreeNode treeNode) 32: { 33: DataRow[] rows = dataRow.GetChildRows("TreeRelation"); 34: if (rows.Length > 0) 35: { 36: treeNode.Expanded = true; 37: foreach (DataRow row in rows) 38: { 39: TreeNode node = new TreeNode(); 40: node.Text = row["Text"].ToString(); 41: treeNode.Nodes.Add(node); 42: ? 43: ResolveSubTree(row, node); 44: } 45: } 46: }

這段代碼有點(diǎn)復(fù)雜，我們逐步來(lái)分析：

通過(guò)CreateDataTable函數(shù)拿到需要的數(shù)據(jù)源；

創(chuàng)建一個(gè)DataSet數(shù)據(jù)集，并把剛拿到的數(shù)據(jù)表加入此數(shù)據(jù)集，通過(guò)還定義了數(shù)據(jù)之間的聯(lián)系（ds.Relations.Add）；

遍歷數(shù)據(jù)表中的每一行，找到?jīng)]有定義ParentId的行，也即是樹的根節(jié)點(diǎn)；

將這些根節(jié)點(diǎn)添加到樹控件中（Tree1.Nodes.Add）；

遞歸這些根節(jié)點(diǎn)，并通過(guò)數(shù)據(jù)集中數(shù)據(jù)之間的關(guān)系，找到這些根節(jié)點(diǎn)的所有子節(jié)點(diǎn)，并添加到樹中。

?

小結(jié)

本章我們講解了如何將各種數(shù)據(jù)源綁定到樹控件，特別是將表格數(shù)據(jù)綁定到樹控件的做法非常耐人尋味，不過(guò)實(shí)際項(xiàng)目中最常用的還是將XML文件綁定到樹控件。

下一篇文章我們會(huì)講解手風(fēng)琴控件，并將使用手風(fēng)琴控件和樹控件組合來(lái)創(chuàng)建站點(diǎn)的菜單導(dǎo)航目錄。

?

注：《FineUI秘密花園》系列文章由三生石上原創(chuàng)，博客園首發(fā)，轉(zhuǎn)載請(qǐng)注明出處。文章目錄 官方論壇

總結(jié)

以上是生活随笔為你收集整理的[原创]FineUI秘密花园（二十四） — 树控件之数据绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。