php ztree增刪改的實(shí)現(xiàn)方法：1、通過“addHoverDom”等方法實(shí)現(xiàn)增加ztree節(jié)點(diǎn)；2、通過“onRemove”回調(diào)函數(shù)實(shí)現(xiàn)刪除節(jié)點(diǎn)；3、使用“onRename”方法實(shí)現(xiàn)修改節(jié)點(diǎn)。

推薦：《PHP視頻教程》

一直以來，項(xiàng)目中用到的樹形結(jié)構(gòu)，都是用來讀取顯示數(shù)據(jù)、或者控制頁面上其它內(nèi)容的展示。對于樹數(shù)據(jù)源的修改，一般由其它模塊來完成，這樣可以讓功能單一化，不必讓樹的職責(zé)過多，但是卻不得不再多加一步了。為了給用戶提供最大的便利，省去這一步的麻煩，我們可以利用它的圖標(biāo)增刪改功能，這樣可以給用戶最大的選擇余地，也會(huì)讓我們的系統(tǒng)更加的靈活。

一、簡述

在做之前，先簡單介紹下我們要實(shí)現(xiàn)的功能。首先，增刪改查是對數(shù)據(jù)源的四大操作，這也就是我們要給tree添加的東西了?！安樵儭痹诩虞dtree的時(shí)候已經(jīng)實(shí)現(xiàn)了，剩下的分別是：增加、刪除、修改，對它們的實(shí)現(xiàn)流程就是：

1.在加載完tree以后，當(dāng)鼠標(biāo)移動(dòng)到tree節(jié)點(diǎn)上時(shí)，自動(dòng)加載增刪改按鈕

2.這三個(gè)按鈕分別控制tree節(jié)點(diǎn)的增刪改功能

3.當(dāng)鼠標(biāo)移出tree節(jié)點(diǎn)且該節(jié)點(diǎn)未被選中時(shí)，按鈕消失。

二、增加ztree節(jié)點(diǎn)

鼠標(biāo)在tree上的移動(dòng)事件，分別由tree的移入、移出屬性負(fù)責(zé)，我們可以在定義tree的時(shí)候就綁定好，分別是addHoverDom、removeHoverDom，增加事件就寫在了addHoverDom中

//樹屬性的定義 var setting = {     //頁面上的顯示效果     view: {         addHoverDom: addHoverDom, //當(dāng)鼠標(biāo)移動(dòng)到節(jié)點(diǎn)上時(shí)，顯示用戶自定義控件         removeHoverDom: removeHoverDom, //離開節(jié)點(diǎn)時(shí)的操作         fontCss: getFontCss //個(gè)性化樣式     },     edit: {         enable: true, //單獨(dú)設(shè)置為true時(shí)，可加載修改、刪除圖標(biāo)         editNameSelectAll: true,         showRemoveBtn: showRemoveBtn,         showRenameBtn: showRenameBtn     },     data: {         simpleData: {             enable:true,             idKey: "id",             pIdKey: "pId",             system:"system",             rootPId: ""         }     },     callback: {         onClick: zTreeOnClick, //單擊事件         onRemove: onRemove, //移除事件         onRename: onRename //修改事件     } };

addHoverDom，當(dāng)鼠標(biāo)移動(dòng)到節(jié)點(diǎn)上時(shí)，顯示用戶自定義控件，與setting.view.removeHoverDom同時(shí)使用。增加節(jié)點(diǎn)的思路如下：

1.創(chuàng)造一個(gè)節(jié)點(diǎn)

該節(jié)點(diǎn)的名稱可暫時(shí)命名為“NewNode”，該節(jié)點(diǎn)的pId是我們鼠標(biāo)所在節(jié)點(diǎn)的id，如果還有其它信息也可以在這里定義或作其它限制

2.將節(jié)點(diǎn)信息添加到數(shù)據(jù)庫，并返回新添加數(shù)據(jù)的id

（返回id，主要是針對數(shù)據(jù)庫表的主鍵是自增長類型的，如果主鍵是guid或者有命名規(guī)則的，就不用獲取返回?cái)?shù)據(jù)了）

3.將新節(jié)點(diǎn)添加到tree上，也就是我們能看到的頁面上的添加效果

4.讓新節(jié)點(diǎn)處于選中狀態(tài)，這里也可以設(shè)置為處于修改狀態(tài)，具體的隨個(gè)人情況

