JQuery-zTree.js使用范例

JQuery-zTree.js使用范例

实现Tree树的插件很多，比如常见的UI：Layui、ElementUI、iView … 。这里我们介绍一个小巧的构建Tree树的插件 zTree.js

zTree.js 官网API介绍的灰常详细了，这里我们实战使用zTree.js构建一棵Tree树。

写在前面
下列文章中讲述的实例，需要使用的后端数据是已经查询好的，这里我们不讲怎么查询数据，只讲如何使用现有的数据构建Tree树， 如果你觉得写得好，

起步

使用zTree.js首先需要导入zTree的依赖库文件。

由于我使用了基于boostrap主题的zTree，所以还是建议大家去我的GitHub项目地址下载（CSS是修改过的），

1 2 3 4 5 6 7

<link rel="stylesheet" href="static/lib/bootstrap.min.css"/> <link rel="stylesheet" href="static/lib/css/demo.css"/> <link rel="stylesheet" href="static/lib/css/metroStyle/metroStyle.css"/> <script type="text/javascript" src="static/lib/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="static/lib/jquery.ztree.core.min.js"></script> <script type="text/javascript" src="static/lib/jquery.ztree.excheck.min.js"></script>

 

前端构建一棵tree树

查阅zTree.js官网API，构建一棵Tree树很简单：

一、前端初始化一个div，用来展示Tree树

zTree构建的Tree树是用iframe嵌套的，所以不用担心宽度、高度的问题

1 2 3

<div class="zTreeDemoBackground"> <ul id="tree" class="ztree"></ul> </div>

初始化的div只需要关注id属性即可，因为JS中会根据这个ID找到构建Tree树的位置。

二、javaScript加载Tree树

为了真实点构建Tree树，我这里用一个json文件来模拟请求后端的数据。在同级目录下创建data.json，在其中写入指定格式的JSON字符串：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

[{ "id": 21, "name": "总经理", "pid": 0, "parent": true }, {"id": 26, "name": "技术部", "pid": 0, "parent": true }, { "id": 27, "name": "项目经理", "pid": 26, "parent": false }, {"id": 28, "name": "项目组组长", "pid": 26, "parent": false }, { "id": 29, "name": "安全部", "pid": 0, "parent": true }, {"id": 30, "name": "网络安全部负责人", "pid": 29, "parent": false }, { "id": 31, "name": "项目安全测试员", "pid": 29, "parent": false }]

然后，写JavaScript代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16