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