Vue中使用z-tree插件 —— 点击展开事件异步加载子节点
在vue中使用z-tree插件,执行异步加载时候,API文档提示必须写上。async: {enable: true,url: "nodes.php",autoParam: ["id", "name"]}琢磨了好久,写出来的。首先,要弄清楚这两个事件的方法:1、节点展开(点击前面那个‘+’号或
·
在vue中使用z-tree插件,执行异步加载时候,API文档提示必须写上。
async: {
enable: true,
url: "nodes.php",
autoParam: ["id", "name"]
}
琢磨了好久,写出来的。
首先,要弄清楚这两个事件的方法:
1、节点展开(点击前面那个‘+’号或双击节点)
onExpand:节点展开的事件回调函数
2、节点展开(点击前面那个‘-’号或双击节点)
onCollapse:节点折叠的事件回调函数
callback:{
beforeCollapse: beforeCollapse, //用于捕获父节点折叠之前的事件回调函数,并且根据返回值确定是否允许折叠操作
//返回值是 true / false
//如果返回 false,zTree 将不会折叠节点,也无法触发 onCollapse 事件回调函数
beforeExpand: beforeExpand, //用于捕获父节点展开之前的事件回调函数,并且根据返回值确定是否允许展开操作
//返回值是 true / false
//如果返回 false,zTree 将不会展开节点,也无法触发 onExpand 事件回调函数
onCollapse: onCollapse, //用于捕获节点被折叠的事件回调函数
onExpand: onExpand //用于捕获节点被展开的事件回调函数
}
下面附上代码:
HTML:
<template>
<div>
<div class="question_info_lists">
<div class="tree-box">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</div>
</div> </template>
JS部分:
export default {
name: "zTree",
data(){
return{
key:false,
setting: {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0,
}
},
view: {
showLine: false,
dblClickExpand: false,
addDiyDom: this.addDiyDom,
nameIsHTML: true,
selectedMulti: false
},
callback: {
onClick: this.onClick, //节点点击事件
onCollapse:this.onCollapse, //点击图标按钮节点 折叠后 异步加载子数据
onExpand:this.zTreeOnAsyncSuccess //点击图标按钮节点 展开后 异步加载子数据
}
},
zNodes:[]
}
},
methods:{
//获取菜单
async freshArea(){
const param ={}
const result = await resTagTreeData(param)
if(result.code==='200000'){
this.zNodes = result.data.ztreeList
//判断是否有子节点--通过isContainSon是否大于0(也就是有终端),添加父节点为true
this.zNodes.forEach((item)=>{
if(item.isContainSon === 1){
item.isParent = true;
}
})
//数据渲染到菜单
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
}else {
alert(result.message)
}
},
//点击节点
onClick(event, treeId, treeNode) {
alert(treeNode.Name + ", " + treeNode.name);
},
zTreeOnAsyncSuccess(event, treeId, treeNode) {
this.addNodes(treeNode);
},
//点击展开图标 --加载子菜单
async addNodes(treeNode){
//this.key=false
const param = {
"id":treeNode.id,
'labelType':treeNode.labelType
};
// console.log(param)
const treeObj = $.fn.zTree.getZTreeObj("treeDemo");
const parentZNode = treeObj.getNodeByParam("id", treeNode.id, null);//获取指定父节点
const childNodes = treeObj.transformToArray(treeNode);//获取子节点集合
//点击事件后将子节点清空后在进行拼接
treeNode.children = [];
//因为子节点还包括组织,所以这里需要筛选一下
if(treeNode.isParent){
const result = await resChildrentreeData(param)
if(result.code==='200000'){
const childrenData=eval(result.data.ztreeList)
// console.log(childrenData)
//判断子节点是否包含子元素
for(var i in childrenData){
if(childrenData[i].isContainSon === 1){
childrenData[i].isParent = true;
}
};
//console.log(childrenData)
treeObj.refresh();
treeObj.addNodes(parentZNode,childrenData, false); //添加节点
//this.key = true
}else {
alert(reslut.mes)
}
}
}
},
mounted(){
this.freshArea()
//$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)