Ztree 的簡單使用
阿新 • • 發佈:2019-01-23
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>