使用zTree製作簡單非同步載入樹形結構,支援增刪改拖動
阿新 • • 發佈：2019-01-29
ztree版本 v3.5.34,資料互動格式為json.
ztreeAPI : 點選開啟連結
<!DOCTYPE html> <HTML> <HEAD> <TITLE>ztree test</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"> <styletype="text/css"> .ztree li span.button.add { margin-left: 2px; margin-right: -1px; background-position: -144px 0; vertical-align: top; *vertical-align: middle } </style> </HEAD><BODY> <div> <ul id="treeDemo" class="ztree"></ul> </div> </BODY><script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="jquery.ztree.all.min.js"></script> <SCRIPT LANGUAGE="JavaScript"> var zTreeObj;var oldName; var setting = { async: { enable: true, type: 'post',dataType: "json", url: "介面地址", autoParam: ["id"], dataFilter: filter }, data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId", rootPId: 0 }, }, view: { expandSpeed: "", addHoverDom: addHoverDom, removeHoverDom: removeHoverDom, selectedMulti: false }, edit: { enable: true, drag: { autoExpandTrigger: true, prev: false, next: false, inner: true } }, callback: { onRename: zTreeOnRename, beforeRename: beforeRename, beforeEditName: zTreeBeforeEditName, onRemove: zTreeOnRemove, beforeRemove: beforeRemove, onDrop: zTreeOnDrop, beforeDrop: zTreeBeforeDrop } }; $(document).ready(function () { var rootEles; //獲取父節點 $.ajax({ url: "介面地址", type: "post", data: {}, success: function (res) { rootEles = res.parent; console.log(rootEles) zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, rootEles); } }); }); function drewRoots(rootEles) { zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, rootEles); } // 過濾非同步載入ztree時返回的資料 function filter(treeId, parentNode, childNodes) { console.log(parentNode) if (!childNodes) return null; return childNodes.childs; } // rename function zTreeOnRename(event, treeId, treeNode, isCancel) { console.log(treeNode) var name = treeNode.name; if (name.indexOf("_") != -1) { name = treeNode.name.substring(0, treeNode.name.indexOf("_")) } var data = { id: treeNode.id, pId: treeNode.pId, name: name } // 判斷名稱是否經過修改 var editFlag = false; if (oldName) { if (oldName.indexOf("_") != -1) { oldName = oldName.substring(0, oldName.indexOf("_")) } editFlag = oldName != name } console.log(editFlag) if (!isCancel && editFlag) { $.ajax({ type: 'post', url: '介面地址', data: data, success: function (res) { alert(res.msg); if (treeNode.id == -1) { //重新整理id window.location.reload(); } } }); } else { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.cancelEditName(); } } function beforeRename(treeId, treeNode, newName) { if (newName.length == 0) { setTimeout(function () { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.cancelEditName(); alert("節點名稱不能為空."); }, 0); return false; } return true; } function zTreeBeforeEditName(treeId, treeNode) { oldName = treeNode.name; console.log("old name : " + oldName) return true; } // remove function zTreeOnRemove(event, treeId, treeNode) { console.log(treeNode); $.ajax({ type: 'post', url: '介面地址', data: { id: treeNode.id }, success: function (res) { alert(res.msg); } }); } function beforeRemove(treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.selectNode(treeNode); return confirm("確認刪除 節點 -- " + treeNode.name + " 嗎？"); } // drop function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) { return confirm("確認移動 節點 -- " + treeNodes[0].name + " 嗎？"); }; function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) { if (targetNode == null) { console.log('drag give up!') } else { console.log('from node :' + treeNodes[0]) console.log('to node :' + targetNode) var data = { id: treeNodes[0].id, targetId: targetNode.id } console.log(data) $.ajax({ type: 'post', url: '介面地址', data: data, success: function (res) { alert(res.msg) } }); } }; // add hover dom var newCount = -1; 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' onfocus='this.blur();'></span>"; sObj.after(addStr); var btn = $("#addBtn_" + treeNode.tId); if (btn) btn.bind("click", function () { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.addNodes(treeNode, {id: (newCount), pId: treeNode.id, name: "請重新命名新節點-"}); return false; }); }; function removeHoverDom(treeId, treeNode) { $("#addBtn_" + treeNode.tId).unbind().remove(); }; </SCRIPT> </HTML>
ztree查詢功能參考//用按鈕查詢節點
function searchNodes(){ var treeObj = $.fn.zTree.getZTreeObj("tree-obj"); var keywords=$("#keyword").val(); var nodes = treeObj.getNodesByParamFuzzy("name", keywords, null); if (nodes.length>0) { treeObj.selectNode(nodes[0]); } }