袁芳

摘要：TreeView控件是以樹形目錄形式顯示數(shù)據(jù)，并能分層展開和收縮各節(jié)點(diǎn)子目錄。該文以學(xué)生宿舍管理系統(tǒng)為例，介紹通過使用TreeView控件以樹形目錄的形式添加菜單，連接到不同的功能頁面的導(dǎo)航的幾種方法。

關(guān)鍵詞：TreeView控件；XML；宿舍管理

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）31-0088-03

The Design and Application of Cassified Navigation by TreeView Control in the Dormitory Management System

YUAN Fang

（Dept of Information Engineeringr， Jiangxi Vocational College of Finance & Economics， Jiujiang 332000， China）

Abstract： The TreeView control can display data by a form of tree directory ， and can be layered expansion and contraction of the various sections of the directory. This paper takes student dormitory management system as an example， it introduces several methods of using the TreeView control to add menu in the form of a tree directory， and connect to different functions pages.

Key words： TreeView control； XML； dormitory management

在Web應(yīng)用中，對(duì)于導(dǎo)航文字非常多，并且對(duì)導(dǎo)航內(nèi)容可以進(jìn)行分類的網(wǎng)站來說，可以將頁面中的導(dǎo)航文字以樹形目錄的形式來顯示，這樣不僅可以有效地節(jié)約頁面，而且大大方便了用戶的遍歷訪問站點(diǎn)中的不同頁面。

在Visual Studio 2010中，TreeView控件的基本功能是將有序的層次化結(jié)構(gòu)數(shù)據(jù)顯示為樹形結(jié)構(gòu)，該控件可以輕松快捷設(shè)計(jì)樹形結(jié)構(gòu)導(dǎo)航系統(tǒng)。在Web應(yīng)用開發(fā)中，該控件的層次數(shù)據(jù)可以設(shè)計(jì)時(shí)添加，也可以通過編程操作TreeNode對(duì)象動(dòng)態(tài)地添加和修改，還可以使用數(shù)據(jù)源控件進(jìn)行綁定，如利用XMLDataSource從XML文件中或缺填充數(shù)據(jù)，使用SiteMapDataSource控件將網(wǎng)站地圖數(shù)據(jù)填充到TreeView控件中[1]。下面以學(xué)生宿舍管理系統(tǒng)中分成樓房管理、宿舍管理、住宿管理和分類統(tǒng)計(jì)四個(gè)模塊的導(dǎo)航為例，介紹TreeView控件的設(shè)置與應(yīng)用的方法。

1 TreeView控件設(shè)計(jì)時(shí)添加數(shù)據(jù)

創(chuàng)建Web窗體后，可通過拖放的方式將TreeView控件添加到Web頁的適當(dāng)位置，在Web頁上就會(huì)顯示如圖1所示的TreeView 控件和“TreeView任務(wù)”快捷菜單。快捷菜單可以設(shè)置TreeView控件常用的任務(wù)，其中自動(dòng)套用格式是用于設(shè)置控件外觀，選擇數(shù)據(jù)源是

用于連接一個(gè)現(xiàn)有數(shù)據(jù)源或創(chuàng)建一個(gè)數(shù)據(jù)源[2]。

圖1 TreeView控件

選擇“編輯節(jié)點(diǎn)”命令，會(huì)彈出如圖2所示的對(duì)話框，可以定義TreeView控件的節(jié)點(diǎn)和相關(guān)屬性，通過添加節(jié)點(diǎn)和子節(jié)點(diǎn)方式設(shè)置每個(gè)節(jié)點(diǎn)TreeNode的Text，value和NavigateURL屬性值，如圖2所示，即可完成宿舍管理系統(tǒng)的導(dǎo)航，產(chǎn)生相應(yīng)TreeView控件部分源代碼如下。

……

圖2 TreeView控件節(jié)點(diǎn)編輯器

2 TreeView控件綁定XML文件

