Tree菜单 复选框选中控制DEMO
java 对应实体类属定义
public class AccoSysmanResource{
/**
* 资源类型
*/
private Integer resourceType;
/**
* 权限名称
*/
private String name;
/**
* 权限描述
*/
private String description;
/**
* 排序
*/
private Integer level;
/**
* 子节点
*/
private List<AccoSysmanResource> subResource;
private Integer pid;
private Integer deleteFlag;
private Integer pMenuId;
private Date createtime;
}
jsp页面循环遍历属性结构代码
<!-- tree_start -->
<div class="col-md-3">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="sour">
<div class="data-div">
<div class="row tableHeader">
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
<label>
<input name="checkname" type="checkbox" value="0" onclick="checkboxById(this,'biz')"/>菜单 全选
</label>
</div>
</div>
<div class="tablebody">
<div id="collapseSystem" class="collapse in" aria-expanded="true">
<!-- 第一层 start -->
<c:forEach items="${bizList}" var="menu" varStatus="rows">
<div class="row">
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 levl3" role="button" >
<c:if test="${empty menu.subResource}" var="biz_not_empty_subResource">
<span class="glyphicon glyphicon-pushpin"></span>
</c:if>
<c:if test="${not biz_not_empty_subResource}">
<i id="down_biz_${rows.index}" class="glyphicon glyphicon-hand-down" style="display: ${rows.index==0 ? 'none':''};"></i>
<i id="up_biz_${rows.index}" class="glyphicon glyphicon-hand-up" style="display: ${rows.index!=0 ? 'none':''};"></i>
</c:if>
<label>
<input name="bizMenuId" type="checkbox" value="${menu.pid}" id="biz_${rows.index}" onclick="checkboxById(this,'biz_${rows.index}_')"/>
</label>
<span role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_biz_${rows.index}" aria-expanded="true" onclick="dom('biz_${rows.index}')">${menu.name}</span>
</div>
</div>
<!-- 第二层 start -->
<c:if test="${not biz_not_empty_subResource}">
<div id="collapse_biz_${rows.index}" class="${rows.index==0 ? 'collapse in':'collapse'}" aria-expanded="${rows.index==0 ? 'true':'false'}">
<c:forEach items="${menu.subResource}" var="m" varStatus="i">
<div class="row" style="border-top:1px solid #E3E8EE;">
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 levl3">
<label>
<input name="bizMenuId" value="${m.pid}" type="checkbox" id="biz_${rows.index}_${i.index}" onclick="checkboxById(this,'biz_${rows.index}_${i.index}_')" />
<span role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" href="#collapse_biz_${rows.index}_${i.index}" >
<c:if test="${empty m.subResource}" var="biz_not_empty_m_subResource">
|--${m.name}
</c:if>
<c:if test="${not biz_not_empty_m_subResource}">
<span class="glyphicon glyphicon-triangle-bottom"></span>${m.name}
</c:if>
</span>
</label>
</div>
</div>
<!-- 第三层start -->
<c:if test="${not biz_not_empty_m_subResource}">
<div id="collapse_biz_${rows.index}_${i.index}" class="collapse in" aria-expanded="true" >
<c:forEach items="${m.subResource}" var="m2" varStatus="i3">
<div class="row" style="border-top:1px solid #E3E8EE;">
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 levl3" >
<label>
<input name="bizMenuId" value="${m2.pid}" type="checkbox" id="biz_${rows.index}_${i.index}_${i3.index}" onclick="childCheckboxById(this,'biz_${rows.index}_${i.index}_${i3.index}')" />
<span>|----${m2.name}</span>
</label>
</div>
</div>
</c:forEach>
</div>
</c:if>
<!-- 第三层end -->
</c:forEach>
</div>
</c:if>
<!-- 第二层 end -->
</c:forEach>
<!-- 第一层 end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- tree_end -->
js文件（必须先导入Jquery.js 文件）
/** 全选 */
function checkboxAll(obj, cheName) {
if ($(obj).prop("checked")){
$("input[name='" + cheName + "']").prop("checked", true);
} else {
$("input[name='" + cheName + "']").prop("checked", false);
}
}
/**cheId开头的Id全选*/
function checkboxById(obj, cheId){
var parent2=cheId.substr(0,cheId.lastIndexOf('_'));
var parent1=parent2.substr(0,parent2.lastIndexOf('_'));
if ($(obj).prop("checked")){
$("input[id='" + parent1 + "']").prop("checked", true);
$("input[id^='" + cheId + "']").prop("checked", true);
} else {
$("input[id^='" + cheId + "']").prop("checked", false);
var parent3=parent1+"_";
var index=0;
$("input[id^='"+parent3+"']:checked").each(function(){
index++;
});
if(index==0){
$("input[id='" + parent1 + "']").prop("checked", false);
}
}
}
/**三级节点点击触发**/
function childCheckboxById(obj, parentCheId){
var parent2=parentCheId.substr(0,parentCheId.lastIndexOf('_'));
var parent1=parent2.substr(0,parent2.lastIndexOf('_'));
if ($(obj).prop("checked")){
$("input[id='" + parentCheId + "']").prop("checked", true);
$("input[id='" + parent2 + "']").prop("checked", true);
$("input[id='" + parent1 + "']").prop("checked", true);
} else {
$("input[id='" + parentCheId + "']").prop("checked", false);
var parent3=parent2+"_";
var index=0;
$("input[id^='"+parent3+"']:checked").each(function(){
index++;
});
if(index==0){
$("input[id='" + parent2 + "']").prop("checked", false);
}
var parent4=parent1+"_";
var index2=0;
$("input[id^='"+parent4+"']:checked").each(function(){
index2++;
});
if(index2==0){
$("input[id='" + parent1 + "']").prop("checked", false);
}
}
}
