【连载】研究EasyUI系统—Tree组件（基本属性和用法）

来源：互联网发布：淘宝怎么看我的店铺编辑：程序博客网时间：2024/05/29 17:42

　　tree组件是一种树形组件，可以通过垂直形式一级级展开数据。tree组件往往用于数据或目录的导航。我们讲解easyui框架时所使用的开发工具Netbean中，左侧“项目”、“文件”、“服务”等栏目，使用的便是树形组件。easyui框架中的tree组件，除了可伸缩/展开外，同样还具备单/复选、拖动、编辑等多种功能，是实际项目开发中经常用到的组件。
　　 tree组件效果图
　　通过上图我们基本可以看到tree组件的架构和效果。下面我们通过较为简单的代码了解一下tree组件的基本用法。

<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />        <script type="text/javascript" src="easyui/jquery.min.js"></script>        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>        <title>treeDemo</title></head><body><div class="container"><ul id="treeContainer" class="easyui-tree"><li><span><a href="#">人力资源部</a></span></li>            <li><span><a href="#">企业信息化部</a></span></li>            <li><!--一级目录总务部，下有二级目录 -->                <span>总务部</span>                <ul><!-- 二级目录 -->                    <li><span><a href="#">法务处</a></span></li>                    <li><span><a href="#">综合处</a></span></li>                    <li><span>后勤保障处</span></li>                </ul>            </li>            <li><!--一级目录硬件事业部，下有二级目录 -->                <span>硬件事业部</span>                <ul><!-- 二级目录 -->                    <li><span>传感器研发中心</span></li>                    <li><span>芯片研发中心</span></li>                </ul>            </li>            <li><!--一级目录软件事业部，下有二级目录 -->                <span>软件事业部</span>                <ul><!-- 二级目录 -->                    <li><span>负载均衡研发中心</span></li>                    <li>                        <span>云计算研发中心</span>                        <ul>                            <li><span>政务云分中心</span></li>                            <li><span>企业云分中心</span></li>                        </ul>                    </li>                </ul><!-- 二级目录 -->            </li><!--一级目录软件事业部-->        </ul>    </div></body></html>

　　上例代码展示了tree组件最基础的用法。代码构造了一个结构固定、功能单一的导航目录。这个导航目录目录深度最深为三级。
　　构造tree组件的第一步就是建立一个样式为”easyui-tree”的ul元素，这是tree组件的最外层框架，然后在该元素中建立各子节点。每一个直接子节点都包含在li元素中，通过元素建立节点标题。开发人员又可以在子节点所在的li元素中再建立

text

states

checked

attributes

children

属性名称属性值类型属性默认值描述 url 字符串 null 远程链接，获取远程服务器数据。 method 字符串 “post” 与http中的method一致。 animate 布尔值 false 节点展开/收缩时是否显示动画。 checkbox 布尔值 false 是否显示复选框。 cascadeCheck 布尔值 true 是否允许选择父节点复选框时一同选中所属子节点复选框。 onlyLeafCheck 布尔值 false值是否只有叶节点才显示复选框。 lines 布尔值 false 是否显示节点间的连接线。 dnd 布尔值 false 是否启用拖拽功能(drop和drag)。 data 数组 null 用于构造节点的数据。 queryParams json {} 获取远端服务器时的额外请求参数。1.4及以上版本支持。 formatter 方法 json loader 解析显示节点的文本标题（节点的text属性）。 loader 方法用于解析加载从远程服务器获取的数据。 loadFilter 方法对数据进行过滤后显示。

　　url和method配合使用，从远程服务器上获取数据并构造组件，method与标准http中的method一致，可以是post或get。关于url、data、queryParams属性以及如何通过远程服务器数据动态构造tree目录，请参阅《研究EasyUI系统—Tree组件（高级属性和用法）》一文。（http://blog.csdn.net/redeg/article/details/70226548）。
　　关于checkbox、cascadeCheck、onlyLeafCheck、lines，我们先看下图。
checkbox、lines属性效果图
　　上图从左至右，第一幅图无复选框和连接线（checkbox和lines属性为false，）第二幅图增加了复选框（checkbox为true）,第三幅图增加了连接线（lines为true）。所以根据上图我们能很清楚看到checkbox和lines属性的用途。
　　cascadeCheck为true时，我们选中了父节点，其下属的子节点也一并选中。
　　onlyLeafCheck指只有叶节点才显示复选框。
　　formatter属性用于解析每个节点的文本标题。它的属性值是方法，参数是待解析的节点。
　　loader属性用于解析加载从远程服务器上获取的数据，用法与传统的$.ajax类似，属性也是方法。
　　loadFilter属性用于对数据的过滤。属性值是方法。
　　关于formatter、loader、loadFilter三个属性，与远程动态获取数据一起在《研究EasyUI系统—Tree组件（高级属性和用法）》一文讲述。

0 0