[原创]FineUI秘密花园（二十三） — 树控件概述

树控件用来展示具有层次结构的数据。前面在介绍下拉列表和表格控件时，我们已经接触到模拟树的下拉列表和模拟树的表格，今天我们就来讲解真正的树控件。

 

标签创建的树控件

我们可以直接在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定义的同名属性。

 

可以回发的树节点

通过一个简单示例来讲解其用法：