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>
时间： 2024-08-02 19:07:48