首先根據(jù)宿舍管理系統(tǒng)中需要導(dǎo)航數(shù)據(jù)建一份XML的文件NavigateXML.xml，在該XML文件中依據(jù)導(dǎo)航的4個(gè)分類，構(gòu)建根節(jié)點(diǎn)（Root）、父節(jié)點(diǎn)（ParentNode）、子節(jié)點(diǎn)（ChildNode），并設(shè)置每個(gè)節(jié)點(diǎn)中的導(dǎo)航地址url屬性和導(dǎo)航名稱Text屬性，部分代碼如下所示。

……

然后在頁面上添加TreeView和XmlDataSource控件，配置XMLDataSource數(shù)據(jù)源命令中，選數(shù)據(jù)文件為剛才建立的NavigateXML.xml文件即可。TreeView控件的DataSourceID屬性設(shè)為XmlDataSource控件的ID值，并編輯“TreeNode任務(wù)”快捷菜單中“編輯TreeNode數(shù)據(jù)綁定”命令，添加Root、ParentNode和ChildNode 3個(gè)節(jié)點(diǎn)，并設(shè)置相應(yīng)的NavigateUrlField為url和TextField為Text屬性值，如圖3所示。

如果要做網(wǎng)站的站點(diǎn)地圖的導(dǎo)航，在Asp.net中可以建唯一的Web.sitemap站點(diǎn)地圖文件，該文件用于存儲(chǔ)站點(diǎn)導(dǎo)航信息，該站點(diǎn)地圖文件也是采用了xml格式，將站點(diǎn)邏輯結(jié)構(gòu)層次化地列出來，原理與綁定xml文件類似，區(qū)別在于頁面上添加SiteMapDataSource數(shù)據(jù)源控件，SiteMapDataSource控件不需任何設(shè)置，把TreeView控件的DataSourceID屬性設(shè)為SiteMapDataSource控件的ID值，即可完成站點(diǎn)導(dǎo)航，操作起來更加便捷 。

圖3 TreeView控件綁定XML文件

3 TreeView控件綁定到數(shù)據(jù)庫

上述介紹的方法是采用靜態(tài)方式，即節(jié)點(diǎn)的名稱和數(shù)量不隨意發(fā)生擴(kuò)展變化，但在很多實(shí)際應(yīng)用中，節(jié)點(diǎn)的數(shù)據(jù)往往來自數(shù)據(jù)庫[3]，并按實(shí)際的需求在頁面上添加或修改導(dǎo)航信息，使導(dǎo)航動(dòng)態(tài)的發(fā)生變化，而不是去修改對(duì)應(yīng)的文件里的導(dǎo)航信息的源代碼。

3.1 數(shù)據(jù)庫設(shè)計(jì)

在SQL Server 2008數(shù)據(jù)庫中建立StuDormManager.mdf數(shù)據(jù)庫文件，在該數(shù)據(jù)庫中建立數(shù)據(jù)表文件SDManageNavigate，其對(duì)應(yīng)表的結(jié)構(gòu)如表1，其中ParentID為分類號(hào)，用來標(biāo)識(shí)當(dāng)前分類組的唯一標(biāo)識(shí)，當(dāng) ParentId為0時(shí)，表示該分類為頂層；當(dāng)ParentId值為大于0時(shí)，表示歸屬于對(duì)應(yīng)的分類，從而形成一個(gè)具有層次結(jié)構(gòu)的數(shù)據(jù)源，構(gòu)造數(shù)據(jù)表文件SDManageNavigate如圖4所示。

表1 SDManageNavigate表結(jié)構(gòu)

[序號(hào)＼&字段名＼&數(shù)據(jù)類型＼&備注＼&1＼&Id＼&Int（自動(dòng)編號(hào)）＼&主鍵＼&2＼&Text＼&Nvarchar（50）＼&導(dǎo)航文字＼&3＼&ParentId＼&Int＼&父類Id＼&4＼&NavigateUrl＼&Nvarchar（50）＼&導(dǎo)航地址＼&]

圖4 SDManageNavigate表數(shù)據(jù)

圖5 分類導(dǎo)航的界面

3.2 代碼實(shí)現(xiàn)

