1. 程式人生 > >Ztree 的簡單使用

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>