js树形控件，html+css+js资源-CSDN文库

共118个文件

gif：75个

js：23个

css：8个

javascript

开发语言

ecmascript

需积分: 9 120 浏览量 2022-02-12 17:10:59 上传评论收藏 751KB ZIP 举报

在前端开发中，树形控件是一种常见的UI组件，它以层级结构展示数据，常用于文件目录、组织架构、导航菜单等场景。本教程将详细探讨如何使用HTML、CSS和JavaScript来实现一个基本的树形控件。我们需要创建HTML结构来表示树形节点。每个节点通常包含一个可点击的标签（``或`<a>`），以及可折叠/展开的箭头图标。例如： ```html <div id="tree"> <div class="node"> 父节点1 <ul class="children" style="display:none;"> <li class="node"> 子节点1.1 </li> <li class="node"> 子节点1.2 </li> </ul> </div>  </div> ``` 接下来是CSS部分，用于样式化我们的树形控件。我们可以定义基本的样式，如字体、颜色、布局等，以及针对展开/折叠状态的特殊样式： ```css #tree { font-family: Arial, sans-serif; } .node { cursor: pointer; } .toggle { display: inline-block; width: 15px; text-align: center; } .label { margin-left: 20px; } .children { padding-left: 20px; } .open .toggle::before { content: "▾"; } .closed .toggle::before { content: "▸"; } ``` 我们使用JavaScript（这里假设使用ECMAScript 6语法）来添加交互性。主要功能包括点击节点时切换子节点的显示和更新展开/折叠图标： ```javascript document.addEventListener('DOMContentLoaded', () => { const nodes = document.querySelectorAll('.node'); nodes.forEach(node => { const toggle = node.querySelector('.toggle'); const children = node.querySelector('.children'); toggle.addEventListener('click', () => { children.classList.toggle('open'); toggle.classList.toggle('open'); }); }); }); ``` 这段代码会监听所有具有`.node`类的元素，并为它们添加点击事件监听器。当点击时，切换子节点的`open`类，以控制其显示隐藏，并相应地更新`toggle`元素的`open`类，改变展开/折叠图标。当然，这只是一个简单的实现，实际项目中可能需要处理更复杂的情况，如异步加载子节点、多选功能、拖放操作等。可以考虑使用现成的库，如jQuery UI的Treeview、Angular的ngTreeControl或React的react-treebeard，它们提供了更丰富的功能和优化的性能。在"tree-3.10"这个压缩包文件中，可能包含了实现上述功能的源代码，供开发者参考和学习。通过阅读和理解这些代码，开发者可以加深对JavaScript前端开发的理解，进一步提升在实际项目中的应用能力。

资源详情

资源评论

资源推荐

收起资源包目录

js 树形控件，html+css+ js （118个子文件）

IE.css 110KB

bootstrap.min.css 105KB

layui.css 73KB

layer.css 14KB

layui.mobile.css 10KB

laydate.css 7KB

style.css 2KB

code.css 1KB

iconfont.eot 46KB

59.gif 10KB

22.gif 10KB

24.gif 8KB

13.gif 7KB

16.gif 7KB

39.gif 6KB

64.gif 6KB

63.gif 6KB

50.gif 6KB

loading-0.gif 6KB

4.gif 6KB

1.gif 5KB

42.gif 5KB

71.gif 5KB

21.gif 5KB

20.gif 5KB

29.gif 5KB

70.gif 4KB

5.gif 4KB

17.gif 4KB

27.gif 4KB

9.gif 4KB

44.gif 4KB

11.gif 4KB

8.gif 4KB

3.gif 4KB

23.gif 4KB

34.gif 4KB

41.gif 4KB

38.gif 4KB

65.gif 3KB

32.gif 3KB

45.gif 3KB

7.gif 3KB

12.gif 3KB

26.gif 3KB

60.gif 3KB

2.gif 3KB

40.gif 3KB

25.gif 3KB

19.gif 3KB

66.gif 3KB

18.gif 3KB

46.gif 3KB

10.gif 3KB

28.gif 3KB

51.gif 3KB

57.gif 3KB

67.gif 3KB

0.gif 3KB

48.gif 3KB

43.gif 3KB

30.gif 2KB

61.gif 2KB

33.gif 2KB

69.gif 2KB

14.gif 2KB

47.gif 2KB

36.gif 2KB

49.gif 2KB

58.gif 2KB

6.gif 2KB

54.gif 2KB

53.gif 2KB

56.gif 2KB

62.gif 2KB

31.gif 2KB

55.gif 2KB

35.gif 2KB

15.gif 2KB

loading-2.gif 2KB

37.gif 1KB

68.gif 1KB

52.gif 777B

loading-1.gif 701B

index.html 7KB

layui.all.js 272KB

jquery.js 95KB

jquery-3.5.1.min.js 87KB

table.js 31KB

mobile.js 31KB

laydate.js 27KB

layer.js 22KB

layedit.js 12KB

colorpicker.js 11KB

tree.js 11KB

form.js 9KB

layui.js 7KB

upload.js 7KB

element.js 7KB

slider.js 7KB

共 118 条

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link rel="stylesheet" href="./layui/css/layui.css" /> <link rel="stylesheet" type="text/css" href="css/IE.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div class="tree"> <ul> <li>  行政中心否定报备表 <a href="">删除</a> <ul> <li class="hidebox"> XXXXXXX许可证 <a href="">删除</a> <ul> <li> XXXXX证书附件 <a href="">删除</a> </li> </ul> </li> <li class="hidebox"> XXXXXXX许可证444 <a href="">删除</a> <ul> <li> XXXXX证书附件 <a href="">删除</a> </li> <li> XXXXX证书附件 <a href="">删除</a> <ul> <li class="hidebox"> XXXXX证书附件<a href="">删除</a> <ul> <li> XXXXX证书附件<a href="">删除</a> </li> <li> XXXXX证书附件<a href="">删除</a> </li> </ul> </li> <li> XXXXXXX许可证<a href="">删除</a> </li> <li> XXXXXXX许可证<a href="">删除</a> </li> </ul> </li> </ul> </li> </ul> </li> <li> 行政中心否定报备表2 <a href="">删除</a> <ul> <li> XXXXXXX许可2证<a href="">删除</a> </li> </ul> </li> </ul> </div> </body> <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script> <script type="text/javascript"> $(function () { $(".tree li:has(ul)") .addClass("parent_li") .find(" > span") .attr("title", "Collapse this branch"); // $('.tree li.parent_li > span').parent('li.parent_li').find(' > ul > li').hide() // 带hidebox类名的子集隐藏 $(".hidebox > ul > li").hide(); $(".hidebox > span") .attr("title", "Collapse this branch") .find(">i") .addClass("icon-plus-sign") .removeClass("icon-minus-sign"); // 点击事件 $(".tree li.parent_li > span").on("click", function (e) { var children = $(this) .parent("li.parent_li") .find(" > ul > li"); if (children.is(":visible")) { children.hide("fast"); $(this) .attr("title", "Expand this branch") .find(" > i") .addClass("icon-plus-sign") .removeClass("icon-minus-sign"); } else { children.show("fast"); $(this) .attr("title", "Collapse this branch") .find(" > i") .addClass("icon-minus-sign") .removeClass("icon-plus-sign"); } e.stopPropagation(); }); // $(".tree i.icon-folder-open").after(''); }); </script> </html>