zTree

 <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/zTree/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="../js/zTree/jquery.ztree.core.js"></script>
    <script type="text/javascript">
        var datas = [
            {id:"0",name:"根目录",pid:"-1"},
            {id:"1",name:"用户管理",pid:"0"},
            {id:"2",name:"用户管理",pid:"1"},
            {id:"3",name:"用户管理",pid:"1"},
            {id:"4",name:"系统管理",pid:"0"},
            {id:"5",name:"系统管理",pid:"4"},
            {id:"6",name:"系统管理",pid:"4"}
        ];

    $(function(){
        var setting={
            data:{
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: "-1"
                }
            },
            view: {
                dblClickExpand: false,
                selectedMulti: false
            }

        };
       var  zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, datas);
       console.log(zTreeObj)
    });

setting中详细参数

 

data: {
		simpleData: {
			enable: true,
			idKey: "id",
			pIdKey: "pId",
			rootPId: 0
		}
	}
//这些简单json的数据，设置了true后面的都需要设置，并且需要满足数据的父子关系


如果是标标准的josn数据，就是设置false，数据类似
treeNode 节点数据说明
◦标准的 JSON 数据需要嵌套表示节点的父子包含关系 
例如：
var nodes = [
	{name: "父节点1", children: [
		{name: "子节点1"},
		{name: "子节点2"}


其中

	

 

key中的数据设置清楚，与后台传过来的数据对应，比如children：“child”，后台穿过的事child子节点等

http://www.treejs.cn/v3/api.php可以访问官方