这是自己写的简单树形结构图,实现的功能有:
1.最左边的按钮实现子目录的隐藏和显示
2.点击父节点的复选框选中后,父节点下的所有的子节点也选中;父节点未选中,则下面的所有的子节点也取消选中(全选和全不选)
3.选中一个子节点时相应的父节点也选中;当所有的子节点都没有选中时,父节点也取消选中
这是实现的最简单的功能。下面来具体的谈谈具体的实现:
1.引入库
所有的这些操作都是通过JQuery来实现的,所以首先要引入JQuery库,可以到官网下载JQuery库,也可以通过CDN的方式来引用,这里我是通过CDN的方式引用的:
<!-- 引入JQuery -->
<script src="https://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
2.子目录的隐藏和显示
这里我只是做了一个简单的,可能看起来不是很美观,我的最左边放的是一个button按钮,并且没有经过CSS美化,所以看起来比较丑,不过这都不是重点,重点是我们功能的实现,由于我的代码比较简单并且注释我也写的比较详细了,所以这里我就不做过多的介绍,直接贴代码