在上網瀏覽時有時會看到一些網站在左邊採用類似資源管理員的樹形結構,在樹形結構中單擊,在右邊顯示內容,層次清晰且方便快捷,本文主要介紹ASP.NET伺服器控制項treeview 的使用方法,treeview控制項屬於microsoft webcontrols,在下載和使用過程中本人碰到一些問題,通過反覆實驗,尋找資料,找到一些解決辦法,現把treeview使用心得寫出來,旨在對想在網站中使用樹形結構的朋友有所協助。
一、下載
microsoft webcontrols控制項包括四個組件:MultiPage、TabStrip、Toolbar、treeView,treeview可以到http://msdn.microsoft.com/downloads/samples/internet/ASP_DOT_NET_ServerControls/WebControls/default.asp去下載,下載後得到檔案IEWebControls,只有360KB,安裝後自動在C:\Program Files建立IE Web Controls,執行其下面的bulid.bat,如果安裝後還不能使用可以採用以下方法解決:
1、開啟bulid.bat的內容,查看csc.exe路徑是否正確,一般不能正確使用這可能是原因之一,csc.exe為系統檔案,如果它的路徑與你的電腦不符合,修改後存檔再執行bulid.bat,將得到Microsoft.Web.UI.WebControls.dll和一些檔案夾。
2、查看預設的web網站,一般預設的web網站為C:\Inetpub\wwwroot,如果不是可以通過開啟管理工具à網際網路服務管理員,方法:對預設web網站單擊右鍵à屬性à主目錄,修改主目錄。
3、將C:\Program Files\IE Web Controls\build下runtime檔案夾下所有內容複寫到主目錄\webctrl_client\1_0下,是將iewebcontrols四大控制項的系統檔案複製到預設web網站下。
4、將C:\Program Files\IE Web Controls\build下Microsoft.Web.UI.WebControls.dll檔案複製到主目錄中建立的專案檔夾下\bin中。
通過對以上四個方面的操作,iewebcontrols才能正常使用。
二、添加控制項
開啟Microsoft Visual Studio .NET, 在web工具箱中單擊右鍵,選擇自訂工具箱à.NET架構組件,通過瀏覽添加Microsoft.Web.UI.WebControls.dll檔案,添加後可以在.NET架構組件中選擇命名空間為microsoft.web.ui.webcontrols的treeview。
三、treeview屬性和方法介紹
在表單中添加一個treeview控制項,通過treeview對象的屬性nodes建立所需的樹形結構。
例:建立如下樹形結構
表單中HTML代碼為:
<iewc:treeview id=”treeview1” autoselect=false shoplus=true showlines=true expandlevel=2 runat=server> <iewc:treenode text=”科目” > <iewc:treenode text=”語文” /> <iewc:treenode text=”數學” /> <iewc:treenode text=”英語” /> </iewc:treenode> </iewc:treeview> |
1、autoselect=”false”:當訪問者在treeview控制項中對節點進行定位時,可以使用鍵盤上的箭頭來進行定位。屬性值為“false“,則不允許這樣做。
2、Showplus=”true”:當兩個節點收到一起的時候,你可以顯示一個加號(+),訪問者就知道這個節點可以展開,該屬性值為“true“將使用加號,否則不使用。
3、Showlines=”true”:在一個treeview控制項中的兩個節點之間,可以顯示一些線長,為”true”顯示。
4、Expandlevel=2:用來定義treeview控制項的階層展開的層級數。
5、navigateurl:點擊節點時的跳轉網址
如:
<iewc:treeview id=”treeview2” runat=server> <iewc:treenode text=”喜愛的網站” > <iewc:treenode text=”中國DOTNET俱樂部” navigateurl=”http://www.chinaaspx..com” /> <iewc:treenode text=”國家基礎教育資源網” navigateurl=”htt://www.cbern.gov.cn” /> </iewc:treenode> </iewc:treeview> |
6、index:擷取樹節點在樹節點集合中的位置
7、nodes:擷取分配給樹狀檢視控制項的樹節點集合
8、parent:擷取或設定控制項的父容器
9、selectednode:擷取或設定當前在樹狀檢視控制項中選定的樹節點
10、text:擷取或設定在樹節點標籤中顯示的文本
11、expand:展開樹節點
12、clear:清空樹
13、remove:移除當前樹節點
14、checked:用以指明該樹節點是否處於選中狀態
四、簡單樣本
對左邊樹形結構進行選擇,在右邊表格中查詢顯示結果。
說明:
1、 SelectedIndexChange事件是對樹結構進行選擇時產生的,還有一個觸發條件autopostback=true。
2、 例中資料庫由SQL 2000建立。
代碼如下:
Imports System.Data Imports System.Data.SqlClient Public Class tree1 Inherits System.Web.UI.Page Protected WithEvents Button1 As System.Web.UI.WebControls.Button Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid Protected WithEvents Label1 As System.Web.UI.WebControls.Label Protected WithEvents Label2 As System.Web.UI.WebControls.LabelPrivate Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click Dim strconnection As String = "server=zln\netsdk;uid=sa;pwd=sa;database=english" Dim conn As New SqlConnection(strconnection) conn.Open() Dim sql As String = "select * from zlk where kemu='" & Session("node").ToString & "'" Dim cmd As New SqlCommand(sql, conn) Dim da As SqlDataReader da = cmd.ExecuteReader DataGrid1.DataSource = da DataGrid1.DataBind() End Sub Private Sub TreeView1_SelectedIndexChange(ByVal sender As Object, ByVal e As Microsoft.Web.UI.WebControls.TreeViewSelectEventArgs) Handles TreeView1.SelectedIndexChange Dim ndsel As New Microsoft.Web.UI.WebControls.TreeNode() ndsel = TreeView1.GetNodeFromIndex(TreeView1.SelectedNodeIndex) Session("node") = ndsel.Text End Sub End Class |