19.4使用TreeView控件

于 2011-05-20 13:27:46 发布
阅读量127 收藏
点赞数
分类专栏： ASP.NET 3.5 揭秘(卷1)学习笔记 文章标签： XHTML C C++ C# HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wavaya/article/details/83924040
版权
使用TreeView控件


1、声明式地添加树视图节点
TreeViewDeclare.aspx
[code]
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server">
<Nodes>
<asp:TreeNode Text="Home" NavigateUrl="~/MenuLinkButton.aspx">
<asp:TreeNode Text="Products">
<asp:TreeNode Text="First Product" NavigateUrl="~/Products.aspx" />
<asp:TreeNode Text="Services" NavigateUrl="~/Services.aspx" />
</asp:TreeNode>
<asp:TreeNode Text="Services" NavigateUrl="~/MenuLinkButton.aspx" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</form>
</body>
</html>
[/code]
结果：

2011-5-18 16:04 danny

TreeViewValue.aspx
[code]
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
{
lblMessage.Text = TreeView1.SelectedValue;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
html
{
background-color: Silver;
}
.content
{
float: left;
width: 350px;
height: 500px;
padding: 20px;
margin: 10px;
background-color: White;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<asp:TreeView ID="TreeView1" runat="server" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged">
<Nodes>
<asp:TreeNode Text="Home" Value="Home">
<asp:TreeNode Text="Products">
<asp:TreeNode Text="First Products" Value="FirstProducts" />
<asp:TreeNode Text="Second Products" Value="SecondProducts" />
</asp:TreeNode>
<asp:TreeNode Text="Services">
<asp:TreeNode Text="First Service" Value="FirstService" />
<asp:TreeNode Text="Second Service" Value="SecondService" />
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
<div class="content">
You Selected:
<asp:Label ID="lblMessage" EnableViewState="false" runat="server" />
</div>
</form>
</body>
</html>
[/code]

显示结果：

2011-5-18 16:12 danny

2、在TreeView控件中显示复选框
ShowCheckBoxs属性
All
Leaf
none
Parent
Root

TreeViewCheckBoxes.aspx
[code]
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

protected void btnSubscribe_Click(object sender, EventArgs e)
{
foreach (TreeNode node in TreeView1.CheckedNodes)
bltSubscribed.Items.Add(node.Text);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
Select the Newsgroups which you would like to join:
<br />
<asp:TreeView ID="TreeView1" ShowCheckBoxes="Leaf" runat="server">
<Nodes>
<asp:TreeNode Text="Programming">
<asp:TreeNode Text="ASP.NET" />
<asp:TreeNode Text="JAVA" />
<asp:TreeNode Text="Cold Fusion" />
</asp:TreeNode>
<asp:TreeNode Text="Sports">
<asp:TreeNode Text="Baseball" />
<asp:TreeNode Text="Hockey" />
<asp:TreeNode Text="Football" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
<br />
<asp:Button ID="btnSubscribe" Text="Subscribe" runat="server" OnClick="btnSubscribe_Click" />
<br />
You Selected:
<asp:BulletedList ID="bltSubscribed" EnableViewState="false" runat="server" />
</div>
</form>
</body>
</html>
[/code]

3、绑定到站点地图
P700

4、绑定到XML文件
movies.xml
[code]
<?xml version="1.0" encoding="utf-8" ?>
<movies>
<action>
<StarWars />
<IndependenceDay />
</action>
<horror>
<Jaws />
<NightmareBeforeChristmas/>
</horror>
</movies>
[/code]

TreeViewXML.aspx
[code]
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1">
</asp:TreeView>
</div>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Movies.xml"></asp:XmlDataSource>
</form>
</body>
</html>
[/code]

显示：

2011-5-18 16:35 danny

MoviesComplex.xml
[code]
<?xml version="1.0" encoding="utf-8" ?>
<movies>
<category id="category1" text="Action">
<movie id="movie1" text="Star Wars" />
<movie id="movie2" text="Independence Day"/>

</category>
<category id="category2" text="Horror">
<movie id="movie3" text="Jaws"/>
<movie id="movie4" text="Nightmare Before Christmas"/>
</category>
</movies>
[/code]

TreeViewXMLComplex.aspx
[code]
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="srcMovies">
<DataBindings>
<asp:TreeNodeBinding DataMember="category" TextField="text" ValueField="id" />
<asp:TreeNodeBinding DataMember="movie" TextField="text" ValueField="id" />
</DataBindings>
</asp:TreeView>
</div>
<asp:XmlDataSource ID="srcMovies" runat="server" DataFile="~/MoviesComplex.xml">
</asp:XmlDataSource>
</form>
</body>
</html>
[/code]

显示：

2011-5-18 16:44 danny

5、绑定到数据库数据
不能直接绑定到SqlDataSource和ObjectDataSource
可以创建自定义的SqlHierarchicalDataSource控件，或通过编程方式将TreeView控件绑定到数据库上。
数据库如下：
[code]
id parentid subject
1 NULL How do you use the menu control?
2 NULL What's the TreeView control?
3 1 Re:How do you use the menu control?
4 1 Re:How do you use the menu control?
5 2 RE:What's the TreeView control?
6 5 RE:What's the TreeView control?
NULL NULL NULL
[/code]

TreeViewDatabase.aspx
[code]
<%@ Page Language="C#" %>

<%@ Import Namespace="System.Web.Configuration" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
PopulateTreeView();
}

private void PopulateTreeView()
{
DataTable treeViewData = GetTreeViewData();
AddTopTreeViewNodes(treeViewData);

}
public DataTable GetTreeViewData()
{
string selectCommand = "Select Id,ParentId,Subject From Message";
string conString = WebConfigurationManager.ConnectionStrings["message"].ConnectionString;
SqlDataAdapter dad = new SqlDataAdapter(selectCommand, conString);
DataTable dtblmessage = new DataTable();
dad.Fill(dtblmessage);
return dtblmessage;
}
private void AddTopTreeViewNodes(DataTable treeViewData)
{
DataView view = new DataView(treeViewData);
view.RowFilter = "parentid IS NULL";
foreach (DataRowView row in view)
{
TreeNode newNode = new TreeNode(row["Subject"].ToString(), row["ID"].ToString());
TreeView1.Nodes.Add(newNode);
AddChildTreeViewNodes(treeViewData, newNode);

}

}
private void AddChildTreeViewNodes(DataTable treeViewData, TreeNode parentTreeViewNode)
{
DataView view = new DataView(treeViewData);
view.RowFilter = "parentId=" + parentTreeViewNode.Value;
foreach (DataRowView row in view)
{
TreeNode newNode = new TreeNode(row["Subject"].ToString(), row["id"].ToString());
parentTreeViewNode.ChildNodes.Add(newNode);
AddChildTreeViewNodes(treeViewData, newNode);
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server">
</asp:TreeView>
</div>
</form>
</body>
</html>
[/code]
显示结果：

2011-5-19 9:20 danny

6、使用延时加载和Ajax
TreeView控件提供了一个名为“延时加载(Populate On Demand)"的功能。当Tree节点的PopulateOnDemand属性开启后，直到该节点展开后才会动态的载入并添加其子节点。

无限展开的TreeView控件。
TreeViewPopulateOnDemand.aspx
[code]
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
for (int i = 0; i < 5; i++)
{
TreeNode newNode = new TreeNode();
newNode.Text = String.Format("{0}.{1}", e.Node.Text, i);
newNode.PopulateOnDemand = true;
e.Node.ChildNodes.Add(newNode);
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%=DateTime.Now.ToString("T") %>
<hr />
<asp:TreeView ID="TreeView1" ExpandDepth="0" runat="server" OnTreeNodePopulate="TreeView1_TreeNodePopulate">
<Nodes>
<asp:TreeNode PopulateOnDemand="true" Text="Node 0" />
</Nodes>
</asp:TreeView>
</div>
</form>
</body>
</html>

[/code]
无限展开，结果：



TreeViewDatabaseAjax.aspx
[code]
<%@ Page Language="C#" %>

<%@ Import Namespace="System.Web.Configuration" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
PopulateTopNodes();
}
private void PopulateTopNodes()
{
string selectCommand = "Select Id,ParentId,Subject From Message where parentid is null";
string conString = WebConfigurationManager.ConnectionStrings["message"].ConnectionString;
SqlDataAdapter dad = new SqlDataAdapter(selectCommand, conString);
DataTable dtblmessage = new DataTable();
dad.Fill(dtblmessage);

foreach (DataRow row in dtblmessage.Rows)
{
TreeNode newNode = new TreeNode(row["subject"].ToString(), row["Id"].ToString());
newNode.PopulateOnDemand = true;
TreeView1.Nodes.Add(newNode);
}
}

protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
string selectCommand = "Select Id,ParentId,Subject From Message where parentid=@parentid";
string conString = WebConfigurationManager.ConnectionStrings["message"].ConnectionString;
SqlDataAdapter dad = new SqlDataAdapter(selectCommand, conString);
dad.SelectCommand.Parameters.AddWithValue("@parentid", e.Node.Value);
DataTable dtblmessage = new DataTable();
dad.Fill(dtblmessage);

foreach (DataRow row in dtblmessage.Rows)
{
TreeNode newNode = new TreeNode(row["subject"].ToString(), row["Id"].ToString());
newNode.PopulateOnDemand = true;
e.Node.ChildNodes.Add(newNode);
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%=DateTime.Now.ToString("T") %>
<hr />
<asp:TreeView ID="TreeView1" ExpandDepth="0" runat="server" OnTreeNodePopulate="TreeView1_TreeNodePopulate">
</asp:TreeView>
</div>
</form>
</body>
</html>
[/code]

2011-5-19 9:42 danny

7、定制TreeView控件
修改外观
CollapseImageToolTip 用于指定表示折叠节点的图片的Title属性
CollapseImageUrl 用于指定用在表示折叠节点的图片的URL
ExpandDepth
ExpandImageToolTip
ExpandImageUrl
ImageSet 用于指定应用到Treeview控件上的一组图片
LineImagesFolder 指定TreeView节点间连接线图片的目录
MaxDataBindDepth 指定绑定到数据源时允许的最大TreeView层次数
NodeIdent 指定子节点显示时缩进的像素数
NodeWrap 指定是否允许节点内的文字折行
NoExpandImageUrl 指定应用到NoExpand图片上的URL
ShowCheckBoxes 指示节点是否显示复选框 All,Leaf,none,parent,root
ShowLines 指示是否在节点间显示连接线
SkipLinkText 指定跳过TreeView控件内容时所显示的文字
Target 指定TreeView控件导航时开启URL的窗口名称

TreeViewImageSet.aspx
[code]
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:TreeView ID="TreeView1" runat="server" ImageSet="XPFileExplorer">
<Nodes>
<asp:TreeNode Text="Home" Value="Home">
<asp:TreeNode Text="Products" Value="Products">
<asp:TreeNode Text="First Product" Value="First Product"></asp:TreeNode>
<asp:TreeNode Text="Second Product" Value="Second Product"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Services" Value="Services">
<asp:TreeNode Text="First Service" Value="First Service"></asp:TreeNode>
<asp:TreeNode Text="Second Service" Value="Second Service"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
<div>
</div>
</form>
</body>
</html>
[/code]

显示：

2011-5-19 10:08 danny

TreeNode也有外观属性
Checked
Expanded
ImageToolTip
ImageUrl
NavigateUrl
SelectAction 指定点击树节点时触发的动作，Expand,None,Select ,SelectExpand
ShowCheckBox
Target
ToolTip 指定当前树节点的title属性

Style对象
HoverNodeStyle
LeafNodeStyle
NodeStyle
ParentNodeStyle
RootNodeStyle
SelectedNodeStyle

TreeViewStyles.aspx
[code]
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.treeNode
{
color: Blue;
font: 14px Arail,Sans-Serif;
}
.rootNode
{
font-size: 18px;
width: 100%;
border-bottom: Solid 1px black;
}
.leafNode
{
border: Dotted 2px black;
padding: 4px;
background-color: #eeeeee;
font-weight: bold;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" NodeStyle-CssClass="treeNode" RootNodeStyle-CssClass="rootNode"
LeafNodeStyle-CssClass="leafNode" runat="server">
<Nodes>
<asp:TreeNode Text="Home" Value="Home">
<asp:TreeNode Text="Products" Value="Products">
<asp:TreeNode Text="First Product" Value="First Product"></asp:TreeNode>
<asp:TreeNode Text="Second Product" Value="Second Product"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Services" Value="Services">
<asp:TreeNode Text="First Service" Value="First Service"></asp:TreeNode>
<asp:TreeNode Text="Second Service" Value="Second Service"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</form>
</body>
</html>
[/code]
显示样式：


按层样式
TreeViewLevelStyle.aspx
[code]
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.nodeLevel1
{
font: 40px Arial,Sans-Serif;
}
.nodeLevel2
{
font: 20px Arial,Sans-Serif;
}
.nodeLevel3
{
font: 10px Arial,Sans-Serif;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:TreeView ID="TreeView1" runat="server">
<LevelStyles>
<asp:TreeNodeStyle CssClass="nodeLevel1" />
<asp:TreeNodeStyle CssClass="nodeLevel2" />
<asp:TreeNodeStyle CssClass="nodeLevel3" />
</LevelStyles>
<Nodes>
<asp:TreeNode Text="Home" Value="Home">
<asp:TreeNode Text="Products" Value="Products">
<asp:TreeNode Text="First Product" Value="First Product"></asp:TreeNode>
<asp:TreeNode Text="Second Product" Value="Second Product"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Services" Value="Services">
<asp:TreeNode Text="First Service" Value="First Service"></asp:TreeNode>
<asp:TreeNode Text="Second Service" Value="Second Service"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
<div>
</div>
</form>
</body>
</html>
[/code]

2011-5-19 10:32 danny
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值