1、添加樣式、js
<link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_v3/css/demo.css" type="text/css"><link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css"><script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.core-3.5.js"></script><script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script><script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>如果想要hideNodes、showNodes等方法，必須加入<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.exhide-3.5.js"></script>如果不需要那些hideNodes、showNodes等方法以只添加一個js，代替上面的三個js<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script>
2、html設置一個div、ul，注意ul的class是固定的ztree
<div class="treecontentpane"> <ul id="busTree" class="ztree"> </ul></div>
3、寫js操作數據
1、setting配置詳情var setting = { view: { selectedMulti: false, dblClickExpand: false, fontCss: setFontCss_ztree }, edit: { enable: true, showRemoveBtn: true, showRenameBtn: true, isSimpleData : true, treeNodeKey : "id", treeNodeParentKey : "parentId", showLine : true, removeTitle: "刪除節點", renameTitle: "編輯節點", drag: { isCopy: true, isMove: true, prev: false, next: false, inner: true } }, async: { enable: true, type:"get", url:holly.getPath() + "/rest/treeCode/showZtreeSyncRest", contentType:"application/json", autoParam: ["id"], dataFilter:filter, otherParam: { "id":"1", "code_name":"固網測試"} }, data:{ key:{ name:"codeName" }, simpleData:{ enable:true, idKey:"id", pIdKey:"parentId", rootPId:null } }, callback: { beforeDrag: beforeDrag, beforeDrop: beforeDrop, onDrop: zTreeOnDrop, beforeRemove: zTreeBeforeRemove, onRemove: zTreeOnRemove, beforeEditName: zTreeBeforeEditName, onClick: zTreeOnClick, onRightClick: zTreeOnRightClick, onAsyncSuccess: zTreeOnAsyncSuccess } };2、zTree回調方法 function filter(treeId, parentNode, responseData) { var contents = (responseData.content)?responseData.content:responseData; if(contents.length >0){ for(var i= 0 ; i <contents.length;i++){ var isParent = contents[i].isParent; if(isParent == false){ isParent = true; }else{ isParent = false; } contents[i].isParent = isParent; } } return contents; }; function zTreeOnAsyncSuccess(event, treeId, msg) { try { var treeObj = $.fn.zTree.getZTreeObj("busTree"); var nodes = treeObj .getNodes(); for(var i = 0;i<nodes.length;i++){ treeObj .expandNode(nodes[i], true); } } catch (err) { holly.showError("數據異常", err); } } 注意：如果你是異步只加載了根節點和一級節點，那麼增刪改的時候，得到的異步結果，會獲取不到該節點的子節點，只有zTreeOnAsyncSuccess方法執行完後，才能夠取到子節點的信息。所以在Eclipse中run執行和debugger執行得到不同的結果。因為run運行數據還沒接受到。 zTree = $.fn.zTree.init($("#busTree"), setting); var treeObj = $.fn.zTree.getZTreeObj("busTree"); treeObj.reAsyncChildNodes(null, "refresh"); treeObj.reAsyncChildNodes(zTree.getSelectedNodes().childNodes,"refresh"); treeObj.getSelectedNodes()[0].codeName = $("#treeRootCodeName").val(); treeObj.getSelectedNodes()[0].codeValue = $("#treeRootCodeValue").val(); treeObj.SelectedNodes()[0].remark = $("#treeRootRemark").val(); treeObj.updateNode(zTree.getSelectedNodes()[0]); 1、根據查詢的結果，顯示對應樹形結構。注意這裡只能是對應查找幾級節點的信息，還有待優化。 function searchByValue(){ var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = zTree.transformToArray(zTree.getNodes()[0].children); var key=$("#codeName").val(); if(/^\s*$/.test(key)){ zTree.showNodes(nodes); return; } zTree.hideNodes(nodes); var nodeList=zTree.getNodesByParamFuzzy("CODE_NAME", key); var filterNodes=[]; for(var i=0;i<nodeList.length;i++){ if(nodeList[i].level==2) { filterNodes.push(nodeList[i]); } } zTree.showNodes(filterNodes); for(var i=0;i<filterNodes.length;i++){ var parentNode = filterNodes[i].getParentNode(); zTree.expandNode(parentNode, true, false, false); zTree.showNode(parentNode); } } 2、搜索變色功能，但是會顯示全部信息，查詢到的結果會顯示不同的顏色 function expand_ztree(treeId){ var treeObj = $.fn.zTree.getZTreeObj(treeId); treeObj.expandAll(true); } function close_ztree(treeId){ var treeObj = $.fn.zTree.getZTreeObj(treeId); var nodes = treeObj.transformToArray(treeObj.getNodes()); var nodeLength = nodes.length; for (var i = 0; i < nodeLength; i++) { if (nodes[i].PARENT_ID == null) { treeObj.expandNode(nodes[i], true, true, false); } else { treeObj.expandNode(nodes[i], false, true, false); } } } function searchByValue(){ searchByFlag_ztree("treeDemo","codeName"); } function searchByFlag_ztree(treeId, searchConditionId){ var searchCondition = $('#' + searchConditionId).val(); var highlightNodes = new Array(); if (searchCondition != "") { var treeObj = $.fn.zTree.getZTreeObj(treeId); highlightNodes = treeObj.getNodesByParamFuzzy("CODE_NAME", searchCondition, null); } highlightAndExpand_ztree(treeId, highlightNodes); } function highlightAndExpand_ztree(treeId, highlightNodes){ var treeObj = $.fn.zTree.getZTreeObj(treeId); var treeNodes = treeObj.transformToArray(treeObj.getNodes()); var nodes = treeObj.transformToArray(treeObj.getNodes()[0].children); for (var i = 0; i < treeNodes.length; i++) { treeNodes[i].highlight = false; treeObj.updateNode(treeNodes[i]); } close_ztree(treeId); if (highlightNodes != null) { for (var i = 0; i < highlightNodes.length; i++) { highlightNodes[i].highlight = true; treeObj.updateNode(highlightNodes[i]); var parentNode = highlightNodes[i].getParentNode(); var parentNodes = getParentNodes_ztree(treeId, parentNode); treeObj.expandNode(parentNodes, true, false, true); treeObj.expandNode(parentNode, true, false, true); setFontCss_ztree("",highlightNodes[i]); } } } function getParentNodes_ztree(treeId, node){ if (node != null) { var treeObj = $.fn.zTree.getZTreeObj(treeId); var parentNode = node.getParentNode(); return getParentNodes_ztree(treeId, parentNode); } else { return node; } } function setFontCss_ztree(treeId, treeNode) { if (treeNode.PARENT_ID == null) { return {color:"#333", "font-weight":"bold"}; } else if (treeNode.isParent == false){ return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"}; } else { return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"}; } } if(treeNodes.isParent){ datagrid刷新 }else{ 提示 } var filterNodes = treeObj.getNodesByFilter(filters); function filters(node) { return (node.highlight == true); } treeObj.getNodesByParamFuzzy("CODE_NAME", searchCondition, null); 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='新增節點' onfocus='this.blur();'></span>"; sObj.after(addStr); var btn = $("#addBtn_"+treeNode.tId); if (btn) btn.bind("click", function(){ treeBusinessManager.newTreeDialog(); return false; }); }; function removeHoverDom(treeId, treeNode) { $("#addBtn_"+treeNode.tId).unbind().remove(); }; function getAllChildNodes(treeNode) { var treeObj = $.fn.zTree.getZTreeObj("sheetTree"); var childNodes = treeObj.transformToArray(treeNode); var nodes = new Array(); var j = 0; for(i = 0; i < childNodes.length; i++) { if(!childNodes[i].isParent){ nodes[j] = childNodes[i].id; j++; } } return nodes; } getChildNodes:function(treeNode,result){ if (treeNode.isParent) { var childrenNodes = treeNode.children; if (childrenNodes) { for (var i = 0; i < childrenNodes.length; i++) { result += ',' + childrenNodes[i].id; result = sheetShareManager.getChildNodes(childrenNodes[i], result); } } } return result; } function refreshNode(id) { var treeObj = $.fn.zTree.getZTreeObj("busTree"); var node = treeObj.getNodeByParam("id", id, null); if (node) { treeObj.reAsyncChildNodes(node, "refresh"); } else { setTimeout(function() { refreshNode(id); }, 10); } } function refreshParentNode(id) { var treeObj = $.fn.zTree.getZTreeObj("busTree"); var node = treeObj.getNodeByParam("id", id, null); var pNode = node.getParentNode(); if (pNode) { refreshNode(pNode.id); } else { refreshNode("0"); } }$.fn.zTree.destroy("busTree");function zTreeBeforeRename(treeId, treeNode, newName, isCancel) { if (newName.length>10||newName.trim().length<=0) { toastr.error("填寫信息不符合規則!"); var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); treeObj.cancelEditName(); return false; } return true;}function zTreeOnRename(event, treeId, treeNodes, isCancel) { if(isCancel == undefined){ }} function zTreeOnRightClick(event, treeId, treeNode) { var treeObj = $.fn.zTree.getZTreeObj("busTree"); treeObj.selectNode(treeNode); 注意：設置選中節點，才能去對應的操作方法中獲取選中的幾點 （var treeObj = $.fn.zTree.getZTreeObj("busTree"); var nodes = treeObj.getSelectedNodes();） $('#configure-tree-menu').menu('show',{left: event.pageX,top: event.pageY}); }; for (var i=0, l=nodes.length; i < l; i++) { treeObj.removeNode(nodes[i]); } var treeObj = $.fn.zTree.getZTreeObj("busTree"); treeObj.selectNode(treeNode); var nodes = treeObj.getSelectedNodes(); for (var i=0, l=nodes.length; i < l; i++) { treeObj.removeNode(nodes[i]); } <div id="configure-tree-menu" class="easyui-menu" style="width:150px;"> <div id="configureAdd" data-options="iconCls:'icon-add'">新增節點</div> <div id="configureEdit" data-options="iconCls:'icon-edit'">編輯節點</div> <div id="configureDelete" data-options="iconCls:'icon-remove'">刪除節點</div>