zTree使用记录

<link href="zTree/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
<div class="background" style="display:none"></div>
<div class="warp_vin" id="app" v-cloak>
　　<div id="treeDemo" class="ztree"></div>
　　<div id="TuCe" style="width:640px;height:350px;left:30%;top:30%;display:none"></div>
</div>
<script src="vue.js"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="zTree/jquery.ztree.all.js" type="text/javascript"></script>

var zTreeObj;

var setting = {
    data: {
        key: {
            children: "Child_List",//变更默认的children属性名
            name: "TName"//变更默认的name属性名
        },
        simpleData: {
            enable: true,
            idKey: "TID",//自己的id，更改id的属性名
            pIdKey: "PID",//父级id，更改父级的属性名
        }
    },
    view:{
        dblClickExpand : false//关闭双击节点展开的功能，在点击事件中实现展开闭合切换
    },
    callback: {
        onClick: onOneClick,//单击事件
        // onDblClick: onTwoClick,//双击事件
        onExpand: zTreeOnExpand,//+号展开事件
    }
};
function onOneClick(e, treeId, treeNode) {
    if(treeNode.Level == 2){
        //Level==2此级可以弹窗
        $(".background").show();
        $("#TuCe").show();
        zTreeObj.expandNode(treeNode,true);//单击展开节点，此状态下之展开不闭合
        if(treeNode.Child_List == null){
            //不为null可以请求下一级数据
            vm.getzTreeData2(treeNode)
        }
    }else if(treeNode.Level >= 3){
        //Level>=3没有弹窗功能，只能请求下一级数据
        if(treeNode.Child_List == null){
            vm.getzTreeData2(treeNode)
        }
        //单击展开折叠切换节点，focus=false不设置任何焦点（防止树抖动）
        zTreeObj.expandNode(treeNode,null,null,false);
    }else{
        zTreeObj.expandNode(treeNode,null,null,false);
    }
}
function onTwoClick(e, treeId, treeNode) {
    console.log(2)
}
function zTreeOnExpand(e, treeId, treeNode){
    //点击+号，只请求数据不弹窗
    if(treeNode.Level == 2 && treeNode.Child_List == null){
        vm.getzTreeData2(treeNode)
    }else if(treeNode.Level >= 3 && treeNode.Child_List == null){
        vm.getzTreeData2(treeNode)
    }
}

var vm = new Vue({
    el:'#app',
    data:{
        zNodes:[],//首次获取的树
    },
    created(){},
    mounted(){
        this.getzTreeData()
    },
    methods:{
        //获取首次树1-2级数据
        getzTreeData(){
            var self = this
            $.ajax({
                type: 'POST',
                url: '',
                data: {},
                async: true,
                dataType: "json",
                success: function (msg) {
                    if (msg.status.code == 1) {
                        var info = msg.row_data.record;
                        //给2级的设置isParent值，否则没有+号
                        $(info).each(function(index,item){
                            $(item.Child_List).each(function(ind,it){
                                if(it.Level == 2){
                                    it.isParent = true;//设置为父节点，带+号
                                    it.icon = "zTree/zTreeStyle/img/diy/5.png";//变更2级的图标
                                }
                            })
                        })
                        //设置静态的顶级
                        var obj = {
                            TID: 0,//自己的id
                            PID: 0,//父级的id
                            Level: 0,//Level等级
                            TName: msg.data,//本节点显示名称
                            open: true,//本节点展开
                            Child_List: info//本节点子集
                        }
                        self.zNodes.push(obj)
                        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, self.zNodes);
                        // zTreeObj.expandAll(true);//展开 全部节点
                    }
                    else {
                        dialog("提示", msg.status.msg, 2);
                    }
                },
                error: function (a, b, c) {
                    alert(c);
                }
            });
        },
        //点击树节点获取子节点数据
        getzTreeData2(treeNode){
            var self = this
            $.ajax({
                type: 'POST',
                url: '',
                data: {},
                async: true,
                dataType: "json",
                success: function (msg) {
                    if (msg.status.code == 1) {
                        var info = msg.row_data.record;
                        var addtreeObj = $.fn.zTree.getZTreeObj("treeDemo");//获取到树
                        if(info.length != 0){
                            //将获取的都设置isParent值，否则没有+号
                            $(info).each(function(index,item){
                                if(item.Level >= 3){
                                    item.isParent = true;//设置为父节点，带+号
                                    item.icon = "zTree/zTreeStyle/img/diy/8.png";//变更3级的图标
                                }
                            })
                            var parentZNode = addtreeObj.getNodeByParam("TID", treeNode.TID, null);//获取指定父节点
                            var newNode = addtreeObj.addNodes(parentZNode,info);//添加节点（父节点，新数据）
                        }else{
                            //如果没有子集，将当前节点设置为非父级，并且给Child_List赋值[]，防止再次请求
                            treeNode.isParent = false;
                            treeNode.Child_List = [];
                            treeNode.icon = "zTree/zTreeStyle/img/diy/3.png";//没有子集的末级节点图标
                            addtreeObj.updateNode(treeNode);//更新节点数据
                        }
                    }
                    else {
                        dialog("提示", msg.status.msg, 2);
                    }
                },
                error: function (a, b, c) {
                    alert(c);
                }
            }); 
        }
    }
})