首页 > 代码库 > zTree的使用

zTree的使用

2024-10-18 16:56:39   210人阅读

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


联系
我们