①在页面引用zTree的js和css:
<link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>
②代码基本实现
//======html
<div>
<ul id="treeContainer" class="ztree"></ul>
</div>
//================js脚本
var zNodes = [];
$(function(){
loadTree(); //初始化树
getTreeData(); //后台加载数据
});
function loadTree(){
$.fn.zTree.init($.('#treeContainer'),{
data:{
simpleData:{
enable:true
}
},
view:{
nameIsHTML:true,
showLine:true,
dblClick:false
},
callback:{
onClick : nodeEvents //点击节点执行的方法
}
},zNodes);
}
function getTreeData(){
$.ajax({
type:"post",
url:"",
async:true,
data:{},
dataType:"TEXT",
success:function(data)
{
var arr = data.split('\1');
zNodes.push({
id:arr[0], //本身id
pId:arr[1], //父级id
name:'', //显示的名称
data:'', //这个data是传到下面nodeEvent()里面的
open:true //默认节点打开
});
}
});
}
function nodeEvents(e,treeId,treeNode){
var data = treeNode.data;
var zTree = $.fn.zTree.getZTreeObj('treeContainer');
zTree.expandNode(treeNode,true);
}
3.setting 配置详解
1 一. zTree的 setting 配置详解
2
3 var setting = {
4 treeId : "",//zTree 的唯一标识,初始化后,等于 用户定义的 zTree 容器的 id 属性值。
5 //请勿进行初始化 或 修改,属于内部参数。
6 treeObj : null,//zTree 容器的 jQuery 对象,主要功能:便于操作。
7 //请勿进行初始化 或 修改,属于内部参数。
8
9
10 async : {// 是否异步加载 相当于ajax
11 autoParam : [], //可以设置提交时的参数名称,例如 server 只接受 zId : ["id=zId"] ; 默认值空
12 contentType : "application...",
13 dataFilter : null,
14 dataType : "text",
15 enable : false,//设置 zTree 是否开启异步加载模式
16 //默认值:false
17 otherParam : [],//其他参数 ;直接用 JSON 格式制作键值对,例如:{ key1:value1, key2:value2 }
18 type : "post", //请求方式
19 url : "" //路径
20 },
21 callback : {//返回函数; 根据需求选择合适的监听事件 //以下事件默认权威null 事件例子参见第83行
22 beforeAsync : null,//异步加载之前的事件回调函数,zTree 根据返回值确定是否允许进行异步加载
23
24 beforeCheck : null,//勾选 或 取消勾选 之前的事件回调函数,并且根据返回值确定是否允许 勾选 或 取消勾选
25
26 beforeClick : null,//单击节点之前的事件回调函数,并且根据返回值确定是否允许单击操作
27
28 beforeCollapse : null,//父节点折叠之前的事件回调函数,并且根据返回值确定是否允许折叠操作
29
30 beforeDblClick : null,// zTree 上鼠标双击之前的事件回调函数,并且根据返回值确定触发 onDblClick 事件回调函数
31
32 beforeDrag : null,//节点被拖拽之前的事件回调函数,并且根据返回值确定是否允许开启拖拽操作
33
34 beforeDragOpen : null,//拖拽节点移动到折叠状态的父节点后,即将自动展开该父节点之前的事件回调函数,并且根据返回值确定是否允许自动展开操作
35
36 beforeDrop : null,//节点拖拽操作结束之前的事件回调函数,并且根据返回值确定是否允许此拖拽操作
37
38 beforeEditName : null,//节点编辑按钮的 click 事件,并且根据返回值确定是否允许进入名称编辑状态
39
40 beforeExpand : null,//父节点展开之前的事件回调函数,并且根据返回值确定是否允许展开操作
41
42 beforeMouseDown : null,// zTree 上鼠标按键按下之前的事件回调函数,并且根据返回值确定触发 onMouseDown 事件回调函数
43
44 beforeMouseUp : null,//zTree 上鼠标按键松开之前的事件回调函数,并且根据返回值确定触发 onMouseUp 事件回调函数
45
46 beforeRemove : null,//节点被删除之前的事件回调函数,并且根据返回值确定是否允许删除操作
47
48 beforeRename : null,//节点编辑名称结束(Input 失去焦点 或 按下 Enter 键)之后,更新节点名称数据之前的事件回调函数,并且根据返回值确定是否允许更改名称的操作
49
50 beforeRightClick : null,// zTree 上鼠标右键点击之前的事件回调函数,并且根据返回值确定触发 onRightClick 事件回调函数
51
52 onAsyncError : null,//异步加载出现异常错误的事件回调函数
53
54 onAsyncSuccess : null,//异步加载正常结束的事件回调函数
55
56 onCheck : null,// checkbox / radio 被勾选 或 取消勾选的事件回调函数
57
58 onClick : null,//节点被点击的事件回调函数
59
60 onCollapse : null,//节点被折叠的事件回调函数
61
62 onDblClick : null,// zTree 上鼠标双击之后的事件回调函数
63
64 onDrag : null,//节点被拖拽的事件回调函数
65
66 onDragMove : null,//节点被拖拽过程中移动的事件回调函数
67
68 onDrop : null,//节点拖拽操作结束的事件回调函数
69
70 onExpand : null,//节点被展开的事件回调函数
71
72 onMouseDown : null,// zTree 上鼠标按键按下后的事件回调函数
73
74 onMouseUp : null,// zTree 上鼠标按键松开后的事件回调函数
75
76 onNodeCreated : null,//节点生成 DOM 后的事件回调函数
77
78 onRemove : null,//删除节点之后的事件回调函数。
79
80 onRename : null,//节点编辑名称结束之后的事件回调函数。
81
82 onRightClick : null// zTree 上鼠标右键点击之后的事件回调函数
83 },
84 例. 节点勾选或取消事件
85 function zTreeOnCheck(event, treeId, treeNode) {
86 alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
87 };
88 var setting = {
89 callback: {
90 onCheck: zTreeOnCheck
91 }
92 };
93 Function 参数说明
94 参数数据类型说明
95 eventjs event 对象标准的 js event 对象
96 treeId String对应 zTree 的 treeId,便于用户操控
97 treeNode JSON被勾选 或 取消勾选的节点 JSON 数据对象
98
99
100 setting参数配置讲解继续...
101 check : {//设置zTree是否可以被勾选,及勾选的参数配置
102 autoCheckTrigger : false,//设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]
103
104
105 chkboxType : {"Y": "ps", "N": "ps"},//勾选 checkbox 对于父子节点的关联关系。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]
106
107
108 chkStyle : "checkbox",//勾选框类型(checkbox 或 radio)[setting.check.enable = true 时生效]
109
110
111 enable : false,//设置 zTree 的节点上是否显示 checkbox / radio
112 //默认值: false
113
114
115 nocheckInherit : false//当父节点设置 nocheck = true 时,设置子节点是否自动继承 nocheck = true 。[setting.check.enable = true 时生效]
116
117
118 chkDisabledInherit : false//当父节点设置 chkDisabled = true 时,设置子节点是否自动继承 chkDisabled = true 。[setting.check.enable = true 时生效]
119
120
121 radioType : "level"//radio 的分组范围。[setting.check.enable = true 且 setting.check.chkStyle = "radio" 时生效]
122 },
123 data : {//非常重要
124 keep : { //子节点和父节点属性设置 默认值都为false
125 leaf : false,//zTree 的节点叶子节点属性锁,是否始终保持 isParent = false
126
127
128 parent : false//zTree 的节点父节点属性锁,是否始终保持 isParent = true
129 },
130 key : { //节点数据
131 checked : "checked",//zTree 节点数据中保存 check 状态的属性名称。
132
133
134 children : "children",//zTree 节点数据中保存子节点数据的属性名称。
135
136
137 name : "name",//zTree 节点数据保存节点名称的属性名称。
138
139
140 title : "" //zTree 节点数据保存节点提示信息的属性名称。[setting.view.showTitle = true 时生效]
141
142
143 url : "url" //设置 zTree 显示节点时,将 treeNode 的 xUrl 属性当做节点链接的目标 URL
144 },
145 simpleData : {
146 enable : false,//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)
147
148
149 idKey : "id",//节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
150
151
152 pIdKey : "pId",//节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
153
154
155 rootPId : null//用于修正根节点父节点数据,即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]
156 }
157 },
158 edit : {//可以编辑节点 : 增 删 改
159 drag : {
160 autoExpandTrigger : true,//拖拽时父节点自动展开是否触发 onExpand 事件回调函数。[setting.edit.enable = true 时生效]
161
162
163 isCopy : true,//拖拽时, 设置是否允许复制节点。[setting.edit.enable = true 时生效]
164
165
166 isMove : true,//拖拽时, 设置是否允许移动节点。[setting.edit.enable = true 时生效]
167
168
169 prev : true, //拖拽到目标节点时,设置是否允许移动到目标节点前面的操作。[setting.edit.enable = true 时生效]
170
171
172 next : true, //拖拽到目标节点时,设置是否允许移动到目标节点后面的操作。[setting.edit.enable = true 时生效]
173
174
175 inner : true, //拖拽到目标节点时,设置是否允许成为目标节点的子节点。[setting.edit.enable = true 时生效]
176
177
178 borderMax : 10,//拖拽节点成为根节点时的 Tree 内边界范围 (单位:px)。[setting.edit.enable = true 时生效]
179
180
181 borderMin : -5,//拖拽节点成为根节点时的 Tree 外边界范围 (单位:px)。[setting.edit.enable = true 时生效]
182
183
184 minMoveSize : 5,//判定是否拖拽操作的最小位移值 (单位:px)。[setting.edit.enable = true 时生效]
185
186
187 maxShowNodeNum : 5,//拖拽多个兄弟节点时,浮动图层中显示的最大节点数。 多余的节点用...代替。[setting.edit.enable = true 时生效]
188
189
190 autoOpenTime : 500//拖拽时父节点自动展开的延时间隔。 (单位:ms)[setting.edit.enable = true 时生效]
191
192 },
193 editNameSelectAll : false,
194 enable : false,//设置 zTree 是否处于编辑状态,true / false 分别表示 可以 / 不可以 编辑
195
196 removeTitle : "remove",//删除按钮的 Title 辅助信息。[setting.edit.enable = true & setting.edit.showRemoveBtn = true 时生效]
197
198 renameTitle : "rename",//编辑名称按钮的 Title 辅助信息。[setting.edit.enable = true & setting.edit.showRenameBtn = true 时生效]
199
200 showRemoveBtn : true,//设置是否显示删除按钮。[setting.edit.enable = true 时生效]
201
202 showRenameBtn : true//设置是否显示编辑名称按钮。[setting.edit.enable = true 时生效]
203
204 },
205 view : {
206 addDiyDom : null,//用于在节点上固定显示用户自定义控件
207
208 addHoverDom : null,//用于当鼠标移动到节点上时,显示用户自定义控件,显示隐藏状态同 zTree 内部的编辑、删除按钮
209
210 autoCancelSelected : true,//点击节点时,按下 Ctrl 或 Cmd 键是否允许取消选择操作。
211
212 dblClickExpand : true,//双击节点时,是否自动展开父节点的标识
213
214 expandSpeed : "fast",//zTree 节点展开、折叠时的动画速度,设置方法同 JQuery 动画效果中 speed 参数。
215
216 fontCss : {}, //个性化文字样式,只针对 zTree 在节点上显示的<A>对象。
217
218 nameIsHTML : false,//设置 name 属性是否支持 HTML 脚本
219
220 removeHoverDom : null,//用于当鼠标移出节点时,隐藏用户自定义控件,显示隐藏状态同 zTree 内部的编辑、删除按钮
221
222 selectedMulti : true,//设置是否允许同时选中多个节点。
223
224 showIcon : true,//设置 zTree 是否显示节点的图标。
225
226 showLine : true,//设置 zTree 是否显示节点之间的连线。
227
228 showTitle : true,//设置 zTree 是否显示节点的 title 提示信息(即节点 DOM 的 title 属性)。
229
230 txtSelectedEnable : false//设置 zTree 是否允许可以选择 zTree DOM 内的文本。
231 }
232 }