本文是对jquery的Treeview插件使用的实例介绍
效果图如下：
文件结构如下：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAABRCAIAAACsfN9kAAAL+0lEQVR4nO2dX2wUxx3H97FPrZT3PlVGVFUqVeJlW6kPhbSiNG5LWlrCn5DSSYMSAiFp0lSlOQhqDC2rqBKqqlhYxMV1ajA2a2JsE3zGBv/BmD8+7MU257/YxlzAPt/5ztzeXR/238zszN7u4T939u8jhPd2d2Znd3/fmd9vbmZOUAEAcIGw3AUAgPwApAIArgCpAIArQCoA4AqQCgC4AqQCAK7wIJV4qDI6IUXGjoeHjs4Ei2buH33S/7fH9z4K9fqm7h58dO/v4cnGxSsoACwv7qWSiE4cT8xVJxMPI1P//mrw44EbHzyNXko+vaL9m498MXn340UsKQAsKx5alejE8USsJhGrSafVdFodur7n7rUP5x5XqvONiVjD00jt2I0Di1dQAFhespFKIlaTTqfvt/3+tv9PD+4cehqpnQ9Xx56cGencz06pSKIgSsrClDgnWHl3BGTCi1TGcamofS2v3Lr87ujNg7EnZ6Kh07MPTw53vMVOufIMa+XdEZAJD1KZfXBM08l8tCqVjPT6X+669NZw53uzD0+GH/xreuSTwfY3Fq+g2aJIooDk5S4FkP94kEp4tEjTSWzmf+rTycCXW27UvT7Uvn965JPHwaOhvsMjnfumBk4vXlmzAqQCLAwepDI9dETTSSRUOjdz7U795utfvBq8tifUd3iq98+T3e+M39o7cBUxUhLmKiMBQ/Ni8BM4JxvujnZYRoIgiAjhbpCMbD4Rdi1RUoi02pn2/O07CWdL/+BYSKwgMhKM8xjFA/IJD1J5HDyk6WR64tPQ8D9v1Ra2n982cGW3JpKxG6+FQqH+5t2MlJZhYaajfXCSCm5c5l5FEgUrD9IqWa0HnTV5fXv+rJ3WPmOPYyHxg6Io2vQD5CUepBLqP2jqZLL/aFfNT9vO/aqvcfvYjddGO3YNt24LhUJ9V37HSMm0Q/wjUypk84PX8ZgkzCw4SuE3WOz82Rc1rkIIll9IS2KipMhI3wVKyW88SOWh8oGpk7GAr/P8T66dKbx3actw67ahq1sGmzeHQqF7TbsYKbOWCsO66NhDs0F+ROIoFXv+nMpf223Ze+ZCkiKRQSl5jwepTAT+aOpkqOv9jqoXWj7fqNRvHmzeHGwqDDYV7qi7r/h3MlKyHTBFEnEHDDNCtrembdpEoUiiiBDXEvlSYefP3Gm7Ctel1DcVSRRFqwUy3TAgf/EglbHb+02d3G/f13FuQ0v5C70XCzWdBJsKN57u7m3cwUiJmygeA0tWlayFEUasTgYXgiAIPHM3suRbop4H7hjRx/D8OTtxCat2AbIzsXQDcUr+40Eqw11vmjrpa/lDx7kNzWXrcancb/rFQOs7jJQ892iBQl2ImIElwINUxnuke82v9Ph39DTu7Gnc1XFuQ1PZpsDFLb3+nb2NO3oubx9oPfBoqMaekFurLoiNO/REC5z4BQC8422+Sjw69Wj4Yl/bXzvlF1uqdvffPDMXfpD5GjyLfWapaMoAPQBLAEztAgBXgFQAwBUgFQBwBUgFAFwBUgEAV7iVis8LggAKBFYaHqSSJqHkYe73+/0gFWDlkaVUfD5fOi2k02ntf00eIBVgBZONVLRtn0/Q/mna0PwutlRW5yAol3e9Oh9OHuJZKphmLGH4fD6zYclFqcgow5f62Chnz0ed8gSprByylIrZpODkpAOmmTk+XJl5jihyDdb5KLBayE4q7CglJ6Wi4bQYhTEPiy0G56PA6iHrWEWgYhUnqSzbMhTsEtBHiDnB7o/KSBAlWZ+sok/Bx4tKzb+XyKOsorFnygC5wZL0gC3nMhR0prz9LDE4H8VWfsFHONvn3+Ohkj0yYZwP5CJZtirmV41aw4KrxUkqS7EMhZkMvxLbDKnZmZQYnI+S+1jbXM1zpKKXHBy9HCXLsJ7qIE6nhUWRygIsQ8FOZe6kYc4bZhxVF0Eq+HVBMDmHN6kYghE0nZg+WFYO2NIsQ0GXwPjEWF0PK4Gbo88mFTMfzAGT+OsHAMtONq2K3+/3+/1ak6Jtewjrl3oZCrpxMBa8yz2p4M8GhJJ7ZBOr2PySTJ3FsAyFA9CE5AkepOJ3DSWVJVyGIv+AL+vzBbdSsbckzpBpYRkKFrq/la/FX23k2tfqAJCjgFQAwBUgFQBwBUgFAFwBUgEAV3iTSiAQqLPR0NBQV1cXCAQWqYgAkAt4k0ptbW3KRjweb/jy8nlZBrUAKxhvUqmpqUmlUqqqqklVTep/1WSyWr6QSCTOVVV3d3cvfBkBIAfwJhVZllOplJrUFKL/VVVVvlArX6itvVh/5uxZdkpFEnk/1YhP+cDRJh/qY7bwSS70aEk6Y3zwrm0gr5UNB9uoNKeTnMkwkAD/ol6/DeZj0n4oj1NmbGydw6WopAghYlAenfLZh1E4Fycv8SaV6urqVCqlJhKxWDwyG5mZmZ6eno5EZuOx+MjI2PDwyKnPStkpNRvAzM8afUjMYzSG35vjDEkDslu+s1S479wwP7f7s8BRa9gISZH1a624HC2pOA0KdZjjo19IP0PfJSMByZyaBKTCwJtUKisrE4nEzKMJuWtwz+XxfR3ht6/P7r06Xt8zGo1GE4lEZWWlPRX2/iyLRwjZXmhGqZgHOGYoIiRimcqMs2yDeLkW+mxgv8NtP2Ift4w9GNvcFaPkCNlvyXguVioZbzBY1ZDWWrMfi3WyveieBtuteqlUVFRE5+b6j/2s/x8/+PzI1rVn2398KbT2bPD2yOCA0hCPz1dUVLBT6o9Of3nWO9SrNbbpG34C5Z0QVSGjVbFqasY8dlMqC9qq0KXgGCSuRsX6jUp+PtgjIspGFFMXim7KdD1jnmSvC7g3C1Jh4E0q5eXls7OzQ4efH319zfiRNW3Sy1/79M5zUvtnTXeGe/dFIpHy8nJmQmtkoKxVjUgyzd8eV7BbFWImMFNb1oww7EVTk2XctSrOzhNlcWqGGMNht7OksMUEtMiNKRUzOTkhzrwFUji2q3Nel7VuBrHEhn7jmZbgAKmUlZWFw+HpY98a2r2mZf+67x4o/eb+819/tbS3tyT64Gg4HC4rK2MkUySEkIhkRULa3F6rhWHGFfzQ3ZopyMV4aZYmcOcka/fKOSlHKhlVhuVqhRvEhQxHzvhLipjhtxHLA1qPl5pSx5alas/D6nuwTdDDOxvoKaqrXiqlpaXhcLh727eDWwuublh7fO+md//ym2+sfz8+fmj25vqZcLi0lBHWKxKSZOtlmrW+vp9qSYhtvLLCjQTJjHrfaKW06cMy0voRkKwqEjLshXJl7M4NGehadqtv0XEwP442DjuKk2go7NW+Vn5GWE85YNjF9QdABX3M7PlTZZiLAfCW5WBur3qplJSURCPR+l+K3RsLgtsLyrau++H3X2ouej5y5bnOD78XiURKSkrsqWRJUsjInJh/y3pbvL5l/hn6Z/1a5sslq13c8k1l4WZIh0Gs+p9lBc/cquBNKmZssiQprB4wbhun27MiiQJCiLgSLRVFEpFkVCK2koNUaLxJpbi4OB6fv/yfk1XrvhPYVBDcVjD6RsHEewXKm2uay0/Oz88XFxezU5q2Sj1K0gHjQtSEgiAIRqxDX0DF8qQbHlGSaEedlArxfikR48bposvacmHw3ikzkCAyImt3q9R0R5aM7L4T6V4hySwZ3WRo94Z5p7YeFs6yASAVHW9SOXHihKqqExOT9VXnT77021MbfnTqxfX//fXPL5adnpycMk9goHsStufnoVXB/GOVGXjbHfSMubJ6l4yL0UrET6AvYesBk0grpYto7hfFzN1KGb5XsboxDGPWno3WHY8HFIJgeHNM884gFbzPDqSSCUmSkslkPB6fnpm5fae7ta29ta2j6+at0FehWCyWTCYlSWKnZPfpmvWi1x4nrgOmb/LiCfb3dE7XIvrd3EMGVoyiWCEI/96pjm1muem2jojq9czxByUj+1rnnrqBVy3epFJUVJR0pKioaJEKCgDLi+evID9yhPsVJADkOTC1CwBcAVIBAFeAVADAFSAVAHAFSAUAXAFSAQBXgFQAwBUgFQBwBUgFAFwBUgEAV4BUAMAVIBUAcAVIBQBcAVIBAFeAVADAFSAVAHDF/wEexqpEaAU/HQAAAABJRU5ErkJggg==" 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 />
a，应该选中他的所有直系上级。<br />
b，应该选中他的所有直系下级。<br />
2，取消选择一个权限时：<br />
a，应该取消选择他的所有直系下级。<br />
b，如果同级的权限都是未选择状态，就应该取消选中他的直接上级，并向上做这个操作。<br /> 3，全选/取消全选。<br />
4，默认选中当前岗位已有的权限。<br />
</div> </body>
</html>