本文是对jquery的Treeview插件使用的实例介绍
效果图如下：
文件结构如下：
jquery_treeview下的目录：
树型结构显示+复选框级联.html的内容：
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>配置权限</title>
5 <script language="javascript" src="jquery-1.4.4.min.js"></script>
6 <script language="javascript" src="jquery_treeview/jquery.treeview.js"></script>
7 <link type="text/css" rel="stylesheet" href="jquery_treeview/jquery.treeview.css" />
8
9 <style>
10 span.folder{
11 background-image: url("jquery_treeview/images/folder.gif");
12 background-repeat: no-repeat;
13 font-size: 14px;
14 padding-left: 20px;
15 height: 17px;
16 }
17
18 /*ul li{
19 list-style: none;
20 }*/
21 </style>
22
23 <script type="text/javascript">
24
25 $(function(){
26
27 $("[name=chkbox]").click(function(){
28
29 //当选中或取消一个权限时，也同时选中或取消所有的下级权限
30 $(this).siblings("ul").find("input").attr("checked",this.checked);
31
32 //当选中一个权限时，也要选中所有的直接上级权限
33 if(this.checked ==true){
34 $(this).parents("li").children("input").attr("checked",true);
35 }
36
37 //当某一个父权限下的子权限都不选中时，该父权限也不选中
38 var elements=$(this).parent("li").parent("ul").find("input");
39 var num=elements.length;
40 /*alert(num);*/
41 var a=0;
42 for(var i=0;i<num;i++){
43 if(elements[i].checked==false){
44 a++;
45 }
46 }
47 if(a==num){
48 $(this).parent("li").parent("ul").siblings("input").attr("checked",false);
49 }
50
51
52 });
53 });
54 </script>
55 </head>
56 <body>
57
58 <!-- 标题显示 -->
59 <div id="Title_bar">
60 <div id="Title_bar_Head">
61 <div id="Title_Head"></div>
62 <div id="Title"><!--页面标题-->
63 <input type="checkbox" id="chkAll" onclick="$(‘[name=chkbox]‘).attr(‘checked‘,this.checked)">
64 <label for="chkAll">全选</label>
65 配置权限
66 </div>
67 <div id="Title_End"></div>
68 </div>
69 </div>
70
71 <!--显示表单内容-->
72 <div id=MainArea>
73
74
75 <ul id="tree">
76 <li>
77 <input type="checkbox" id="cb0" name="chkbox">
78 <label for="cb0"><span class="folder">系统管理</span></label>
79 <ul>
80 <li>
81 <input type="checkbox" id="cb1" name="chkbox">
82 <label for="cb1"><span class="folder">用户管理</span></label>
83 <ul>
84 <li><input type="checkbox" id="cb11" name="chkbox">
85 <label for="cb11"><span class="folder">用户列表</span></label></li>
86 <li><input type="checkbox" id="cb12" name="chkbox">
87 <label for="cb12"><span class="folder">新增用户</span></label></li>
88 <li><input type="checkbox" id="cb13" name="chkbox">
89 <label for="cb13"><span class="folder">修改用户</span></label></li>
90 <li><input type="checkbox" id="cb14" name="chkbox">
91 <label for="cb14"><span class="folder">删除用户</span></label></li>
92 </ul>
93 </li>
94 <li>
95 <input type="checkbox" id="cb2" name="chkbox">
96 <label for="cb2"><span class="folder">部门管理</span></label>
97 <ul>
98 <li><input type="checkbox" id="cb21" name="chkbox">
99 <label for="cb21"><span class="folder">部门列表</span></label></li>
100 <li><input type="checkbox" id="cb22" name="chkbox">
101 <label for="cb22"><span class="folder">新增部门</span></label></li>
102 <li><input type="checkbox" id="cb23" name="chkbox">
103 <label for="cb23"><span class="folder">修改部门</span></label></li>
104 <li><input type="checkbox" id="cb24" name="chkbox">
105 <label for="cb24"><span class="folder">删除部门</span></label></li>
106 </ul>
107 </li>
108 <li>
109 <input type="checkbox" id="cb3" name="chkbox">
110 <label for="cb3"><span class="folder">岗位管理</span></label>
111 <ul>
112 <li><input type="checkbox" id="cb31" name="chkbox">
113 <label for="cb31"><span class="folder">岗位列表</span></label></li>
114 <li><input type="checkbox" id="cb32" name="chkbox">
115 <label for="cb32"><span class="folder">新增岗位</span></label></li>
116 <li><input type="checkbox" id="cb33" name="chkbox">
117 <label for="cb33"><span class="folder">修改岗位</span></label></li>
118 <li><input type="checkbox" id="cb34" name="chkbox">
119 <label for="cb34"><span class="folder">删除岗位</span></label></li>
120 </ul>
121 </li>
122 <li>
123 <input type="checkbox" id="cb4" name="chkbox">
124 <label for="cb4"><span class="folder">审批流转</span></label>
125 <ul>
126 <li><input type="checkbox" id="cb41" name="chkbox">
127 <label for="cb41"><span class="folder">审批</span></label></li>
128 </ul>
129 </li>
130 </ul>
131 </li>
132
133 </ul>
134
135 </div>
136
137 <script language="javascript">
138 $("#tree").treeview();
139 </script>
140
141 <div class="Description">
142 说明：<br />
143 1，选中一个权限时：<br />
144 a，应该选中他的所有直系上级。<br />
145 b，应该选中他的所有直系下级。<br />
146 2，取消选择一个权限时：<br />
147 a，应该取消选择他的所有直系下级。<br />
148 b，如果同级的权限都是未选择状态，就应该取消选中他的直接上级，并向上做这个操作。<br />
149
150 3，全选/取消全选。<br />
151 4，默认选中当前岗位已有的权限。<br />
152 </div>
153
154 </body>
155 </html>
156
时间： 2024-10-09 03:54:41