树控件用来展示具有层次结构的数据。前面在介绍下拉列表和表格控件时,我们已经接触到模拟树的下拉列表和模拟树的表格,今天我们就来讲解真正的树控件。
标签创建的树控件
我们可以直接在ASPX页面中创建树控件,非常直观,比如:
1: <ext:Tree ID="Tree1" Width="500px" ShowHeader="true" Title="树控件(内联)" runat="server">
2: <Nodes>
3: <ext:TreeNode Text="中国" Expanded="true">
4: <ext:TreeNode Text="河南省" Expanded="true">
5: <ext:TreeNode Text="驻马店市" NodeID="zhumadian">
6: <ext:TreeNode Text="遂平县" Leaf="false" NodeID="suiping">
7: <ext:TreeNode Text="槐树乡" Leaf="false" NodeID="huaishu">
8: <ext:TreeNode Text="陈庄村" Leaf="true" NodeID="chenzhuang">
9: </ext:TreeNode>
10: </ext:TreeNode>
11: </ext:TreeNode>
12: </ext:TreeNode>
13: <ext:TreeNode Text="漯河市" Leaf="true" NodeID="luohe" />
14: </ext:TreeNode>
15: // 省略其他节点...
16: </ext:TreeNode>
17: </Nodes>
18: </ext:Tree>
显示效果如下图所示:
由此可见,一棵树是由TreeNode节点嵌套而来的,下面就来看下TreeNode有哪些属性:
树节点的常用属性
- Text:树节点文本
- NodeID:树节点ID
- Leaf:是否叶子节点
- Enabled:是否可用
- Expanded:是否展开
- NavigateUrl:链接地址
- Target:链接目标
- Icon:预定义图标
- IconUrl:图标地址
- ToolTip:提示文本
- SingleClickExpand:单击可切换节点的折叠展开状态
由此可见,树节点可以禁用、可以渲染为超链接、可以定义图标、可以设置提示文本。
可以回发的树节点
- EnablePostBack:是否可以回发(单击树节点)
- OnClientClick:点击按钮时需要执行的客户端脚本
- CommandName:命令名称
- CommandArgument:命令参数
可见,树节点也可以作为一个按钮来触发后台事件,只不过这个事件定义是在树控件上。而CommandName和CommandArgument则类似于表格控件中LinkButtonField定义的同名属性。
带复选框的树节点
- Checked:是否选中
- EnableCheckBox:是否启用复选框
- AutoPostBack:是否自动回发(改变复选框状态)
可见,树节点也可以作为一个复选框来触发后台事件。这里AutoPostBack属性就类似于表格控件中CheckBoxField定义的同名属性。
可以回发的树节点
通过一个简单示例来讲解其用法: