這幾天上班沒事做,也不好打醬油,學點沒接觸過的新東西吧,基本了解了下TreeView控件。
TreeView 控件用于在樹結構中顯示分層數據,例如目錄或文件目錄等。
下面看代碼吧:
1.效果圖
2.靜態數據方式(即在頁面上使用標簽<asp:TreeNode>)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeViewTest.aspx.cs" Inherits="Yc_TestS.TreeViewTest" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>TreeView</title></head><body> <form id="form1" runat="server"> <div> <asp:TreeView ID="treeT" runat="server"> <Nodes> <asp:TreeNode NavigateUrl="#" Text="城市" Expanded="True"> <asp:TreeNode NavigateUrl="#" Text="北京市"></asp:TreeNode> <asp:TreeNode NavigateUrl="#" Text="上海市"></asp:TreeNode> <asp:TreeNode NavigateUrl="#" Text="天津市"></asp:TreeNode> <asp:TreeNode NavigateUrl="#" Text="重慶市"></asp:TreeNode> <asp:TreeNode NavigateUrl="#" Text="湖北省"> <asp:TreeNode NavigateUrl="#" Text="武漢市"></asp:TreeNode> <asp:TreeNode NavigateUrl="#" Text="黃岡市"></asp:TreeNode> <asp:TreeNode NavigateUrl="#" Text="荊州市"></asp:TreeNode> <asp:TreeNode NavigateUrl="#" Text="武穴市"></asp:TreeNode> <asp:TreeNode NavigateUrl="#" Text="十堰市"></asp:TreeNode> <asp:TreeNode NavigateUrl="#" Text="黃石市"></asp:TreeNode> </asp:TreeNode> <asp:TreeNode NavigateUrl="#" Text="河北省"> <asp:TreeNode NavigateUrl="#" Text="石家莊市"></asp:TreeNode> <asp:TreeNode NavigateUrl="#" Text="唐山市"></asp:TreeNode> </asp:TreeNode> <asp:TreeNode NavigateUrl="#" Text="山西省"> <asp:TreeNode NavigateUrl="#" Text="太原市"></asp:TreeNode> <asp:TreeNode NavigateUrl="#" Text="大同市"></asp:TreeNode> </asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView> </div> </form></body></html>TreeViewTest.aspx
3.前臺數據源綁定方式
a.xml數據
<?xml version="1.0" encoding="utf-8" ?><Area iAreaID ="0" cAreaName="城市"> <PRovince iAreaID ="1" cAreaName="北京市"/> <Province iAreaID ="2" cAreaName="上海市"/> <Province iAreaID ="3" cAreaName="天津市"/> <Province iAreaID ="4" cAreaName="重慶市"/> <Province iAreaID ="5" cAreaName="湖北省"> <City iAreaID ="51" cAreaName="武漢市"/> <City iAreaID ="52" cAreaName="黃岡市" /> <City iAreaID ="53" cAreaName="荊州市"/> <City iAreaID ="54" cAreaName="武穴市" /> <City iAreaID ="55" cAreaName="十堰市"/> <City iAreaID ="56" cAreaName="黃石市" /> </Province> <Province iAreaID ="6" cAreaName="河北省"> <City iAreaID ="61" cAreaName="石家莊市"/> <City iAreaID ="62" cAreaName="唐山市" /> </Province> <Province iAreaID ="7" cAreaName="山西省"> <City iAreaID ="71" cAreaName="太原市" /> <City iAreaID ="72" cAreaName="大同市" /> </Province></Area>Area.xml
b.前臺頁面(這里綁定了Xml的數據源)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeViewTest.aspx.cs" Inherits="Yc_TestS.TreeViewTest" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>TreeView</title></head><body> <form id="form1" runat="server"> <div> <%--TreeView控件的DataSourceID屬性指定數據源控件源ID。--%> <asp:TreeView ID="treeT" runat="server" DataSourceID="XmlDataSource1"> </asp:TreeView> <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Xml/Area.xml"> </asp:XmlDataSource> </div> </form></body></html>TreeViewTest.aspx
c.后臺代碼
using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.Security;using System.Data;using Yc_TestS.BaseClass;namespace Yc_TestS{ public partial class TreeViewTest : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { /** * TreeNodeBinding類在TreeView控件中定義數據項與該數據項綁定到的節點之間的關系。 * 該類的DataMember屬性指定在節點顯示的數據源對應XML的節點。 * ValueField屬性對應TreeNode對象的Value屬性。 * TreeNodeBinding類的Text屬性指定向用戶顯示的文本, 如果該屬性沒有指定,則默認與ValueField屬性相同。 * */ this.treeT.ShowLines = false;//顯示連接子節點和父節點之間的線條 TreeNodeBinding Area = new TreeNodeBinding(); Area.DataMember = "Area";//指定綁定的成員 Area.ValueField = "cAreaName";//取值的字段 this.treeT.DataBindings.Add(Area); TreeNodeBinding Province = new TreeNodeBinding(); Province.DataMember = "Province";//添加與"省份"綁定 Province.ValueField = "cAreaName"; this.treeT.DataBindings.Add(Province); TreeNodeBinding City = new TreeNodeBinding(); City.DataMember = "City";//添加與"城市"綁定 City.ValueField = "cAreaName"; this.treeT.DataBindings.Add(City); } }}TreeViewTest.aspx.cs
4.后臺數據庫數據填充方式
a.數據庫數據
b.前臺頁面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeViewTest.aspx.cs" Inherits="Yc_TestS.TreeViewTest" %><!DOCTYPE html PUBLIC "-//W3C//DTD X
新聞熱點
疑難解答