Ztree 的简单使用

1、引入js和css

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resources/css/tree/zTreeStyle.css"/>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery.ztree.core-3.1.js"></script>

2、创建data的数据

var datas = [ {
		id : "0",
		name : "根目录",
		pid : "-1"
	}, {
		id:"1",
		name:"用户管理",
		pid:"0"
	},{
		id:"2",
		name:"用户管理1",
		pid:"1"
	},{
		id:"3",
		name:"用户管理2",
		pid:"1"
	},{
		id:"4",
		name:"系统管理",
		pid:"0"
	},{
		id:"5",
		name:"系统管理1",
		pid:"4"
	},{
		id:"6",
		name:"系统管理2",
		pid:"4"
	},{
		id:"7",
		name:"系统管理21",
		pid:"6"
	}
	]

3、

$(function(){
var pathUrl="<%=request.getContextPath()%>/admin/group/groupTree/${group.id}";
    //vt= $("#tree").mytree({url:pathUrl,mine:{listChild:0}}); 
    
    var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: -1
                }
            },
            async: {
                enable: true,
                url: pathUrl
                
            },
            view: {
                dblClickExpand: false,
                selectedMulti: false
            },
            callback: {
                onAsyncSuccess: function(){
                    t.expandAll(true);
                }
            }
            
        };
    var t = $.fn.zTree.init($("#tree"), setting);
});






4、
		<div id="tree" class="ztree">
			
		</div>