function addHoverDom(treeId, treeNode) {     var sObj = $("#" + treeNode.tId + "_span"); //獲取節(jié)點(diǎn)信息     if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;      var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='add node' οnfοcus='this.blur();'></span>"; //定義添加按鈕     sObj.after(addStr); //加載添加按鈕     var btn = $("#addBtn_"+treeNode.tId);      //綁定添加事件，并定義添加操作     if (btn) btn.bind("click", function(){         var zTree = $.fn.zTree.getZTreeObj("tree");         //將新節(jié)點(diǎn)添加到數(shù)據(jù)庫中         var name='NewNode';         $.post('./index.php?r=data/addtree&pid='+treeNode.id+'&name='+name,function (data) {             var newID = data; //獲取新添加的節(jié)點(diǎn)Id             zTree.addNodes(treeNode, {id:newID, pId:treeNode.id, name:name}); //頁面上添加節(jié)點(diǎn)             var node = zTree.getNodeByParam("id", newID, null); //根據(jù)新的id找到新添加的節(jié)點(diǎn)             zTree.selectNode(node); //讓新添加的節(jié)點(diǎn)處于選中狀態(tài)         });     }); };

removeHoverDom執(zhí)行銷毀功能，消除由addHoverDom帶給我們的操作，雖然addHoverDom已經(jīng)實(shí)現(xiàn)了我們的功能，但是若沒有它來回收addHoverDom創(chuàng)造的成果，我們的頁面就會(huì)加載出來一堆無效按鈕，所以說加減平衡還是很重要的

function removeHoverDom(treeId, treeNode) {     $("#addBtn_"+treeNode.tId).unbind().remove(); };

沒有removeHoverDom功能的效果如下，如果把其它按鈕也移到addHoverDom中定義，這里的無效按鈕就不止一個(gè)添加了……

三、修改節(jié)點(diǎn)

修改節(jié)點(diǎn)在定義tree的時(shí)候已經(jīng)做了綁定，我們可以直接寫修改的函數(shù)，如果想和增加節(jié)點(diǎn)一樣在addHoverDom中綁定也可以（記得在removeHoverDom中銷毀）。修改節(jié)點(diǎn)相對來說比較容易，在tree上最直觀的的就是nodeName了，所以我們只說修改名稱的部分，如果還需要修改其它數(shù)據(jù)，可以用彈出框等來完成，這里就不羅嗦了。

function onRename(e, treeId, treeNode, isCancel) {     //需要對名字做判定的，可以來這里寫~~     $.post('./index.php?r=data/modifyname&id='+treeNode.id+'&name='+treeNode.name); }

效果如下：

其實(shí)修改節(jié)點(diǎn)還有beforeRename的回調(diào)函數(shù)，常常把對修改數(shù)據(jù)的判定放在這里，如果定義了這個(gè)函數(shù)，則只有在返回true時(shí)，onRename事件回調(diào)函數(shù)才會(huì)被觸發(fā)。

定義：

var setting = { 	edit: { 		enable: true 	}, 	callback: { 		beforeRename:  eforeRename 	} };

beforeRename函數(shù)：

function beforeRename(treeId, treeNode, newName, isCancel) {     if (newName.length == 0) {         alert("節(jié)點(diǎn)名稱不能為空.");         return false;     }     return true; }

四、刪除節(jié)點(diǎn)

刪除節(jié)點(diǎn)由onRemove回調(diào)函數(shù)操作，具體的是否可刪除、有無子節(jié)點(diǎn)以及將該節(jié)點(diǎn)刪除后對子節(jié)點(diǎn)需進(jìn)行什么操作，可在這里完成

function onRemove(e, treeId, treeNode) {     //需要對刪除做判定或者其它操作，在這里寫~~     $.post('./index.php?r=data/del&id='+treeNode.id); }

與修改節(jié)點(diǎn)的beforRename相同，刪除節(jié)點(diǎn)也有一個(gè)作用相同的函數(shù)，若定義了它，則只有在返回為true時(shí)，onRemove事件回調(diào)函數(shù)才會(huì)被觸發(fā)。

function beforeRemove(treeId, treeNode) {     var zTree = $.fn.zTree.getZTreeObj("tree");     zTree.selectNode(treeNode);     return confirm("確認(rèn)刪除 節(jié)點(diǎn) -- " + treeNode.name + " 嗎？"); }

小結(jié)：

ztree的增刪改是樹結(jié)構(gòu)動(dòng)態(tài)加載圖標(biāo)的一個(gè)例子，它更重要的是實(shí)現(xiàn)了一種“無處不按鈕”的思路，在最大程度上想用戶所想，為其提供足夠的便利。如果我們想以這種方式實(shí)現(xiàn)其它功能，也不失為一種好的選擇。