一、添加樣式、jsjavascript
<link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_v3/css/demo.css" type="text/css">css
<link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">html
<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.core-3.5.js"></script>java
<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>node
<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>jquery
若是想要hideNodes、showNodes等方法,必須加入數據庫
<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.exhide-3.5.js"></script>json
若是不須要那些hideNodes、showNodes等方法以只添加一個js,代替上面的三個js數組
<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script>app
二、html設置一個div、ul,注意ul的class是固定的ztree
<div class="treecontentpane">
<ul id="busTree" class="ztree">
</ul>
</div>
三、寫js操做數據
-
一、setting配置詳情
-
var setting = {
-
//顯示
-
view: {
-
selectedMulti: false, //在複製的時候,是否容許選中多個節點。true爲支持,按下ctrl鍵生效,false不支持。
-
dblClickExpand: false, //雙擊的時候是否切換展開狀態。true爲切換,false不切換
-
fontCss: setFontCss_ztree //設置節點的顏色
-
},
-
//增刪改,移動複製
-
edit: {
-
enable: true, //若是enable爲flase,那麼樹就不能移動了
-
showRemoveBtn: true, //是否顯示樹的刪除按鈕
-
showRenameBtn: true, //是否顯示數的重命名按鈕
-
isSimpleData : true, //數據是否採用簡單 Array 格式,默認false
-
treeNodeKey : "id", //在isSimpleData格式下,當前節點id屬性
-
treeNodeParentKey : "parentId",//在isSimpleData格式下,當前節點的父節點id屬性
-
showLine : true, //是否顯示節點間的連線
-
removeTitle: "刪除節點",//刪除Logo的提示
-
renameTitle: "編輯節點",//修改Logo的提示
-
//拖拽
-
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"], //異步加載數據,自動添加id參數,會自動獲取當前節點的id值
-
dataFilter:filter, //過濾,跟easy-ui中的loadFilter方法同樣。
-
otherParam: { "id":"1", "code_name":"固網測試"}//提交的時候就會提交參數id=1&code_name=固網測試
-
},
-
data:{
-
key:{
-
name:"codeName" //節點顯示的值
-
},
-
//
-
simpleData:{
-
enable:true,//若是爲true,能夠直接把從數據庫中獲得的List集合自動轉換爲Array格式。而沒必要轉換爲json傳遞
-
idKey:"id",//節點的id
-
pIdKey:"parentId",//節點的父節點id
-
rootPId:null
-
}
-
},
-
//回調函數
-
callback: {
-
beforeDrag: beforeDrag,//拖拽以前
-
beforeDrop: beforeDrop,//拖拽結束
-
onDrop: zTreeOnDrop,//拖拽結束後
-
//onDrag: zTreeOnDrag,//拖拽的時候
-
beforeRemove: zTreeBeforeRemove,//刪除節點前
-
onRemove: zTreeOnRemove,//節點刪除以後
-
beforeEditName: zTreeBeforeEditName,//進行編輯以前
-
//beforeRename: zTreeBeforeRename,//重命名節點以前
-
//onRename: zTreeOnRename,//重命名以後
-
onClick: zTreeOnClick,//點擊
-
onRightClick: zTreeOnRightClick,//右鍵
-
onAsyncSuccess: zTreeOnAsyncSuccess//異步加載
-
//beforeExpand: beforeExpand,//展開節點前
-
//onAsyncSuccess: onAsyncSuccess,//異步數據加載成功的回調
-
//onAsyncError: onAsyncError //異步數據加載錯誤後回調
-
}
-
};
-
二、zTree回調方法
-
//對獲得的json數據進行過濾,加載樹的時候執行
-
function filter(treeId, parentNode, responseData) {
-
var contents = (responseData.content)?responseData.content:responseData;
-
//當第一次加載的時候只顯示一級節點,可是要讓別人知道對應一級節點下是否有數據,那麼就須要設置isParent,爲true能夠展開,下面有數據。
-
//我這裏是因爲異步加載數據,只加載根節點以及一級節點。那麼一級節點下還有子節點,因此設置isParent顯示還有子節點的效果
-
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運行數據還沒接受到。
-
/* var firstAsyncSuccessFlag = 0;
-
function zTreeOnAsyncSuccess(event, treeId, msg) {
-
if (firstAsyncSuccessFlag == 0 ) {
-
try {
-
var treeObj = $.fn.zTree.getZTreeObj("busTree");
-
var selectedNode = zTree.getSelectedNodes();
-
//獲取整個json節點
-
var nodes = zTree.getNodes();
-
//展開根節點下的第一個節點
-
treeObj.expandNode(nodes[0], true);
-
//把根節點下的全部節點轉換爲數組
-
var childNodes = zTree.transformToArray(nodes[0]);
-
//展開根節點下的第一個節點的第一節節點
-
treeObj .expandNode(childNodes[1], true);
-
//選中根節點下的第一個節點
-
treeObj .selectNode(childNodes[1]);
-
firstAsyncSuccessFlag = 1;
-
} catch (err) {
-
holly.showError("數據異常", err);
-
}
-
}
-
}*/
-
//初始化樹
-
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]);
-
//搜索功能:
-
一、根據查詢的結果,顯示對應樹形結構。注意這裏只能是對應查找幾級節點的信息,還有待優化。
-
//根據code_name模糊查詢
-
function searchByValue(){
-
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
-
//通過transformToArray轉換後是一個Array數組,數組裏的每一個元素都是object對象,這個對象裏包含了node的21個屬性。
-
var nodes = zTree.transformToArray(zTree.getNodes()[0].children);
-
var key=$("#codeName").val();
-
//空格回車符 不作查詢 直接顯示所有
-
if(/^\s*$/.test(key)){
-
//updateNodes(false);
-
zTree.showNodes(nodes);
-
return;
-
}
-
//首先隱藏
-
zTree.hideNodes(nodes);
-
var nodeList=zTree.getNodesByParamFuzzy("CODE_NAME", key); //模糊匹配
-
//把獲得的節點放到filterNodes臨時數組中
-
var filterNodes=[];
-
for(var i=0;i<nodeList.length;i++){
-
//這裏只能是級別是2的
-
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);
-
}
-
}
-
二、搜索變色功能,可是會顯示所有信息,查詢到的結果會顯示不一樣的顏色
-
//展開全部節點
-
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);
-
}
-
}
-
}
-
//查詢的onclick時間
-
function searchByValue(){
-
searchByFlag_ztree("treeDemo","codeName");
-
}
-
//獲得查詢結果,並進行設置樣式和展開
-
function searchByFlag_ztree(treeId, searchConditionId){
-
//<1>.搜索條件
-
var searchCondition = $('#' + searchConditionId).val();
-
// <2>.獲得模糊匹配搜索條件的節點數組集合
-
var highlightNodes = new Array();
-
if (searchCondition != "") {
-
var treeObj = $.fn.zTree.getZTreeObj(treeId);
-
//模糊查詢
-
highlightNodes = treeObj.getNodesByParamFuzzy("CODE_NAME", searchCondition, null);
-
}
-
// <3>.高亮顯示並展現【指定節點】
-
highlightAndExpand_ztree(treeId, highlightNodes);
-
}
-
//展開,並顯示不一樣顏色
-
function highlightAndExpand_ztree(treeId, highlightNodes){
-
var treeObj = $.fn.zTree.getZTreeObj(treeId);
-
// <1>. 先把所有節點更新爲普通樣式
-
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]);
-
}
-
//<2>.收起樹, 只展開根節點下的一級節點
-
close_ztree(treeId);
-
// <3>.把指定節點的樣式更新爲高亮顯示,並展開
-
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"};
-
}
-
}
-
//點擊的時候判斷節點有沒有數據,以便於datadrid是否請求後臺刷新
-
if(treeNodes.isParent){
-
datagrid刷新
-
}else{
-
提示
-
}
-
//獲取過濾以外的全部數據
-
var filterNodes = treeObj.getNodesByFilter(filters);
-
function filters(node) {
-
return (node.highlight == true);
-
}
-
//獲取過濾的全部數據
-
treeObj.getNodesByParamFuzzy("CODE_NAME", searchCondition, null);
-
//當焦點放在節點上顯示新增Logo
-
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(){
-
//彈出easy-ui新增對話框
-
treeBusinessManager.newTreeDialog();
-
return false;
-
});
-
};
-
//當鼠標不在節點的時候,自動隱藏新增按鈕
-
function removeHoverDom(treeId, treeNode) {
-
$("#addBtn_"+treeNode.tId).unbind().remove();
-
};
-
//獲取某個節點下的全部節點
-
//需求:當只能在葉子節點上添加數據的時候,可是展示的時候,須要若是點擊葉子節點顯示葉子節點的數據,點擊節點顯示該節點下的全部葉子節點的信息。
-
//注意:這裏數據用,區分id,是爲了去後臺進行in查詢
-
function getAllChildNodes(treeNode) {
-
var treeObj = $.fn.zTree.getZTreeObj("sheetTree");//獲取ztree
-
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;
-
//nodes.join(",");
-
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) {
-
//真正觸發的時候爲undefiend。觸發不成功的時候,爲true
-
if(isCancel == undefined){
-
//修改操做
-
}
-
}
-
//右鍵顯示新增,修改,刪除(與easy-ui總體相似)
-
//右鍵,填出編輯框
-
function zTreeOnRightClick(event, treeId, treeNode) {
-
var treeObj = $.fn.zTree.getZTreeObj("busTree");
-
//設置選中右鍵節點
-
treeObj.selectNode(treeNode);
-
//這裏能夠爲爲div添加click事件,進行新增,修改,刪除操做。
-
注意:設置選中節點,才能去對應的操做方法中獲取選中的幾點
-
(var treeObj = $.fn.zTree.getZTreeObj("busTree");
-
var nodes = treeObj.getSelectedNodes();)
-
$('#configure-tree-menu').menu('show',{left: event.pageX,top: event.pageY});
-
};
-
//刪除節點的時候須要注意
-
//因爲數據是異步加載的,因此不只須要進行數據刪除,還須要進行邏輯刪除。不然數據沒有及時的回顯,那麼樹的狀態isParent還沒改變。
-
for (var i=0, l=nodes.length; i < l; i++) {
-
treeObj.removeNode(nodes[i]);
-
}
-
//在onBeforeRemove中操做,異步的判斷
-
//在數據操做成功以後
-
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]);//默認是false,若是設置爲true,那麼就會觸發onRemove函數
-
}
-
//html中的menu
-
<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>