【ASP.NET 进阶】TreeView控件学习

2019-11-17 01:25:43

字体：大中小

来源：转载

供稿：网友

【asp.net 进阶】TreeView控件学习

这几天上班没事做，也不好打酱油，学点没接触过的新东西吧，基本了解了下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

上一篇：自由了-和过去说再见

下一篇：博文收录