本文是對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