您的位置：首页 > 产品设计 > UI/UE

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

2017-04-17 17:00 661 查看

　　tree组件是一种树形组件，可以通过垂直形式一级级展开数据。tree组件往往用于数据或目录的导航。我们讲解easyui框架时所使用的开发工具Netbean中，左侧“项目”、“文件”、“服务”等栏目，使用的便是树形组件。easyui框架中的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元素中再建立
元素，这样就又建立了孙节点的框架，然后在孙节点框架内再次通过li元素构造孙节点。事实上，tree组件的构造过程是一个迭代的过程。

　　tree组件里的每个节点都包含下列属性（是节点属性，而非tree组件属性）：

　　id：节点id；

　　text：节点的文本标题；

　　states：节点状态，表示处于展开或是收缩状态。有“open”和“closed”两种值，默认为“open”；

　　checked：节点是否被选中；

　　attributes：自定义额外的属性；

　　children：子节点。以json数组的形式建立子节点。

　　来看一下tree组件的属性。


属性名称	属性值类型	属性默认值	描述
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属性为false，）第二幅图增加了复选框（checkbox为true）,第三幅图增加了连接线（lines为true）。所以根据上图我们能很清楚看到checkbox和lines属性的用途。

　　cascadeCheck为true时，我们选中了父节点，其下属的子节点也一并选中。

　　onlyLeafCheck指只有叶节点才显示复选框。

　　formatter属性用于解析每个节点的文本标题。它的属性值是方法，参数是待解析的节点。

　　loader属性用于解析加载从远程服务器上获取的数据，用法与传统的$.ajax类似，属性也是方法。

　　loadFilter属性用于对数据的过滤。属性值是方法。

　　关于formatter、loader、loadFilter三个属性，与远程动态获取数据一起在《研究EasyUI系统—Tree组件（高级属性和用法）》一文讲述。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： easyui

相关文章推荐

新的分享

章节导航