需求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);
});
重要信息
