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

最新推荐文章于 2019-06-01 15:29:54 发布

我想我是人

最新推荐文章于 2019-06-01 15:29:54 发布

阅读量913

点赞数

分类专栏： Web编程 easyui 文章标签： easyui

本文链接：https://blog.csdn.net/redeg/article/details/70213557

版权

Web编程同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

easyui

26 篇文章 1 订阅

订阅专栏

　　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元素中再建立

元素，这样就又建立了孙节点的框架，然后在孙节点框架内再次通过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属性效果图
　　上图从左至右，第一幅图无复选框和连接线（checkbox和lines属性为false，）第二幅图增加了复选框（checkbox为true）,第三幅图增加了连接线（lines为true）。所以根据上图我们能很清楚看到checkbox和lines属性的用途。
　　cascadeCheck为true时，我们选中了父节点，其下属的子节点也一并选中。
　　onlyLeafCheck指只有叶节点才显示复选框。
　　formatter属性用于解析每个节点的文本标题。它的属性值是方法，参数是待解析的节点。
　　loader属性用于解析加载从远程服务器上获取的数据，用法与传统的$.ajax类似，属性也是方法。
　　loadFilter属性用于对数据的过滤。属性值是方法。
　　关于formatter、loader、loadFilter三个属性，与远程动态获取数据一起在《研究EasyUI系统—Tree组件（高级属性和用法）》一文讲述。

我想我是人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【连载】研究EasyUI系统—Tree组件（基本属性和用法）

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

扫一扫