带复选框的多级目录树，复选框的选择控制子节点父节点全选和反选

共5个文件

png：3个

bak：1个

html：1个

多级目录树

全选和反选

控制父节点

4星 · 超过85%的资源需积分: 45 47 浏览量 2012-11-13 18:51:38 上传评论 2 收藏 13KB ZIP 举报

在IT领域，尤其是在前端开发中，构建用户界面时经常需要处理多级目录树结构，并且在这样的结构中加入复选框功能，以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景。下面将详细讲解这个主题，包括复选框、多级目录树以及全选和反选的实现原理。 1. **复选框（Checkbox）**：复选框是用户界面中常用的一种控件，它允许用户在多个选项中进行多选。在HTML中，`<input type="checkbox">`元素用来创建一个复选框，用户可以勾选或取消勾选，通常配合`<label>`元素来提供描述文本。在JavaScript中，可以通过事件监听（如`change`事件）来响应用户对复选框的操作，获取或改变其状态。 2. **多级目录树（Nested Directory Tree）**：多级目录树是一种数据结构，它模仿了计算机文件系统的目录层次结构，用图形化的方式展示文件和目录的层级关系。在前端实现中，通常使用JSON对象来存储树形数据，每个节点包含一个标识符（ID）、名称、以及指向子节点的引用。展示时，可以通过递归函数将这些数据转化为可交互的HTML元素。 3. **全选和反选（Select All and Deselect All）**：在多级目录树中，全选和反选功能使得用户能够一次性选择所有节点或清空选择。实现这一功能通常需要遍历整个树结构，将所有节点的选中状态同步。如果根节点有一个复选框，点击它可以改变所有子节点的状态。当子节点的复选框状态改变时，也会影响到它的父节点，这涉及到“级联选择”或“联动选择”的逻辑。 4. **控制父节点（Controlling Parent Nodes）**：当用户勾选或取消一个子节点的复选框时，我们需要判断该操作是否会影响父节点的状态。如果一个父节点的所有子节点都已被选中，那么父节点也应该被选中；反之，如果所有子节点都被取消选中，父节点也应该取消选中。这种机制可以通过遍历子节点并计算选中状态的计数来实现。 5. **实现方法**：在JavaScript中，可以使用递归函数遍历树结构，根据当前节点的子节点状态更新自身状态。对于全选和反选操作，从根节点开始，遍历所有子节点并更改其状态。同时，还需要处理特殊情况，如部分子节点被选中，此时父节点应显示为半选状态。 6. **技术框架与库**：在实际开发中，我们可能会使用一些前端框架或库来简化这一过程，比如React、Vue或Angular，它们提供了组件化的思想，可以方便地构建这样的交互式树形组件。例如，React中有许多第三方库如`react-checkbox-tree`、`antd`的Tree组件等，它们内置了全选、反选和级联选择的功能。总结来说，带复选框的多级目录树是一种高效的数据组织和操作方式，结合全选和反选功能，能极大地提高用户的操作效率。在实现时，我们需要关注复选框的状态管理、多级目录树的数据结构以及父子节点间的联动逻辑，确保用户界面的交互性与功能性。

资源推荐

资源详情

资源评论

收起资源包目录

checkboxTree.zip （5个子文件）

checkboxTree

image

jian.png 3KB

wenben.png 3KB

jia.png 3KB

demo.html 6KB

