ztree封装的树结构vue组件

先来一张效果图：

1.z-tree插件下载地址http://www.treejs.cn/v3/main.php#_zTreeInfo

2.下载完成后将插件放到项目里在mian.js里面引入即可

//main.js中引入

import './plugins/zTree/jquery.ztree.all.js'
import './plugins/zTree/jquery.ztree.core.js'
import './plugins/zTree/jquery.ztree.excheck.js'
import './plugins/zTree/jquery.ztree.exedit.js'
import './plugins/zTree/jquery.ztree.exhide.js'

3.ztree组件内部代码

4.组件使用

treedata：后台返回的tree数据格式

"data":[
        {
            "catalogName":"文件夹1",    //节点名字
            "dataSourceGroupId":"111", //节点ID
            "parentDSource":"NULL",    //父级ID
            "type":"1"                 //自定义属性： 1-文件夹 0-文件
        },
        {
            "catalogName":"文件2",      //节点名字
            "dataSourceGroupId":"rrr",  //节点ID
            "parentDSource":"222",      //父级ID
            "type":"0"                  //自定义属性： 1-文件夹 0-文件
        },
    ],

addtype： 添加根节点的显示隐藏

addtreeNode： 添加子节点的显示隐藏

zTreeBeforeRename： 编辑节点回调函数

 // 编辑节点
        zTreeBeforeRename(obj) {
            this.nodeName=obj.treeNode.catalogName;
        },

zTreeOnClick：点击单个节点回调

// 点击单个节点
        zTreeOnClick(obj) {
			if(obj.treeNode.type==1){
                //点击的是文件夹
            }
            if(obj.treeNode.type==0){
                //点击的是文件
            }
        },

addzTreeOne：添加根目录回调

// 添加根节点
        addzTreeOne() {
    
        },

shauxin：刷新树结构

// 刷新树结构
        shauxin() {
            //重新获取tree数据
        },

removeTreeNode：删除节点

//移除节点
removeTreeNode(obj) {
    
}

在添加和删除之后如果直接调用后台接口刷新树结构会导致树结构的展开、选中等操作初始化，可以使用下面代码对树结构进行跟新

添加节点：

//发送添加节点请求....
   if(res.status == 200) { 
        //请求成功后
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var parentZNode = treeObj.getSelectedNodes(); //获取父节点
        var newNode = {
            catalogName: this.collectionName,//节点名字
            dataSourceGroupId: res.data.id,//节点id
            parentDSource: this.nodeid, //父级id，可以在点击单个节点时存下
            type: 1,  //自定义属性
            icon: icojq  //图标
            iconOpen: files, //展开时图标
            iconClose: file, //闭合时图标
        };
        newNode.nodeFlg = 1; // 可以自定义节点标识
        newNode = treeObj.addNodes(parentZNode[0], newNode, true);
    }

编辑节点：

//发送修改节点请求...
if(res.status == 200) {
    //请求成功
     var zTree = $.fn.zTree.getZTreeObj("treeDemo");
     this.nodeobj.treeNode.catalogName = this.ruleForm.baseNodeName;
     zTree.updateNode(this.nodeobj.treeNode);
     this.conName = '';
 }

删除节点：

//发送删除请求...
if(res.status == 200) {
    //请求成功
    var treeObj = $.fn.zTree.getZTreeObj(obj.treeId);
    var parentZNode = treeObj.getNodesByParam("dataSourceGroupId", obj.treeNode.dataSourceGroupId, null);
    treeObj.removeNode(parentZNode[0]);
}

图标根据项目图片位置引入即可：

import icojq from "@/assets/img/23.png"
import file from "@/assets/img/21.png"
import files from "@/assets/img/22.png"