码迷,mamicode.com
首页 > 其他好文 > 详细

zTree的使用

时间:2017-07-07 21:32:02      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:orm   read   led   data   color   str   XML   head   imp   

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的使用

标签:orm   read   led   data   color   str   XML   head   imp   

原文地址:http://www.cnblogs.com/tongxuping/p/7134063.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!