需求6：左側菜單欄
注意點1： 初始化組件加載方法 $(document).ready(function(){})不知道內部幹了啥，我添加了註釋，方便對照理解 注意點2：方法beforeClick()裏面執行流程很繞，所以我梳理了下在方法上加入了執行流程説明，方便對照理解
碰到的問題：因為我所有案例寫在同一個頁面，加入菜單案例後把別的案例的樣式都給改變了 解決方案：設置css樣式時先進行id過濾 ，詳情看下面的
案例原型對應官網下面的demo
前端代碼
<!--需求6：左側菜單欄 注意：按id進行篩選，否則會干擾其他樹結構樣式-->
<style type="text/css">
#leftMenuTree li a.level0 {width:200px;height: 20px; text-align: center; display:block; background-color: #0B61A4; border:1px silver solid;}
#leftMenuTree li a.level0.cur {background-color: #66A3D2; }
#leftMenuTree li a.level0 span {display: block; color: white; padding-top:3px; font-size:12px; font-weight: bold;word-spacing: 2px;}
#leftMenuTree li a.level0 span.button { float:right; margin-left: 10px; visibility: visible;display:none;}
#leftMenuTree li span.button.switch.level0 {display:none;}
</style>
<!--需求6：左側菜單欄-->
<!--左側菜單欄 注意：ul的class必須為ztree否則樣式沒效果，同時div的class指定為zTreeDemoBackground left-->
<div class="col-md-7">
<hr><p>需求6：左側菜單欄</p>
<ul id="leftMenuTree" class="ztree"></ul>
</div>
//需求6配置：左側菜單欄
var setting6 = {
data: {
simpleData: {
enable: true, //true 、 false 分別表示 使用 、 不使用 簡單數據模式
}
},
callback: {
onNodeCreated: this.onNodeCreated, //用於捕獲節點生成 DOM 後的事件回調函數
beforeClick: this.beforeClick, //用於捕獲單擊節點之前的事件回調函數，並且根據返回值確定是否允許單擊操作
onClick: this.onClick //用於捕獲節點被點擊的事件回調函數
},
view : {
selectedMulti: false, //設置是否允許同時選中多個節點
showLine : true, //設置 zTree 是否顯示節點之間的連線
dblClickExpand: false //雙擊節點時，是否自動展開父節點的標識
}
};
var curMenu = null, zTree_Menu = null;
var zNodes6 =[
{ id:1, pId:0, name:"主菜單 1", open:true}, //open:true,記錄 treeNode 節點的 展開 / 摺疊 狀態
{ id:11, pId:1, name:"子菜單 1-1"},
{ id:111, pId:11, name:"葉子節點 1-1-1"},
{ id:112, pId:11, name:"葉子節點 1-1-2"},
{ id:113, pId:11, name:"葉子節點 1-1-3"},
{ id:114, pId:11, name:"葉子節點 1-1-4"},
{ id:12, pId:1, name:"子菜單 1-2"},
{ id:121, pId:12, name:"葉子節點 1-2-1"},
{ id:122, pId:12, name:"葉子節點 1-2-2"},
{ id:123, pId:12, name:"葉子節點 1-2-3"},
{ id:124, pId:12, name:"葉子節點 1-2-4"},
{ id:2, pId:0, name:"主菜單 2"},
{ id:21, pId:2, name:"子菜單 2-1"},
{ id:211, pId:21, name:"葉子節點 2-1-1"},
{ id:212, pId:21, name:"葉子節點 2-1-2"},
{ id:213, pId:21, name:"葉子節點 2-1-3"},
{ id:214, pId:21, name:"葉子節點 2-1-4"},
{ id:22, pId:2, name:"子菜單 2-2"},
{ id:221, pId:22, name:"葉子節點 2-2-1"},
{ id:222, pId:22, name:"葉子節點 2-2-2"},
{ id:223, pId:22, name:"葉子節點 2-2-3"},
{ id:224, pId:22, name:"葉子節點 2-2-4"}
];
$(document).ready(function(){
$.fn.zTree.init($("#leftMenuTree"), setting6, zNodes6); //初始化樹
zTree_Menu = $.fn.zTree.getZTreeObj("leftMenuTree");
curMenu = zTree_Menu.getNodes()[0].children[0].children[0]; //curMenu {id: 111, pId: 11, name: '葉子節點 1-1-1', level: 2, tId: 'leftMenuTree_3,....
zTree_Menu.selectNode(curMenu); //選中指定節點
var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a"); //獲取id=“treeDemo_1_a” title="主菜單 1"的標籤對象
a.addClass("cur"); //添加css
});
function onClick(event, treeId, node) {
alert("Do what you want to do!");
}
/**
* 判斷是否為父節點
* true：判斷節點level === 0
* true：將第一個子節點“葉子結點1-1-1”賦值給pNode -》 按條件(pNode && pNode.level !==0)循環獲取它的根節點“主菜單1”賦值給pNode -》 按條件（pNode !== node）判斷當點擊主菜單2時移除class（”cur“）等相關操作 -》判斷children的open狀態，進行相應的展開
* false：展開/摺疊 指定的節點
* false：返回
* @param treeId
* @param node
* @returns {boolean}
*/
function beforeClick(treeId, node) { //treeId:leftMenuTree node為每次點擊的對象 node {id: 2, pId: null, name: '主菜單 2',...
if (node.isParent) {
if (node.level === 0) {
var pNode = curMenu;
while (pNode && pNode.level !==0) {
pNode = pNode.getParentNode(); //獲取到根節點
}
if (pNode !== node) {
var a = $("#" + pNode.tId + "_a");
a.removeClass("cur");
zTree_Menu.expandNode(pNode, false);
}
a = $("#" + node.tId + "_a");
a.addClass("cur");
var isOpen = false;
for (var i=0,l=node.children.length; i<l; i++) {
if(node.children[i].open) { //判斷節點children的open狀態
isOpen = true;
break;
}
}
if (isOpen) {
zTree_Menu.expandNode(node, true);
curMenu = node;
} else {
zTree_Menu.expandNode(node.children[0].isParent?node.children[0]:node, true);
curMenu = node.children[0];
}
} else {
zTree_Menu.expandNode(node); //展開 / 摺疊 指定的節點
}
}
return !node.isParent;
}
需求7：拖拽節點高級控制
注意説明1：zNodes7配置中： open:true,記錄 treeNode節點的【展開/摺疊】狀態 drag:false,禁止拖拽 childOuter:false，禁止子節點移走 dropRoot該屬性未知，我查不到 dropInner:false：不變為文件夾 注意説明2：方法dropPrev()+dropInner()+dropNext()就是用來判斷【true/false】的
碰到的問題1： 為啥有的移動完目標節點變為文件夾，而“禁止子節點移走 2”下的移動完雙方都還是文件，而沒有目標節點變為文件夾 解決方案：setting -》edit -》drag -》 inner屬性，inner屬性用來控制移動後目標節點是否變為文件夾【true：目標節點變為文件夾/false：不變為文件夾】
案例原型對應官網下面的demo
前端代嗎
<!--需求7：拖拽節點高級控制-->
<div class="col-md-7">
<hr><p>需求7：拖拽節點高級控制</p>
<ul id="moveTree" class="ztree"></ul>
</div>
//需求7：拖拽節點高級控制
var setting7 = {
edit: {
drag: {
autoExpandTrigger: true, //拖拽時父節點自動展開是否觸發 onExpand 事件回調函數
prev: dropPrev, //拖拽到目標節點時，設置是否允許移動到目標節點前面的操作
inner: dropInner, //拖拽到目標節點時，設置是否允許成為目標節點的子節點 注意：inner屬性用來控制移動後目標節點是否變為文件夾【true：目標節點變為文件夾/false：不變為文件夾】
next: dropNext //拖拽到目標節點時，設置是否允許移動到目標節點後面的操作
},
enable: true, //設置 zTree 是否處於編輯狀態
showRemoveBtn: false, //設置是否顯示刪除按鈕
showRenameBtn: false //設置是否顯示編輯名稱按鈕
},
data: {
simpleData: {
enable: true //true 、 false 分別表示 使用 、 不使用 簡單數據模式
}
},
callback: {
beforeDrag: beforeDrag, //用於捕獲節點被拖拽之前的事件回調函數，並且根據返回值確定是否允許開啓拖拽操作
beforeDrop: beforeDrop, //用於捕獲節點拖拽操作結束之前的事件回調函數，並且根據返回值確定是否允許此拖拽操作
beforeDragOpen: beforeDragOpen, //用於捕獲拖拽節點移動到摺疊狀態的父節點後，即將自動展開該父節點之前的事件回調函數，並且根據返回值確定是否允許自動展開操作
onDrag: onDrag, //用於捕獲節點被拖拽的事件回調函數
onDrop: onDrop, //用於捕獲節點拖拽操作結束的事件回調函數
onExpand: onExpand //用於捕獲節點被展開的事件回調函數
}
};
var zNodes7 =[
{ id:1, pId:0, name:"隨意拖拽 1", open:true}, //open:true,記錄 treeNode節點的【展開/摺疊】狀態
{ id:11, pId:1, name:"隨意拖拽 1-1"},
{ id:12, pId:1, name:"隨意拖拽 1-2", open:true},
{ id:121, pId:12, name:"隨意拖拽 1-2-1"},
{ id:122, pId:12, name:"隨意拖拽 1-2-2"},
{ id:123, pId:12, name:"隨意拖拽 1-2-3"},
{ id:13, pId:1, name:"禁止拖拽 1-3", drag:false}, //drag:false,禁止拖拽
{ id:131, pId:13, name:"禁止拖拽 1-3-1", drag:false},
{ id:132, pId:13, name:"禁止拖拽 1-3-2", drag:false},
{ id:132, pId:13, name:"禁止拖拽 1-3-3", drag:false},
{ id:2, pId:0, name:"禁止子節點移走 2", open:true, childOuter:false}, //childOuter:false，禁止子節點移走
{ id:21, pId:2, name:"我不想成為父節點 2-1", dropInner:false},
{ id:22, pId:2, name:"我不要成為根節點 2-2", dropRoot:false}, //dropRoot該屬性未知，我查不到
{ id:23, pId:2, name:"拖拽試試看 2-3"},
{ id:3, pId:0, name:"禁止子節點排序/增加 3", open:true, childOrder:false, dropInner:false}, //dropInner:false：不變為文件夾
{ id:31, pId:3, name:"隨意拖拽 3-1"},
{ id:32, pId:3, name:"隨意拖拽 3-2"},
{ id:33, pId:3, name:"隨意拖拽 3-3"}
];
function dropPrev(treeId, nodes, targetNode) {
var pNode = targetNode.getParentNode();
if (pNode && pNode.dropInner === false) {
return false;
} else {
for (var i=0,l=curDragNodes.length; i<l; i++) {
var curPNode = curDragNodes[i].getParentNode();
if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
return false;
}
}
}
return true;
}
function dropInner(treeId, nodes, targetNode) {
if (targetNode && targetNode.dropInner === false) {
return false;
} else {
for (var i=0,l=curDragNodes.length; i<l; i++) {
if (!targetNode && curDragNodes[i].dropRoot === false) {
return false;
} else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
return false;
}
}
}
return true;
}
function dropNext(treeId, nodes, targetNode) {
var pNode = targetNode.getParentNode();
if (pNode && pNode.dropInner === false) {
return false;
} else {
for (var i=0,l=curDragNodes.length; i<l; i++) {
var curPNode = curDragNodes[i].getParentNode();
if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
return false;
}
}
}
return true;
}
var log, className = "dark", curDragNodes, autoExpandNode;
function beforeDrag(treeId, treeNodes) {
className = (className === "dark" ? "":"dark");
for (var i=0,l=treeNodes.length; i<l; i++) {
if (treeNodes[i].drag === false) {
curDragNodes = null;
return false;
} else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
curDragNodes = null;
return false;
}
}
curDragNodes = treeNodes;
return true;
}
function beforeDragOpen(treeId, treeNode) {
autoExpandNode = treeNode;
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
className = (className === "dark" ? "":"dark");
return true;
}
function onDrag(event, treeId, treeNodes) {
className = (className === "dark" ? "":"dark");
}
function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
className = (className === "dark" ? "":"dark");
}
function onExpand(event, treeId, treeNode) {
if (treeNode === autoExpandNode) {
className = (className === "dark" ? "":"dark");
}
}
$(document).ready(function(){
$.fn.zTree.init($("#moveTree"), setting7, zNodes7);
});
重要信息
- 官網：https://ais.cn/u/vEbMBz
