vue 引入zTree

下载js包解压后找个地方放文件夹内

引入

import "@/common/zTree/js/jquery-1.4.4.min"
import "@/common/zTree/js/jquery.ztree.core.min.js"
import "@/common/zTree/js/jquery.ztree.excheck.min.js"
import "@/common/zTree/css/metroStyle/metroStyle.css"
1
2
3
4

<div id="treeDemo" class="ztree"></div>
1

初始化

 this.ztreeObj = $.fn.zTree.init($("#treeDemo"), this.setting,this.treeData);
1

treeData：自己的原始数据，树结构数据，setting：设置
原始数据中，每一层添加open:true，即可自动展开
添加checked：true 即可默认选中

setting: {
        treeId: "id",
        data: {
            simpleData: {
                enable: true,
                idKey:'sid',
                pIdKey:'pid',
                rootPId:'-'
            },
            key:{
                isParent: "parent",
                name:'projectName', //需要显示的字段名称
                title:'projectName'
            },
        },
        check:{
          enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
          nocheckInherit:true  //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true 
        },
        callback: {
            // 树的点击事件
            onClick: this.zTreeOnClick,//点击回调
            onCheck: this.oncheck, //点击选中 checkbox
            onAsyncSuccess: this.zTreeOnAsyncSuccess,//异步加载成功的fun
            beforeAsync: this.zTreeBeforeAsync,//异步加载前的回调
            onExpand: this.expandNode//节点展开回调
        },
        edit: {//是否支持拖拽，enable我改成了false,代表此功能禁用，也可以直接删除，为了防止后续他们提这个需求，所以我还是写上了
            drag: {
                isMove: true,
                prev: true,
                next: true,
                inner: true
            },
            enable: false,
            showRemoveBtn: false,
            showRenameBtn: false
        },
        view:{
            // addHoverDom:this.addhoverdom,//ztree提供的可以自定义添加dom
            // removeHoverDom:this.removehoverdom,//和addHoverDom成对出现，离开节点时需要移除自定义的dom
            // fontCss: function (treeId, treeNode) {//设置所有节点的样式，我这里的代码的意思是，当前节点是否高亮（树节点搜索的时候会高亮命中的节点），高亮就设置节点高亮样式，否则就是普通样式
            //     return (!!treeNode.highlight) ? {'backgroundColor':'#F6F7F8','display':'inline-block','width':'95%','min-width':'225px','padding':'3px 0'} : {
            //             color: "#000000", "font-weight": "normal"
            //         };
            // },
            showTitle:true //是否显示titie属性（就是鼠标放到节点上是否显示html元素的title属性）
        },
        // async:{//节点很多的情况下设置懒加载
        //     enable:true,//是否开启异步加载模式
        //     contentType: "application/json",//Ajax 提交参数的数据类型
        //     dataType: "json",//Ajax 获取的数据类型
        //     // url:'/aa/bbb/ccc/loadTree',//点击树的展开节点，会重新加载子节点，这里是请求的url地址
        //     type:'POST',//当前的请求类型
        //     // autoParam:['id=parentId'],//将节点的pId值作为参数传递
        //     // otherParam:{'userId':()=>{return this.userId;},'userName':()=>{return this.userName;},'tenantId':()=>{return this.tenantId;}}
        //     otherParam:{'userId':this.userId,'userName':this.userName,'tenantId':this.tenantId,'parentId':'-'},//每次异步请求携带的参数
        //     dataFilter:function(treeId, parentNode, resp){
        //         sessionStorage.setItem('tongbunodes',JSON.stringify(resp.jsSubjects.children));
        //         return resp.subjects;
        //     }//对 Ajax 返回数据进行预处理的函数,就是异步加载返回的数据你可以处理一下再用
        // }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

//点击
zTreeOnClick(event, treeId, treeNode){
 	 if(allSid.indexOf(treeNode.proid) != -1){
         this.ztreeObj.checkNode(treeNode, false, true);//取消勾选
       }else{            
         this.ztreeObj.checkNode(treeNode, true, true);//勾选
      }
}
//选中
 oncheck(event, treeId, treeNode){
 }
1
2
3
4
5
6
7
8
9
10
11