在對(duì)應(yīng)Treeview頁面的.cs代碼中，定義全局的數(shù)據(jù)集對(duì)象DSdata，再自定義一個(gè)方法CreateTree，該方法的主要功能是將數(shù)據(jù)庫中的數(shù)據(jù)填充到TreeView控件中，實(shí)現(xiàn)的過程是從根節(jié)點(diǎn)開始遞歸調(diào)用填充TreeView控件。

protected DataSet DSdata； //DSdata為存儲(chǔ)建樹數(shù)據(jù)信息的數(shù)據(jù)集

public void CreateTree（TreeNodeCollection Nodeds， string parentId） {

TreeNode NewNode；

//用父節(jié)點(diǎn)進(jìn)行篩選數(shù)據(jù)集中信息

DataRow[] rows = DSdata.Tables[“Navigate”].Select（"parentId='" + parentId + "'"）；

foreach （DataRow row in rows） {

//設(shè)置父節(jié)點(diǎn)

NewNode = new TreeNode（row["Text"].ToString（），

row["Id"].ToString（）， ""， row["NavigateUrl"].ToString（）， ""）；

Nodeds.Add（NewNode）；

//添加子節(jié)點(diǎn)，遞歸調(diào)用

CreateTree（NewNode.ChildNodes， row["Id"].ToString（））； }

在頁面加載事件Page_Load里編寫如下代碼。

//通過配置文件Web.Config的ConnectionStrings節(jié)點(diǎn)獲取數(shù)據(jù)連接語句，并創(chuàng)建數(shù)據(jù)庫連接對(duì)象

SqlConnection sqlconn = new SqlConnection（ConfigurationManager.ConnectionStrings["SDMConnetionString"].ToString（））；

//通過數(shù)據(jù)適配器SqlDataAdapter，獲取數(shù)據(jù)表SDManageNavigate里的數(shù)據(jù)，并通過Fill方法填充到數(shù)據(jù)集DSdata中，給其表名為Navigate

SqlDataAdapter SDAdapter = new SqlDataAdapter（"select * from SDManageNavigate "， sqlconn）；

DSdata = new DataSet（）；

SDAdapter.Fill（DSdata， "Navigate"）；

// CreateTree方法綁定TreeView控件，TreeView控件的Id為TreeViewNavigate

CreateTree（TreeViewNavigate.Nodes， "0"）；

4 結(jié)束語

本文在Visual Studio 2010 環(huán)境下，以學(xué)生宿舍管理系統(tǒng)分類導(dǎo)航為例，介紹幾種設(shè)置TreeView實(shí)現(xiàn)分類導(dǎo)航的方法，其中動(dòng)態(tài)方式即Treeview控件動(dòng)態(tài)綁定到SQL Server 數(shù)據(jù)表方式，該方式比設(shè)計(jì)方式即添加TreeView控件的節(jié)點(diǎn)更具有靈活性[4]，我們可以設(shè)計(jì)開發(fā)導(dǎo)航欄分類的管理頁面，在該頁面中根據(jù)需求，動(dòng)態(tài)修改導(dǎo)航欄信息，而不需要修改對(duì)應(yīng)文件的源代碼。

參考文獻(xiàn)：

[1] 沈士根， 汪承焱， 許小東. Web程序設(shè)計(jì)：ASP.NET實(shí)用網(wǎng)站開發(fā)[M]. 北京： 清華大學(xué)出版社， 2009， 5.

[2] 明日科技. Asp.net從入門到精通[M]. 北京： 清華大學(xué)出版社， 2014.

[3] 韓小祥. 數(shù)據(jù)綁定技術(shù)在TreeView控件中的應(yīng)用[J]. 現(xiàn)代計(jì)算機(jī)， 2013（1）： 42-44.

[4] 胡海斌. 動(dòng)態(tài)綁定TreeView控件實(shí)現(xiàn)網(wǎng)站分類導(dǎo)航[J]. 現(xiàn)代計(jì)算機(jī)， 2014（8）： 65-68.