jquery Treeview插件的使用及复选框的级联

　　本文是对jquery的Treeview插件使用的实例介绍

　　效果图如下：

　　

　　文件结构如下：

　　aaarticlea/png;base64,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" alt="" />

　　jquery_treeview下的目录：

　　aaarticlea/png;base64,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" alt="" />

　　树型结构显示+复选框级联.html的内容：

　　

 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>配置权限</title>
     <script language="javascript" src="jquery-1.4.4.min.js"></script>
     <script language="javascript" src="jquery_treeview/jquery.treeview.js"></script>
     <link type="text/css" rel="stylesheet" href="jquery_treeview/jquery.treeview.css" />

     <style>
         span.folder{
             background-image: url("jquery_treeview/images/folder.gif");
             background-repeat: no-repeat;
             font-size: 14px;
             padding-left: 20px;
             height: 17px;
         }

         /*ul li{
             list-style: none;
         }*/
     </style>

     <script type="text/javascript">

         $(function(){

             $("[name=chkbox]").click(function(){

                 //当选中或取消一个权限时，也同时选中或取消所有的下级权限
                 $(this).siblings("ul").find("input").attr("checked",this.checked);

                 //当选中一个权限时，也要选中所有的直接上级权限
                 if(this.checked ==true){
                     $(this).parents("li").children("input").attr("checked",true);
                 }

                 //当某一个父权限下的子权限都不选中时，该父权限也不选中
                 var elements=$(this).parent("li").parent("ul").find("input");
                 var num=elements.length;
                 /*alert(num);*/
                 var a=0;
                 for(var i=0;i<num;i++){
                     if(elements[i].checked==false){
                         a++;
                     }
                 }
                 if(a==num){
                     $(this).parent("li").parent("ul").siblings("input").attr("checked",false);
                 }

             });
         });
     </script>
 </head>
 <body>

 <!-- 标题显示 -->
 <div id="Title_bar">
     <div id="Title_bar_Head">
         <div id="Title_Head"></div>
         <div id="Title"><!--页面标题-->
             <input type="checkbox" id="chkAll" onclick="$('[name=chkbox]').attr('checked',this.checked)">
             <label for="chkAll">全选</label>
              配置权限
         </div>
         <div id="Title_End"></div>
     </div>
 </div>

 <!--显示表单内容-->
 <div id=MainArea>

     <ul id="tree">
         <li>
             <input type="checkbox" id="cb0" name="chkbox">
             <label for="cb0"><span class="folder">系统管理</span></label>
         <ul>
             <li>
                 <input type="checkbox" id="cb1" name="chkbox">
                 <label for="cb1"><span class="folder">用户管理</span></label>
                 <ul>
                     <li><input type="checkbox" id="cb11" name="chkbox">
                         <label for="cb11"><span class="folder">用户列表</span></label></li>
                     <li><input type="checkbox" id="cb12" name="chkbox">
                         <label for="cb12"><span class="folder">新增用户</span></label></li>
                     <li><input type="checkbox" id="cb13" name="chkbox">
                         <label for="cb13"><span class="folder">修改用户</span></label></li>
                     <li><input type="checkbox" id="cb14" name="chkbox">
                         <label for="cb14"><span class="folder">删除用户</span></label></li>
                 </ul>
             </li>
             <li>
                 <input type="checkbox" id="cb2" name="chkbox">
                 <label for="cb2"><span class="folder">部门管理</span></label>
                 <ul>
                     <li><input type="checkbox" id="cb21" name="chkbox">
                         <label for="cb21"><span class="folder">部门列表</span></label></li>
                     <li><input type="checkbox" id="cb22" name="chkbox">
                         <label for="cb22"><span class="folder">新增部门</span></label></li>
                     <li><input type="checkbox" id="cb23" name="chkbox">
                         <label for="cb23"><span class="folder">修改部门</span></label></li>
                     <li><input type="checkbox" id="cb24" name="chkbox">
                         <label for="cb24"><span class="folder">删除部门</span></label></li>
                 </ul>
             </li>
             <li>
                 <input type="checkbox" id="cb3" name="chkbox">
                 <label for="cb3"><span class="folder">岗位管理</span></label>
                 <ul>
                     <li><input type="checkbox" id="cb31" name="chkbox">
                         <label for="cb31"><span class="folder">岗位列表</span></label></li>
                     <li><input type="checkbox" id="cb32" name="chkbox">
                         <label for="cb32"><span class="folder">新增岗位</span></label></li>
                     <li><input type="checkbox" id="cb33" name="chkbox">
                         <label for="cb33"><span class="folder">修改岗位</span></label></li>
                     <li><input type="checkbox" id="cb34" name="chkbox">
                         <label for="cb34"><span class="folder">删除岗位</span></label></li>
                 </ul>
             </li>
             <li>
                 <input type="checkbox" id="cb4" name="chkbox">
                 <label for="cb4"><span class="folder">审批流转</span></label>
             <ul>
                 <li><input type="checkbox" id="cb41" name="chkbox">
                     <label for="cb41"><span class="folder">审批</span></label></li>
             </ul>
             </li>
         </ul>
         </li>

     </ul>

 </div>

 <script language="javascript">
     $("#tree").treeview();
 </script>

 <div class="Description">
     说明：<br />
     1，选中一个权限时：<br />
     &nbsp;&nbsp;&nbsp;&nbsp; a，应该选中他的所有直系上级。<br />
     &nbsp;&nbsp;&nbsp;&nbsp; b，应该选中他的所有直系下级。<br />
     2，取消选择一个权限时：<br />
     &nbsp;&nbsp;&nbsp;&nbsp; a，应该取消选择他的所有直系下级。<br />
     &nbsp;&nbsp;&nbsp;&nbsp; b，如果同级的权限都是未选择状态，就应该取消选中他的直接上级，并向上做这个操作。<br />

     3，全选/取消全选。<br />
     4，默认选中当前岗位已有的权限。<br />
 </div>

 </body>
 </html>