HTML 代码 所需文件我也一并上传
链接：https://pan.baidu.com/s/1bAB2Pf5Dp5BDqEsMyrmWow?pwd=6666
提取码：6666
效果图
需要注意的是这个不用多维数组但是要给一个标识来区分下面使用1.1.1.1 来区分对应的下级
但是在做项目中我是用ID.ID.ID 来设置的也可以
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery TreeTable with checkbox</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-treetable/3.2.0/jquery.treetable.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.theme.default.css">
<script type="text/javascript">
$(function(){
// initialize treeTable
$("#example-basic").treetable({
expandable : true,
initialState:"expanded",
//expandable : true
clickableNodeNames:false,//点击节点名称也打开子节点.
indent : 30//每个分支缩进的像素数。
});
// Highlight a row when selected
$("#example-basic tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
$("#example-basic input[type=checkbox]").click(function(e){
checkboxClickFn(this);
});
});
function checkboxClickFn(_this, autoFlag, parentSelectedFlag){
var checked = $(_this).attr("checked");
var menuId = $(_this).parent().parent().attr("data-tt-id");
var parentMenuId = $(_this).parent().parent().attr("data-tt-parent-id");
var childCount = $("#example-basic").find("[data-tt-parent-id='"+menuId+"']").find("input[type=checkbox]").length;
if(autoFlag){//自动触发
if(parentSelectedFlag){//如果是需要选中其父节点
//将其直接的父节点置为选中状态
$("#example-basic").find("[data-tt-id='"+parentMenuId+"']").find("input[type=checkbox]").each(function(){
$(this).attr("checked",true).prop("checked",true);
if(parentMenuId == "0"){
return;//已经到根节点，直接返回
}
//自动将该节点的父节点的父节点选中
checkboxClickFn(this,true,true);
});
return;
}
if(checked){//如果是已经选中，则其子菜单全部选中
if(childCount == 0){
return;
}
$("#example-basic").find("[data-tt-parent-id='"+menuId+"']").find("input[type=checkbox]").each(function(){
$(this).attr("checked",true).prop("checked",true);
checkboxClickFn(this,true);
});
}else{//如果是取消选中，则其子菜单全部取消选中
if(childCount == 0){
return;
}
$("#example-basic").find("[data-tt-parent-id='"+menuId+"']").find("input[type=checkbox]").each(function(){
$(this).prop("checked",false).removeAttr("checked");
checkboxClickFn(this,true);
});
}
return;
}
//手动触发
if(!checked){
$(_this).attr("checked",true);
$(_this).prop("checked",true);
//将其直接的父节点置为选中状态
if(menuId != "0"){//选中的不是根节点
$("#example-basic").find("[data-tt-id='"+parentMenuId+"']").find("input[type=checkbox]").each(function(){
$(this).attr("checked",true).prop("checked",true);
//自动将该节点的父节点的父节点选中
checkboxClickFn(this,true,true);
});
}
if(childCount == 0){
return;
}
$("#example-basic").find("[data-tt-parent-id='"+menuId+"']").find("input[type=checkbox]").each(function(){
$(this).attr("checked",true).prop("checked",true);
checkboxClickFn(this,true);
});
}else{
$(_this).prop("checked",false).removeAttr("checked");
if(childCount == 0){
return;
}
$("#example-basic").find("[data-tt-parent-id='"+menuId+"']").find("input[type=checkbox]").each(function(){
$(this).prop("checked",false).removeAttr("checked");
checkboxClickFn(this,true);
});
}
}
function checkall(che){
var checked = $(che).attr('checked');
if(!checked){
$('tbody').find("input[type=checkbox]").each(function(){
$(this).attr("checked",true).prop("checked",true);
checkboxClickFn(this,true,true);
})
}else{
$('tbody').find("input[type=checkbox]").each(function(){
$(this).prop("checked",false).removeAttr("checked");
checkboxClickFn(this,true);
})
}
}
</script>
</head>
<body>
<table id="example-basic" class="treetable">
<caption>
<a href="#" onclick="jQuery('#example-basic').treetable('expandAll'); return false;">Expand all</a>
<a href="#" onclick="jQuery('#example-basic').treetable('collapseAll'); return false;">Collapse all</a>
</caption>
<thead>
<tr>
<th>Tree column</th>
<th>Additional data 全选 <input type="checkbox" onclick="checkall(this)"/></th>
</tr>
</thead>
<tbody>
<tr data-tt-id="1" data-tt-branch="true" class="branch collapsed selected">
<td><span style="padding-left: 0px;"><a href="#" title="Expand"></a></span><input type="checkbox"/>1: column 1</td>
<td>1: column 2</td>
</tr>
<tr data-tt-id="1.1" data-tt-parent-id="1" data-tt-branch="true" class="branch expanded">
<td><span style="padding-left: 19px;"><a href="#" title="Collapse"></a></span><input type="checkbox"/>1.1: column 1</td>
<td>1.1: column 2</td>
</tr>
<tr data-tt-id="1.1.1" data-tt-parent-id="1.1">
<td><span style="padding-left: 38px;"></span><input type="checkbox"/>1.1.1: column 1</td>
<td>1.1.1: column 2</td>
</tr>
<tr data-tt-id="1.1.2" data-tt-parent-id="1.1">
<td><span style="padding-left: 38px;"></span><input type="checkbox"/>1.1.2: column 1</td>
<td>1.1.2: column 2</td>
</tr>
<tr data-tt-id="1.2" data-tt-parent-id="1">
<td><span style="padding-left: 19px;"></span><input type="checkbox"/>1.2: column 1</td>
<td>1.2: column 2</td>
</tr>
<tr data-tt-id="1.3" data-tt-parent-id="1">
<td><span style="padding-left: 19px;"></span><input type="checkbox"/>1.3: column 1</td>
<td>1.3: column 2</td>
</tr>
<tr data-tt-id="2" data-tt-branch="true">
<td><span style="padding-left: 0px;"><a href="#" title="Expand"></a></span><input type="checkbox"/>2: column 1</td>
<td>2: column 2</td>
</tr>
<tr data-tt-id="2.1" data-tt-parent-id="2">
<td><span style="padding-left: 19px;"></span><input type="checkbox"/>2.1: column 1</td>
<td>2.1: column 2</td>
</tr>
<tr data-tt-id="2.2" data-tt-parent-id="2">
<td><span style="padding-left: 19px;"></span><input type="checkbox"/>2.2: column 1</td>
<td>2.2: column 2</td>
</tr>
<tr data-tt-id="2.3" data-tt-parent-id="2">
<td><span style="padding-left: 19px;"></span><input type="checkbox"/>2.3: column 1</td>
<td>2.3: column 2</td>
</tr>
<tr data-tt-id="3" data-tt-branch="true">
<td><span style="padding-left: 0px;"><a href="#" title="Expand"></a></span><input type="checkbox"/>3: column 1</td>
<td>3: column 2</td>
</tr>
<tr data-tt-id="3.1" data-tt-parent-id="3">
<td><span style="padding-left: 19px;"></span><input type="checkbox"/>3.1: column 1</td>
<td>3.1: column 2</td>
</tr>
<tr data-tt-id="3.2" data-tt-parent-id="3">
<td><span style="padding-left: 19px;"></span><input type="checkbox"/>3.2: column 1</td>
<td>3.2: column 2</td>
</tr>
<tr data-tt-id="3.3" data-tt-parent-id="3">
<td><span style="padding-left: 19px;"></span><input type="checkbox"/>3.3: column 1</td>
<td>3.3: column 2</td>
</tr>
</tbody>
</table>
</body>
</html>
标签：function,checkbox,checked,column,Layui,treetable,单选,true,find From： https://www.cnblogs.com/wzsoul/p/16808545.html