首页 > 代码库 > jquery Treeview插件的使用及复选框的级联
jquery Treeview插件的使用及复选框的级联
本文是对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
jquery Treeview插件的使用及复选框的级联
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。