首页 > 代码库 > zTree的使用

zTree的使用

zTree可以实现树形结构的关系。一般会出现在部门 的上下级关系,角色权限的分配等模块中...

技术分享

zTree格式要求:即Json的复杂格式

  [{id:"..",pId:"..",name:"..",checked:"true/false"}]

id:标识当前的id;

pId:父节点的id;

name:节点名称(就是在页面上可以看到的值);

checked:是否勾选,默认是false。

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <link rel="stylesheet" href="${ctx}/staticfile/components/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
 4     <script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery-1.4.4.min.js"></script>
 5     <script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery.ztree.core-3.5.min.js"></script>
 6     <script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery.ztree.excheck-3.5.min.js"></script>
 7 <SCRIPT type="text/javascript">
 8 
 9     
10         var setting = {
11             check: {
12                 enable: true
13             },
14             data: {
15                 simpleData: {
16                     enable: true
17                 }
18             }
19         };
20      //测试数据
21         var zNodes =[{id:1,pId:1,name:"爷爷"},{id:2,pId:1,name:"爸爸"},{id:3,pId:2,name:"儿子"}];22         
23         $(document).ready(function(){
24             $.fn.zTree.init($("#htZtree"), setting, zNodes);
25 
26             var zTreeObj = $.fn.zTree.getZTreeObj("Ztree");
27             zTreeObj.expandAll(true);        //展开所有树节点
28         });
29         
30         
31         
32     </SCRIPT>
33 
34 </head>
35 
36 <body>
37 <h1>Ztree入门教例</h1>
38 <div style="padding:30px;">
39     <ul id="Ztree" class="ztree"></ul>
40 </div>
41  
42 </div>
43  
44  
45 </form>
46 </body>
47 </html>

 

zTree的使用