TreeView學習
| 1．什麼是 TreeView? TreeView 是一個 ASP.NET 伺服器控件，可以生成用于顯示分層資料的使用者界面 2．适用的資料結構： 适用 分層的資料集、檔案夾視圖以及其他類似的資料結構。 3 ．如何實作 TreeView? (1) 通過聲明的方式建立 (2) 用戶端或伺服器上通過程式設計以多種方式來實作 4 ． TreeView 建立方法： (1) 手動建立 (2) 使用 vs.net 中的 TreeView Editor 建立 5 ． TreeView 元素 TreeView 定義一個 TreeView TreeNodeType 定義一個節點類型，适用 TreeView 中的一個或一組節點 TreeNode 在 TreeView 中建立一個節點 注： TreeView 是 TreeNode 和 TreeNodeType 的容器 這些元素共同定義了數視圖的結構、布局、 外 觀。 TreeView 不能包含這三種元素之外的任何 HTML 元素 6 ． 編寫簡單的 TreeView (1). 建立一個 web application, 命名為： webcontrols (2). 建立一個空頁面 (3). 添加命名空間引用，即添加 “ <%@ import namespace="Microsoft.Web.UI.WebControls" %> ” (4). 添加 @ Register 指令 即添加： <%@ Register TagPrefix="mytree" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls,Version=1.0.2.226,Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> (5). 添加文檔結構 <HTML> <HEAD></HEAD> <BODY></BODY> </HTML> (6). 添加 form 所有 WebControl 元素必須在一個 FORM 元素中建立 <BODY> <FORM runat="server"></FORM> </BODY> (7). 添加一個 TreeView 元素。 <BODY> <FORM runat="server"> <mytree:treeview runat="server"></mytree:treeview> </FORM> </BODY> (8). 向 TreeView 添加一個 TreeNode 。 <mytree:treeview runat="server"> <mytree:treenode text=" 節點一 "> </mytree:treenode> </mytree:treeview> (9). 添加第二個 TreeNode 。 <mytree:treeview runat="server"> <mytree:treenode text=" 節點一 "> <mytree:treenode text=" 節點二 "> </mytree:treenode> </mytree:treenode> </mytree:treeview> 7． 資料綁定 TreeView 也支援資料綁定，是以可以生成動态的内容，下面的示例顯示的 TreeView 與前一個示例類似，但沒有使用靜态内容，而是使用了可擴充标記語言 (XML) 檔案來提供 UI 的資料源 <booktree:treeview runat="server" AutoPostBack="true"> <booktree:treenode Text="book" AutoPostBack=true " Expanded="true" TreeNodeSrc="http:// EventArgs/webcontrols/treeview/book.xml"> </booktree:treenode> </booktree:treeview> book.xml 檔案包含以下内容： <TREENODES> <treenode Text="CSharp"> <treenode Text="Deep inside Csharp"/> <treenode Text="Advanced Csharp"/> <treenode Text="Extend Csharp"/> </treenode> <treenode Text="VBdotNet" > <treenode Text="vb.net leader"/> <treenode Text="From vb to vb.net"/> <treenode Text="Dotnet with VB.net"/> </treenode> </TREENODES> 8 ．用 XML 和 SQL Server 進行資料綁定 WebControls 元素也可以使用其他 XML 資料提供程式，如下所示： <ie:treenode Text="root" type="tree" Expanded="true" TreeNodeSrc="http://EventArgs/[email protected]=1" /> 該示例使用了一種更進階的技術。 TreeNodeSrc 屬性被設定為一個 URL ，後者執行 Microsoft SQL Server(tm) 資料庫上的一個存儲過程來動态生成 XML 資料島。 9 ．程式設計 前面給出的示例表明，多數情況下編寫一個功能完備的 UI 元素不需要任何程式設計工作。本節簡要介紹一些可用于 TreeView 的簡單的腳本編寫技術。 TreeView 事件 通過将 AutoPostBack 屬性設定為 true 可以将使用者互動産生的事件導向伺服器。同時處理進階浏覽器和低級浏覽器事件時應該使用伺服器端腳本，因為低級頁面内容中沒有使用 Internet Explorer 5.5 或更高版本中所使用的豐富的 DHTML 行為。 對于包含 TreeView 的 Web 頁面，使用者的主要互動是展開和折疊樹中的節點來浏覽内容。下面的示例代碼顯示了如何使用 C# 在 Web 窗體中處理 onexpand 、 oncollapse 和 onselectedindexchange 事件。 <script language="C#" runat="server"> void Expand(object sender, TreeViewClickEventArgs e) { mylabel.InnerText += " 已展開 ( 節點索引 = " + e.Node.ToString() + ")"; } void Collapse(object sender, TreeViewClickEventArgs e) { mylabel.InnerText += " 已折疊 ( 節點索引 = " + e.Node.ToString() + ")"; } void SelectChange(Object sender, TreeViewSelectEventArgs e) { mylabel.InnerText += " 已選中 " + e.NewNode.ToString() + " ( 舊節點 索引 =" + e.OldNode.ToString()+")" ; } </script> 在此腳本中，需要具有一個 id 為 _label 的元素。 <div id=_label runat="server">Event Log: </div> 注意：此标記必須放在 TreeView 使用的 FORM 元素内。 可以通過程式設計或使用 TreeView 的屬性将 C# 腳本中的函數加入到事件中，如下所示： <mytree:treeview onexpand="Expand" oncollapse="Collapse" onselectedindexchanged="SelectChange" autopostback="true" runat="server"> </mytree:treeview> 進行 TreeView 程式設計時經常要使用 onexpand 和 oncollapse 事件。在本示例中，每次節點展開或折疊時，腳本都将添加到 div 元素的 innerText 中。 伺服器端包含 由于 WebControls 是用 ASP.NET 建立的，是以也支援伺服器端“包含”。下面的示例顯示了其實作方法。 <mytree:treeview runat="server"> <!-- #Include file="nodes.txt" --> </mytree:treeview> 前面的示例使用了 nodes.txt 檔案來填充一個 TreeView ，下面我們使用包含檔案來填充 TreeView 的兩個單獨的 TreeNode 分支。 <mytree:treeview runat="server"> <mytree:treenode Text=" 書籍 " > <!-- #Include file="Books.txt" --> </mytree:treenode> <mytree:treenode Text=" 雜志 " > <!-- #Include file="magazines.txt" --> </mytree:treenode> </mytree:treeview> 與 XML 資料綁定的命名空間字首規則不同，包含檔案的内容中的元素必須使用與其父元素相同的标記字首。是以， books.txt 和 magazines.txt 檔案的内容應使用 mytree 标記字首。 |
![Centos 7 Apache配置虛拟主機[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)