站長資訊網php ztree增刪改的實現方法：1、通過“addHoverDom”等方法實現增加ztree節點；2、通過“onRemove”回調函數實現刪除節點；3、使用“onRename”方法實現修改節點。
推薦：《PHP視頻教程》
一直以來，項目中用到的樹形結構，都是用來讀取顯示數據、或者控制頁面上其它內容的展示。對于樹數據源的修改，一般由其它模塊來完成，這樣可以讓功能單一化，不必讓樹的職責過多，但是卻不得不再多加一步了。為了給用戶提供最大的便利，省去這一步的麻煩，我們可以利用它的圖標增刪改功能，這樣可以給用戶最大的選擇余地，也會讓我們的系統更加的靈活。
一、簡述
在做之前，先簡單介紹下我們要實現的功能。首先，增刪改查是對數據源的四大操作，這也就是我們要給tree添加的東西了?！安樵儭痹诩虞dtree的時候已經實現了，剩下的分別是：增加、刪除、修改，對它們的實現流程就是：
1.在加載完tree以后，當鼠標移動到tree節點上時，自動加載增刪改按鈕
2.這三個按鈕分別控制tree節點的增刪改功能
3.當鼠標移出tree節點且該節點未被選中時，按鈕消失。
二、增加ztree節點
鼠標在tree上的移動事件，分別由tree的移入、移出屬性負責，我們可以在定義tree的時候就綁定好，分別是addHoverDom、removeHoverDom，增加事件就寫在了addHoverDom中
//樹屬性的定義 var setting = { //頁面上的顯示效果 view: { addHoverDom: addHoverDom, //當鼠標移動到節點上時，顯示用戶自定義控件 removeHoverDom: removeHoverDom, //離開節點時的操作 fontCss: getFontCss //個性化樣式 }, edit: { enable: true, //單獨設置為true時，可加載修改、刪除圖標 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，當鼠標移動到節點上時，顯示用戶自定義控件，與setting.view.removeHoverDom同時使用。增加節點的思路如下：
1.創造一個節點
該節點的名稱可暫時命名為“NewNode”，該節點的pId是我們鼠標所在節點的id，如果還有其它信息也可以在這里定義或作其它限制
2.將節點信息添加到數據庫，并返回新添加數據的id
（返回id，主要是針對數據庫表的主鍵是自增長類型的，如果主鍵是guid或者有命名規則的，就不用獲取返回數據了）
3.將新節點添加到tree上，也就是我們能看到的頁面上的添加效果
4.讓新節點處于選中狀態，這里也可以設置為處于修改狀態，具體的隨個人情況
function addHoverDom(treeId, treeNode) { var sObj = $("#" + treeNode.tId + "_span"); //獲取節點信息 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"); //將新節點添加到數據庫中 var name='NewNode'; $.post('./index.php?r=data/addtree&pid='+treeNode.id+'&name='+name,function (data) { var newID = data; //獲取新添加的節點Id zTree.addNodes(treeNode, {id:newID, pId:treeNode.id, name:name}); //頁面上添加節點 var node = zTree.getNodeByParam("id", newID, null); //根據新的id找到新添加的節點 zTree.selectNode(node); //讓新添加的節點處于選中狀態 }); }); };
removeHoverDom執行銷毀功能，消除由addHoverDom帶給我們的操作，雖然addHoverDom已經實現了我們的功能，但是若沒有它來回收addHoverDom創造的成果，我們的頁面就會加載出來一堆無效按鈕，所以說加減平衡還是很重要的
function removeHoverDom(treeId, treeNode) { $("#addBtn_"+treeNode.tId).unbind().remove(); };
沒有removeHoverDom功能的效果如下，如果把其它按鈕也移到addHoverDom中定義，這里的無效按鈕就不止一個添加了……
三、修改節點
修改節點在定義tree的時候已經做了綁定，我們可以直接寫修改的函數，如果想和增加節點一樣在addHoverDom中綁定也可以（記得在removeHoverDom中銷毀）。修改節點相對來說比較容易，在tree上最直觀的的就是nodeName了，所以我們只說修改名稱的部分，如果還需要修改其它數據，可以用彈出框等來完成，這里就不羅嗦了。
function onRename(e, treeId, treeNode, isCancel) { //需要對名字做判定的，可以來這里寫~~ $.post('./index.php?r=data/modifyname&id='+treeNode.id+'&name='+treeNode.name); }
效果如下：
其實修改節點還有beforeRename的回調函數，常常把對修改數據的判定放在這里，如果定義了這個函數，則只有在返回true時，onRename事件回調函數才會被觸發。
定義：
var setting = { edit: { enable: true }, callback: { beforeRename: eforeRename } };
beforeRename函數：
function beforeRename(treeId, treeNode, newName, isCancel) { if (newName.length == 0) { alert("節點名稱不能為空."); return false; } return true; }
四、刪除節點
刪除節點由onRemove回調函數操作，具體的是否可刪除、有無子節點以及將該節點刪除后對子節點需進行什么操作，可在這里完成
function onRemove(e, treeId, treeNode) { //需要對刪除做判定或者其它操作，在這里寫~~ $.post('./index.php?r=data/del&id='+treeNode.id); }
與修改節點的beforRename相同，刪除節點也有一個作用相同的函數，若定義了它，則只有在返回為true時，onRemove事件回調函數才會被觸發。
function beforeRemove(treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("tree"); zTree.selectNode(treeNode); return confirm("確認刪除 節點 -- " + treeNode.name + " 嗎？"); }
小結：
ztree的增刪改是樹結構動態加載圖標的一個例子，它更重要的是實現了一種“無處不按鈕”的思路，在最大程度上想用戶所想，為其提供足夠的便利。如果我們想以這種方式實現其它功能，也不失為一種好的選擇。