demo.html.bak 6KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>带复选框的多级目录树</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> </head> <body>  <script language="Javascript"> //通过父来控制子 function fatherCheck(isFather){ var sonCheck = document.getElementById("div"+isFather.id).getElementsByTagName("input"); if(isFather.checked){ for (var i=0; i<sonCheck.length; i++){ sonCheck[i].checked=true; } }else{ for (var i=0; i<sonCheck.length; i++){ sonCheck[i].checked=false; } } } //通过子来控制父 function sonCheck(sonCheck,fatherId){ var father_Id = fatherId.split("_"); //alert(father_Id); //共4个父节点，收到的fatherId是第四个，即father_Id[0,1,2,3],他父节点的上一个父节点为fatherId[0,1,2] var all=father_Id.length-1; for(var i=all;i>=0;i--){//从最后一个父节点开始3,2,1,0 var thisFather=father_Id[0]; for(var j=1;j<=i;j++){//从1,2,3 thisFather+="_"+father_Id[j]; } //alert(thisFather); //thisFather是其中一个父节点 var ifCheck=1; var fathercheck = document.getElementById("div"+thisFather).getElementsByTagName("input"); for (var k=0; k<fathercheck.length; k++){//循环看此父节点中的复选框是否选中 if (fathercheck[k].type=="checkbox"&&!fathercheck[k].checked){//当存在没选中的情况，父节点不被选中并返回 document.getElementById(thisFather).checked=false; ifCheck=0; //return; } } //alert(ifCheck); if(ifCheck==1){ document.getElementById(thisFather).checked=true; }else{ document.getElementById(thisFather).checked=false; } } } //同时是子节点和父节点的 function fatherSonCheck(Check,fatherId){ fatherCheck(Check); sonCheck(Check,fatherId); } //显示与隐藏 function ifDisplay(divId){ var ifDisPlay=document.getElementById("div"+divId); if(ifDisPlay.style.display=="none"){ //alert(0); document.getElementById("div"+divId).style.display="block"; document.getElementById("img"+divId).src="image//jian.png"; }else{ document.getElementById("div"+divId).style.display="none"; document.getElementById("img"+divId).src="image//jia.png"; } } </script> <img src='image//jia.png' id="img01"/><input type="checkbox" id="01" onclick="fatherCheck(this);"><a onclick="ifDisplay('01');">书籍</a><br> <div id="div01" style="margin-left:15px;display:none;"> <img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'01');">语文<br> <img src='image//wenben.png'/><input type="checkbox" value="2" onclick="sonCheck(this,'01');">数学<br> <img src='image//jia.png' id="img01_01"/><input type="checkbox" id="01_01" onclick="fatherSonCheck(this,'01');"><a onclick="ifDisplay('01_01');">辅导资料</a><br> <div id="div01_01" style="margin-left:15px;display:none;"> <img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'01_01');">词典<br> <img src='image//jia.png' id="img01_01_01"/><input type="checkbox" value="2" id="01_01_01" onclick="fatherSonCheck(this,'01_01');"><a onclick="ifDisplay('01_01_01');">字帖</a><br> <div id="div01_01_01" style="margin-left:15px;display:none;"> <img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'01_01_01');">小学<br> <img src='image//wenben.png'/><input type="checkbox" value="2" onclick="sonCheck(this,'01_01_01');">初中<br> <img src='image//jia.png' id="img01_01_01_01"/><input type="checkbox" value="2" id="01_01_01_01" onclick="fatherSonCheck(this,'01_01_01');"><a onclick="ifDisplay('01_01_01_01');">高中</a><br> <div id="div01_01_01_01" style="margin-left:15px;display:none;"> <img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'01_01_01_01');">高一<br> <img src='image//wenben.png'/><input type="checkbox" value="2" onclick="sonCheck(this,'01_01_01_01');">高二<br> </div> </div> </div> </div> <img src='image//jia.png' id="img02"/><input type="checkbox" id="02" onclick="fatherCheck(this);"><a onclick="ifDisplay('02');">学校</a><br> <div id="div02" style="margin-left:15px;display:none;"> <img src='image//jia.png' id="img02_01"/><input type="checkbox" id="02_01" onclick="fatherSonCheck(this,'02');"><a onclick="ifDisplay('02_01');">高中</a><br> <div id="div02_01" style="margin-left:15px;display:none;"> <img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'02_01');">高一<br> <img src='image//wenben.png'/><input type="checkbox" value="2" onclick="sonCheck(this,'02_01');">高二<br> <img src='image//wenben.png'/><input type="checkbox" value="3" onclick="sonCheck(this,'02_01');">高三<br> </div> <img src='image//jia.png' id="img02_02"/><input type="checkbox" id="02_02" onclick="fatherSonCheck(this,'02');"><a onclick="ifDisplay('02_02');">初中</a><br> <div id="div02_02" style="margin-left:15px;display:none;"> <img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'02_02');">高一<br> <img src='image//wenben.png'/><input type="checkbox" value="2" onclick="sonCheck(this,'02_02');">高二<br> <img src='image//wenben.png'/><input type="checkbox" value="3" onclick="sonCheck(this,'02_02');">高三<br> </div> <img src='image//wenben.png'/><input type="checkbox" value="1" onclick="sonCheck(this,'02');">幼儿园<br> </div> </body> </html>

评论收藏

内容反馈