TreeView控件
在我们的开发中经常会遇到一些有树形层次关系的数据,比如显示无限级分类和显示某个文件下的所有文件及文件夹,对于这些带有树形层次关系的数据的显示用TreeView控件是一个比较不错的选择。TreeView控件支持数据绑定也支持以编程的方式动态添加节点。在TreeView控件中每个节点都是一个TreeNode对象,我们可以通过TreeNode对象的Nodes属性来添加其它的TreeNode对象,使之成为这个TreeNode对象的子节点。
TreeView对象有以下常见属性:
属性名 | 说明 |
CheckedNodes | 获取选中了复选框的节点 |
CollapseImageUrl | 节点折叠时的图象 |
DataSource | 绑定到TreeView控件的数据源 |
DataSourceID | 绑定到TreeView控件的数据源控件的ID |
EnableClientScript | 是否允许客户端处理展开和折叠事件 |
ExpandDepth | 第一次显示时所展开的级数 |
ExpandImageUrl | 节点展开的时的图象 |
NoExpandImageUrl | 不可折叠(即无字节点)的节点的图象 |
PathSeparator | 节点之间的值的路径分隔符 |
SelectedNode | 当前选中的节点 |
SelectedValue | 当前选中的值 |
ShowCheckBoxes | 是否在节点前显示复选框 |
下面是一个简单的例子。我们的数据都是从一个XML文件中读取的,并将它的节点通过代码的方式添加到TreeView控件中。这个XML文件的物理文件名为area.xml,与下面的asp.net在同一个文件夹下,它的内容如下:
1. <?xml version="1.0" encoding="utf-8" ?>
2. <Area>
3. <Province iAreaID ="1" cAreaName="北京市"/>
4. <Province iAreaID ="2" cAreaName="上海市"/>
5. <Province iAreaID ="3" cAreaName="天津市"/>
6. <Province iAreaID ="4" cAreaName="重庆市"/>
7. <Province iAreaID ="5" cAreaName="湖北省">
8. <City iAreaID ="51" cAreaName="武汉市"/>
9. <City iAreaID ="52" cAreaName="黄冈市" />
10. <City iAreaID ="53" cAreaName="荆州市"/>
11. <City iAreaID ="54" cAreaName="武穴市" />
12. <City iAreaID ="55" cAreaName="十堰市"/>
13. <City iAreaID ="56" cAreaName="黄石市" />
14. </Province>
15. <Province iAreaID ="6" cAreaName="河北省">
16. <City iAreaID ="61" cAreaName="石家庄市"/>
17. <City iAreaID ="62" cAreaName="唐山市" />
18. </Province>
19. <Province iAreaID ="7" cAreaName="山西省">
20. <City iAreaID ="71" cAreaName="太原市" />
21. <City iAreaID ="72" cAreaName="大同市" />
22. </Province>
23. </Area>
前台代码:
1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeDemo.aspx.cs" Inherits="TreeDemo" %>
2.
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.
5. <html xmlns="http://www.w3.org/1999/xhtml" >
6. <head runat="server">
7. <title>TreeView控件的例子</title>
8. </head>
9. <body>
10. <form id="form1" runat="server">
11. <div>
12. <asp:TreeView ID="treeAreaList" runat="server" AutoGenerateDataBindings="False" OnSelectedNodeChanged="Tree_SelectedNodeChanged">
13. </asp:TreeView>
14. </div>
15. </form>
16. </body>
17. </html>
后台代码如下:
1. using
2. using
3. using
4. using
5. using
6. using
7. using
8. using
9. using
10. using
11. using
12. using
13.
14. public partial class
15. {
16. XmlDocument xmlDoc;
17. protected void Page_Load(object
18. {
19. if
20. {
21. MakeParentNode();
22. }
23.
24. #region //生成父结点
25. /// <summary>
26. /// 生成
27. /// </summary>
28. protected void
29. {
30. treeAreaList.Nodes.Clear();
31. new
32. "area.xml "));//动态加载XML文档
33. "Area").ChildNodes;//获取Area节点下的所有子结点
34. //定义Area结点
35. new TreeNode();//定义顶级节点
36. "area ";
37. // tn.Value = "-1";
38. true;
39.
40. //添加"区域"父结点
41. null;
42. null;
43. //遍历区域下的所有省和直辖市
44. foreach (XmlNode node in
45. {
46. element = (XmlElement)node;
47. new
48. "cAreaName");//在树控件上显示省或直辖市的名称
49. "iAreaID");//获取节点值
50. true;
51. //将省或直辖市级结点添加到顶级节点中
52. //通过递归将所有子节点添加到节点集合中
53.
54. }
55.
56.
57. #endregion
58.
59. #region //生成子结点
60. /// <summary>
61. /// 递归将子节点添加到当前节点下
62. /// </summary>
63. /// <param name="nodeList">XmlNodeList的实例</param>
64. /// <param name="treeNode">要添加子节点的父节点</param>
65. protected void
66. {
67. null;
68. null;
69. //遍历省级节点下的所有市,市辖区
70. foreach (XmlNode node in
71. {
72. element = (XmlElement)node;
73. new
74. "cAreaName");//在树控件上显示市或市辖区的名称
75. "iAreaID");//这里设置节点Value
76. true;
77. //将子结点添加到父结点下面
78. //递归调用本方法
79. }
80.
81.
82. #endregion
83.
84. protected void Tree_SelectedNodeChanged(object
85. {
86. "节点的值:" + treeAreaList.SelectedNode.Value+"<br/>");
87. "节点的路径:" + treeAreaList.SelectedNode.ValuePath + "<br/>");
88. "节点的数据路径:" + treeAreaList.SelectedNode.DataPath + "<br/>");
89. }
90. }
有关XML文件的读取是一个比较复杂的问题,这里在代码中仅对程序中所使用的代码进行了详尽的注释。这个页面的运行效果如下:

因为我们给TreeView控件的SelectedNodeChanged事件添加了处理方法,所以当我们点击节点时会进行相关的处理,下面是点击黄冈市的效果:

















