jQuery treetable 实现checkbox树，并能联动选择
jQuery treetable插件地址：jQuery.treetablegithub项目地址：https://github.com/ludo/jquery-treetable由于jQuery treetable只是实现了基本的树形table的数据展示功能，并没有提供诸如checkbox或者radio的形式，项目中需要使用，所以自己来实现，直接贴代码<html>&
·
jQuery treetable插件地址：jQuery.treetable
github项目地址：https://github.com/ludo/jquery-treetable
由于jQuery treetable只是实现了基本的树形table的数据展示功能，并没有提供诸如checkbox或者radio的形式，项目中需要使用，所以自己来实现，直接贴代码
<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);
});
}
}
</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</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>效果如下图：
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)