ztree

ZTree配置与初始化详解

最新推荐文章于 2021-04-10 19:47:01 发布

转载最新推荐文章于 2021-04-10 19:47:01 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c2c1e97e51d456e813950b7

本文详细介绍了如何配置和初始化ZTree插件，包括数据格式设置、显示状态配置、节点选择及事件处理函数。通过具体代码示例，展示了如何通过Ajax获取部门树形数据并初始化ZTree。

var setting = {

    data:{//表示tree的数据格式
        simpleData:{
            enable:true,//表示使用简单数据模式
            idKey:"id",//设置之后id为在简单数据模式中的父子节点关联的桥梁
            pidKey:"pId",//设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应
            rootId:"null"//pid为null的表示根节点
        }
    },
    view:{//表示tree的显示状态
        selectMulti:false//表示禁止多选
    },
    check:{//表示tree的节点在点击时的相关设置
        enable:true,//是否显示radio/checkbox
        chkStyle:"checkbox",//值为checkbox或者radio表示
        checkboxType:{p:"",s:""},//表示父子节点的联动效果
        radioType:"level"//设置tree的分组
    },
    callback:{//表示tree的一些事件处理函数
        onCheck:onCheck,
    }
}
initTree()
 function initTree(){
    $.ajax({
        url: url + "/system/dept/treeData",
        type: "get",
        success: function (res) {
            console.log(res)
            $.fn.zTree.init($("#tree"),setting,res);
            var treeObj = $.fn.zTree.getZTreeObj("tree");
            treeObj.expandAll(true);//默认展开
        }
    })
}
 var meIdStr='';
function onCheck(e,treeId,treeNode) {
    var Zid=''
    var treeObj = $.fn.zTree.getZTreeObj("tree");
    var nodes = treeObj.getCheckedNodes(true);
    for(var i=0;i<nodes.length;i++){
        Zid+=nodes[i].id + ",";
    }
    Zid=Zid.substring(0,Zid.length-1)
    meIdStr=Zid;//传递的id是：1,2,3这样的形式
}复制代码