Ztree

工作的时候碰到ztree，特此记录重新学一遍。

1.第一棵树

1.1下载框架

先下载ztree，链接：https://gitee.com/zTree/zTree_v3.git

1.2引入文件

创建新项目，引入必要文件

• CSS文件夹，多个样式选择，我下面有展示
• jquery.ztree.core.js
• jquery-1.4.4.min.js
• jquery-ztree.exedit-3.0.js （可选，用于编辑树）
• jquery-ztree.excheck-3.0.js（可选，用于单选框）
  

	<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" />
	<script type="text/javascript" src="js/jquery-1.4.4.min.js">script>
	<script type="text/javascript" src="js/jquery.ztree.core.js">script>
1
2
3

1.3复制代码

创建 zTree Dom 容器（注意class=“ztree””）

<div>
	<ul id="treeDemo" class="ztree">ul>
div>
1
2
3

初始化 zTree

<script type="text/javascript">
        var setting = { };
        var zNodes =[
			name: "父节点1 - 展开",
			// open：表示默认是打开还是关闭
			open: false,
                children: [
                    { name:"父节点11 - 折叠",
                        children: [
                            { name:"叶子节点111"},
                            { name:"叶子节点112"},
                            { name:"叶子节点113"},
                            { name:"叶子节点114"}
                        ]},
                    { name:"父节点12 - 折叠",
                        children: [
                            { name:"叶子节点121"},
                            { name:"叶子节点122"},
                            { name:"叶子节点123"},
                            { name:"叶子节点124"}
                        ]},
                    { name:"没有子节点的父节点", isParent:true}
                ]
            } 
        ];
 
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
script>
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

2.setting配置文件

树初始化后，各项功能的开关和配置依赖于setting参数设置。
查看链接：https://treejs.cn/v3/api.php

我这里就介绍几种我这次用到的

//关于 zTree 视图方面的配置在这里
view: {
	addDiyDom: null, //用于在节点上固定显示用户自定义控件,其实就是自定义个函数，让每个控件初始化都走一遍
	dblClickExpand: true, //双击节点时，是否自动展开父节点的标识，默认值：true
	showIcon: true, //设置 zTree 是否显示节点的图标，默认值：true
	selectedMulti: true, //设置是否允许同时选中多个节点，默认值：true
	fontCss: {color:"red"}, //个性化文字样式，只针对 zTree 在节点上显示的对象，默认值：{}
}

//关于 zTree 数据的配置在这里。
data: {
	//简单数据模式
	simpleData: {
		enable: true, //是否开启
		idKey: "id", //节点数据中保存唯一标识的属性名称，默认值：“id”
		pidKey: "pid", //节点数据中保存其父节点唯一标识的属性名称，默认值：“pid”
		rootKey: null //用于修正根节点父节点数据，即 pIdKey 指定的属性值，默认值：null
	}
}

//关于 zTree 回调 的配置在这里。
callBack: {
	onClick: this.onClick, //用于捕获节点被点击的事件回调函数
	onDblClick: this.ondblclick, //用于捕获 zTree 上鼠标双击之后的事件回调函数
	beforeDrag: this.beforeDrag, //用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作
	onDrop: this.onDrop, //用于捕获节点拖拽操作结束的事件回调函数
	onDragMove: this.onDragMove, //用于捕获节点被拖拽过程中移动的事件回调函数
	onMouseUp: this.onMouseUp, //用于捕获 zTree 上鼠标按键松开后的事件回调函数
}

//关于 zTree 单选框 / 复选框 的配置在这里。
checked: {
	enable: true, //设置 zTree 的节点上是否显示 checkbox / radio,默认值：false
}

//关于 zTree 编辑方面的配置在这里。这个功能得引入jquery.ztree.exedit.js
edit: {
	//拖拽功能
	drag: {
		prev: true, //拖拽到目标节点时，设置是否允许移动到目标节点前面的操作，默认值true
		next: true, //拖拽到目标节点时，设置是否允许移动到目标节点后面的操作，默认值true
		inner: true, //拖拽到目标节点时，设置是否允许成为目标节点的子节点，默认值true
	},
	enable: true, //设置 zTree 是否处于编辑状态,默认值：false
	showRemoveBtn: true, //设置是否显示删除按钮,默认值：true
	showRenameBtn: true, //设置是否显示编辑名称按钮,默认值：true
}
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

3.子标题

正文

在这里插入代码片
1

4.子标题

正文

在这里插入代码片
1

5.子标题

正文

在这里插入代码片
1