一、引入資源
下載並引入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 }