TreeView控件在宿舍管理系統(tǒng)中分類導(dǎo)航的設(shè)計(jì)與應(yīng)用

袁芳

摘要：TreeView控件是以樹(shù)形目錄形式顯示數(shù)據(jù)，并能分層展開(kāi)和收縮各節(jié)點(diǎn)子目錄。該文以學(xué)生宿舍管理系統(tǒng)為例，介紹通過(guò)使用TreeView控件以樹(shù)形目錄的形式添加菜單，連接到不同的功能頁(yè)面的導(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)站來(lái)說(shuō)，可以將頁(yè)面中的導(dǎo)航文字以樹(shù)形目錄的形式來(lái)顯示，這樣不僅可以有效地節(jié)約頁(yè)面，而且大大方便了用戶的遍歷訪問(wèn)站點(diǎn)中的不同頁(yè)面。

在Visual Studio 2010中，TreeView控件的基本功能是將有序的層次化結(jié)構(gòu)數(shù)據(jù)顯示為樹(shù)形結(jié)構(gòu)，該控件可以輕松快捷設(shè)計(jì)樹(shù)形結(jié)構(gòu)導(dǎo)航系統(tǒng)。在Web應(yīng)用開(kāi)發(fā)中，該控件的層次數(shù)據(jù)可以設(shè)計(jì)時(shí)添加，也可以通過(guò)編程操作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窗體后，可通過(guò)拖放的方式將TreeView控件添加到Web頁(yè)的適當(dāng)位置，在Web頁(yè)上就會(huì)顯示如圖1所示的TreeView 控件和“TreeView任務(wù)”快捷菜單?？旖莶藛慰梢栽O(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)屬性，通過(guò)添加節(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屬性，部分代碼如下所示。

……

然后在頁(yè)面上添加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為T(mén)ext屬性值，如圖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)層次化地列出來(lái)，原理與綁定xml文件類似，區(qū)別在于頁(yè)面上添加SiteMapDataSource數(shù)據(jù)源控件，SiteMapDataSource控件不需任何設(shè)置，把TreeView控件的DataSourceID屬性設(shè)為SiteMapDataSource控件的ID值，即可完成站點(diǎn)導(dǎo)航，操作起來(lái)更加便捷 。

圖3 TreeView控件綁定XML文件

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

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

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

在SQL Server 2008數(shù)據(jù)庫(kù)中建立StuDormManager.mdf數(shù)據(jù)庫(kù)文件，在該數(shù)據(jù)庫(kù)中建立數(shù)據(jù)表文件SDManageNavigate，其對(duì)應(yīng)表的結(jié)構(gòu)如表1，其中ParentID為分類號(hào)，用來(lái)標(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頁(yè)面的.cs代碼中，定義全局的數(shù)據(jù)集對(duì)象DSdata，再自定義一個(gè)方法CreateTree，該方法的主要功能是將數(shù)據(jù)庫(kù)中的數(shù)據(jù)填充到TreeView控件中，實(shí)現(xiàn)的過(guò)程是從根節(jié)點(diǎn)開(kāi)始遞歸調(diào)用填充TreeView控件。

protected DataSet DSdata； //DSdata為存儲(chǔ)建樹(shù)數(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（））； }

在頁(yè)面加載事件Page_Load里編寫(xiě)如下代碼。

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

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

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

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

DSdata = new DataSet（）；

SDAdapter.Fill（DSdata， "Navigate"）；

// CreateTree方法綁定TreeView控件，TreeView控件的Id為T(mén)reeViewNavigate

CreateTree（TreeViewNavigate.Nodes， "0"）；

4 結(jié)束語(yǔ)

本文在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ì)開(kāi)發(fā)導(dǎo)航欄分類的管理頁(yè)面，在該頁(yè)面中根據(jù)需求，動(dòng)態(tài)修改導(dǎo)航欄信息，而不需要修改對(duì)應(yīng)文件的源代碼。

參考文獻(xiàn)：

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

[2] 明日科技. Asp.net從入門(mén)到精通[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.