一、引入资源
下载并引入ztree的相关js，css和img等。http://www.treejs.cn/v3/api.php
ztree的核心代码jquery.ztree.core.js
ztree关于选中的代码jquery.ztree.excheck.js（如果有复选框引入）
ztree关于是否可编辑的代码jquery.exedit.js（允许修改节点时引入）
二、初始化ztree
1、页面中创建tree需要显示的载体dom
2、设置ztree的基本配置参数 setting
1 // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解） 2 var setting = { 3 //是否允许编辑节点 4 edit: { 5 enable: true, 6 editNameSelectAll: true, 7 showRemoveBtn: true, 8 removeTitle: "删除节点", 9 showRenameBtn: true, 10 renameTitle: "编辑节点" 11 }, 12 data: { 13 simpleData: { 14 enable: true 15 } 16 }, 17 callback: { 18 beforeRemove: beforeRemove, //移除前 19 beforeRename: beforeRename, //重命名前 20 //onRemove: onRemove, 21 onRename: onRename, 22 beforeDrag:beforeDrag, 23 onClick: zTreeOnClick //注册节点的点击事件 24 }, 25 view: { 26 selectedMulti: false, 27 addHoverDom: addHoverDom, //移入节点显示编辑按钮 28 removeHoverDom: removeHoverDom //移入节点显示编辑按钮 29 }, 30 };
3、获取节点初始数据，并初始化ztree
ztree支持的数据结构，可查看官网文档。
1 //获取部门tree数据 2 function loadTree() { 3 $.ajax({ 4 type: 'POST', 5 contentType: '', 6 url: "", 7 data: {}, 8 timeout: 1000, //超时时间设置，单位毫秒 9 dataType: 'json', 10 success: function (res) { 11 zNodes = []; //初始化ztree 12 for (var i = 0; i < res.length; i++) { 13 var data = res[i] 14 zNodes.push({ 15 'id': data.id, 16 'pId': data.pId, 17 'name': data.name, 18 'open': false 19 }); 20 } 21 zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); //初始化ztree 22 } 23 }) 24 25 } 26 27 $(document).ready(function () { 28 loadTree() 29 });
三、配置增删改方法
添加：
在节点下添加新节点信息
1、首先在setting的callback中，设置addHoverDom方法，鼠标移入节点时，显示编辑按钮；在setting的edit中也需要设置显示编辑按钮。
2、
1 //鼠标移入节点，显示编辑按钮 2 function addHoverDom(treeId, treeNode) { //treeNode是当前hover的节点信息 3 var sObj = $("#" + treeNode.tId + "_span"); 4 if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return; 5 var addStr = "<span class='button add' id='addBtn_" + treeNode.tId 6 + "' title='添加节点' οnfοcus='this.blur();'></span>"; 7 sObj.after(addStr); 8 var btn = $("#addBtn_" + treeNode.tId); 9 10 //判断该部门下是否有人员，用于删除节点时，当节点下有信息，禁止删除。 11 var data1 = { 12 "id": treeNode.id, 13 "pageNumber": currentPageNumber, 14 "pageSize": currentPageSize 15 }; 16 $.ajax({ 17 type: 'POST', 18 url: "", 19 data: data1, 20 timeout: 1000, //超时时间设置，单位毫秒 21 dataType: 'json', 22 success: function (res) { 23 //console.log(res); 24 if(res.flag == 0){ 25 var datalist = res.data.list; 26 if(datalist.length==0){ 27 hasMember = false; 28 }else{ 29 hasMember = true; 30 } 31 } 32 33 } 34 }); 35 //当点击添加按钮时： 36 if (btn) btn.bind("click", function () { 37 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); 38 console.log(treeNode.id); 39 var name = "新部门" + (newCount++); 40 var newNode; 41 //发送请求保存一个新建的节点，后台返回ID，用返回的ID新增节点 42 var data = { 43 "code": treeNode.id, 44 "name": name 45 }; 46 $.ajax({ 47 type: 'post', 48 url: "", 49 data: data, 50 timeout: 1000, //超时时间设置，单位毫秒 51 dataType: 'json', 52 success: function (res) { 53 console.log(res) 54 if (res.flag == 0 ) { 55 var newId = res.data; 56 //在树节点上增加节点 57 newNode = zTree.addNodes(treeNode, {id: newId, pId: treeNode.id, name: name}); 58 zTree.editName(newNode[0]) //新增的节点进入编辑状态 59 } 60 } 61 }); 62 return false; 63 }); 64 }
添加新的根节点
流程与上述方法类似，只是在树节点之外增加一个新增根节点按钮，并添加上对应的方法
1 //添加根节点 2 $('.addnode').click(function () { 3 var zTree = $.fn.zTree.getZTreeObj("treeDemo"), 4 nodes = zTree.getNodes(); 5 console.log(nodes) 6 7 var name = "新部门" + (newCount++); 8 var newNode; 9 //发送请求保存一个新建的节点，根据返回ID添加新节点 10 var data = { 11 "code": 0, 12 "name": name 13 }; 14 $.ajax({ 15 type: 'post', 16 url: "", 17 data: data, 18 timeout: 1000, //超时时间设置，单位毫秒 19 dataType: 'json', 20 success: function (res) { 21 console.log(res) 22 if (res.flag == 0) { 23 var newId = res.data; 24 newNode = zTree.addNodes(null, {id: newId, pId: null, name: name}); 25 zTree.editName(newNode[0]); //新增后显示编辑状态 26 } 27 } 28 }); 29 });
修改
重命名修改
1、重命名之前的判空，在beforeRename函数中判断
1 //重命名之前的判断 2 function beforeRename(treeId, treeNode, newName) { 3 if (newName.length == 0) { 4 layer.msg("节点名称不能为空."); 5 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); 6 setTimeout(function () { 7 zTree.editName(treeNode) 8 }, 10); 9 return false; 10 } 11 return true; 12 }
2、重命名的前后台交互
1 //修改节点信息 2 function onRename(event, treeId, treeNode, isCancel) { 3 if (isCancel) { 4 return; 5 } 6 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); 7 var onodes = zTree.getNodes() 8 console.log(onodes); 9 //发送请求修改节点信息 10 var data = { 11 "id": treeNode.id, 12 "code": treeNode.pId, //父节点 13 "name": treeNode.name, 14 }; 15 $.ajax({ 16 type: 'post', 17 url: "", 18 data: data, 19 timeout: 1000, //超时时间设置，单位毫秒 20 dataType: 'json', 21 success: function (res) { 22 layer.msg(res.msg) 23 } 24 }); 25 }
删除
需求：
删除前需要二次确认；
当节点下有子节点时，禁止删除改节点；
当节点下有对应的其他信息时，禁止删除；
1 //删除之前的判断 2 function beforeRemove(treeId, treeNode) { 3 var data = { 4 "id": treeNode.id 5 }; 6 className = (className === "dark" ? "" : "dark"); 7 8 if(treeNode.isParent){ 9 layer.alert('该节点下有子节点，不能删除'); 10 return false; 11 } 12 13 if(hasMember){ 14 layer.alert('该部门下有人员，不能删除'); 15 return false; 16 } 17 var oFlag = confirm("确认删除 节点 -- " + treeNode.name + " 吗？"); 18 if(oFlag){ 19 $.ajax({ 20 type: 'post', 21 url: "", 22 data: data, 23 timeout: 1000, //超时时间设置，单位毫秒 24 dataType: 'json', 25 success: function (res) { 26 console.log(res) 27 if (res.flag == 0) { 28 layer.msg(res.msg) 29 return true; 30 }else { 31 layer.msg(res.msg); 32 return false; 33 } 34 } 35 }) 36 }else{ 37 return false 38 } 39 }
其他
鼠标移出时，隐藏编辑按钮
1 function removeHoverDom(treeId, treeNode) { 2 $("#addBtn_" + treeNode.tId).unbind().remove(); 3 };
禁止节点之前的拖拽
1 function beforeDrag(){ 2 return false; //禁止所有拖拽功能 3 }
点击节点的事件
1 //当点击节点 2 function zTreeOnClick(event, treeId, treeNode) { 3 //alert(treeNode.tId + ", " + treeNode.name); 4 //这里根据节点ID获取对应信息或进行对应的操作 5 }