javascript动态树形结构的实现

最新推荐文章于 2022-05-25 19:09:09 发布
最新推荐文章于 2022-05-25 19:09:09 发布
阅读量945 收藏
点赞数
分类专栏： 技术存档 文章标签： javascript function html div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tjbklx33/article/details/3940056
版权

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>Untitled Document</title>

        <script type="text/javascript">

            function all(){

                node('d1', 'd0', '111');

                node('d2', 'd1', 'aaa');

                node('d3', 'd2', 'bbb');

                node('d4', 'd1', 'ccc');

                node('d5', 'd1', 'ddd');

                node('d6', 'd4', 'eee');
 
               node('d7', 'd3', 'fff');
 
               node('d8', 'd0', '222');
 
           }

           

            function node(id, pid, txt){

                var kong = ""

                var father = document.getElementById(pid);

                var child = document.createElement("div");

                child.id = id;

                for (var i = 0; i < father.age - 0; i++) {

                    kong = kong + "&nbsp;&nbsp;";

                }

                child.age = (father.age - 0 + 1);

                child.innerHTML = kong + txt;

                child.onclick = show;

                father.appendChild(child);
 
               if (pid != "d0") {

                    child.style.display = "none";

                }

            }

           

            function show(){

                window.event.cancelBubble = true;

                var parents = window.event.srcElement.id;

                var childs = document.getElementById(parents).childNodes;

                for (var i = 1; i < childs.length; i++) {

                    if (childs[i].style.display == "none")

                        childs[i].style.display = "block";

                    else

                        childs[i].style.display = "none";

                }

            }

        </script>

    </head>

    <body οnlοad="all()">

        <div id="d0" age="0">

        </div>

    </body>

</html>

 

tjbklx33
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js动态树型结构 树型菜单
12-27
完美的动态树型结构 树型菜单！ 只要一个查询语句 即可完成强大的树型菜单 带图片的哦！！不要错过
使用jsTree实现js树形结构
06-07
jsTree 是一个强大且灵活的前端库，可以帮助你快速实现交互式的树形结构。通过深入学习其配置选项、事件、插件和 API，你可以创建出满足各种需求的树形视图。无论你是新手还是经验丰富的开发者，jsTree 都能提供简洁...
js动态生成树形结构
热门推荐
Mooner_guo的专栏
09-27 1万+
传入一组json数据，[{id,pid,name},{id,pid,name},{id,pid,name}...],标明了当前id和父id，如何通过这组数据生成无线层级的树形结构？ js实现： 原理： 1.通过2层循环，选出同父id下的node放入同一个数组。   效果如下。 arr [           [a,b,c,d]          ,[e,f,g,h]        
JavaScript实现树形JSON结构数据扁平化、多种方式实现纯数组降维、递归、reduce、concat、isArray、toString、Number、join、parseInt、some
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
12-03 1150
JavaScript实现树形JSON结构数据扁平化、多种方式实现纯数组降维、递归、reduce、concat、isArray、toString、Number、join、parseInt、some
JS实现动态树结构
forgetallaboutyou的专栏
09-05 411
[code="html"] destroydrop &raquo; JavaScripts &raquo Tree [/code] 上面应用的两个文件在下面的压缩包中.
利用JavaScript 动态生成 树形结构
weixin_30657541的博客
06-02 191
Webforma.aspx <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><HTML><HEAD><title>WebForm2</title><meta name="GENERATOR" Content="Microsoft Visual ...
javascript实现树形菜单的方法
10-23
总结起来，这个JavaScript树形菜单的实现利用了JavaScript的动态DOM操作、事件监听以及动画效果来创建一个交互式的菜单系统。它展示了如何使用JavaScript将数据结构转换为可交互的用户界面，并且通过平滑的动画效果...
javaScript实现树形结构
12-19
在JavaScript中实现树形结构，可以帮助我们构建诸如文件系统、组织架构、导航菜单等复杂的应用。 在JavaScript中，树形结构通常通过对象和对象之间的引用来实现。每个节点可以看作一个对象，包含数据（如节点值）和...
纯css实现树形结构的示例代码
09-24
虽然可以创建出美观的静态树形结构，但若要实现动态交互，还需要借助JavaScript或者其他前端框架的辅助。这种技术对于理解CSS的灵活性和创造性具有很好的实践意义，也是前端开发者必备的一种技能。
基于JavaScript实现树形下拉框
11-23
平时会经常遇到树形结构的问题，比如显示目录结构等。 大多数情况下后台会返回这样的数据，如下： [ { id: 19, pid: 0, name: 'nodejs' }, { id: 20, pid: 19, name: 'express' }, { id: 21, pid: 19, name: '...
动态增加组织树形结构图
01-17
动态增加组织树形结构图
html 树形，树状，层级展开js代码
11-06
非常简易的树形无限极展开html5代码，适合菜单伸缩，组织机构伸缩等等。
无限级树形结构（增、删、改、排序+TreeView显示）
06-19
无限级树形结构（增、删、改、排序+TreeView显示），功能齐全，项目已全部打包，是VS2005+ACCESS，下载即可运行浏览……
树形结构控件实例(可动态增删节点)
12-17
运行环境:VS2005+ACCESS 树形结构,可动态增删节点,并获取树所有节点的值.
HTML5-勾股树植物生长动画特效.zip
07-11
代码片段：  if (!memo[memoKey]) {              const currentH = width * scale;              const result = {         leftSize:   Math.sqrt(currentH ** 2 (width * (0.5 - lean)) ** 2),         rightSize:  Math.sqrt(currentH ** 2 (width * (0.5 lean)) ** 2),         leftAngle:  Math.atan(currentH / ((0.5 - lean) * width)),         rightAngle: Math.atan(currentH / ((0.5 lean) * width))       };              memo[memoKey] = result;                    memoize.count ;     }     
js动态树的生成方式总结
fjfdszj的专栏
02-18 2649
1.dtree方式    dTree 2.05 | www.destroydrop.com/javascript/tree/| 第一个参数，表示当前节点的ID      | | 第二个参数，表示当前节点的父节点的ID,根节点的值为 -1     | | 第三个参数，节点要显示的文字      | | 第四个参数，节点的Url      | | 第五个参数，鼠标移至该节点时节点的Title 
基础平台项目之树形菜单权限配置实现
Nicky's blog
12-25 1万+
计划在开源项目里加入权限配置的功能，打算加入zTree实现树形结构。Team的Github开源项目链接：https://github.com/u014427391/jeeplatform 欢迎star(收藏) zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 zTree下载链接：http://www.treejs
js通过递归实现树形数据操作
qq_44552416的博客
05-25 6957
一、处理复杂数据结构转成树形数据操作 案列一如下： 需求分析 1，根据fatherTreeCode判断是不是父级，为空是父级，然后处理成树形层级关系。 2，完成树形结构后再树形数据里面添加对应的key和value值进行显示。 原数据 const treeData = [ { capList: [], fatherTreeCode: "", isLeaf: "0", showSeqno: "1", treeCode: "TRE0rv",
利用Treeview做权限树的一种方法
johncools的博客
03-29 1885
在B/S结构中，用Treeview做权限这一部分是很直观的一个办法。假设有一棵权限树来给某用户分配权限，勾选中的一些节点保存下来，当用户登陆时再根据数据库生成一棵子权限树。下面写的便是生成子树的一种方法。假设父权限树已经生成（具体数据表结构请参照上一篇《递归实现无限级树》）；假设已经在父树上启用了checkbox，并且以“节点ID.节点ID.节点ID.节点ID.”这种方式保存具有权限的节点。再
js实现树形结构可点击
最新发布
05-13
实现树形结构可点击的方式有很多，这里提供一种比较简单的实现方法。 首先，需要有一个树形结构的数据源，比如以下的示例数据： ```javascript const treeData = [ { name: 'Node A', children: [ { name: 'Node A1', children: [] }, { name: 'Node A2', children: [ { name: 'Node A21', children: [] }, { name: 'Node A22', children: [] } ] } ] }, { name: 'Node B', children: [] } ]; ``` 接下来，需要使用递归函数将数据源渲染成树形结构的 HTML 元素，并添加点击事件。示例代码如下： ```javascript function renderTree(data, parent) { const ul = document.createElement('ul'); parent.appendChild(ul); data.forEach(item => { const li = document.createElement('li'); li.innerText = item.name; li.addEventListener('click', () => { // 点击事件处理逻辑 console.log(`Clicked: ${item.name}`); }); ul.appendChild(li); if (item.children && item.children.length > 0) { renderTree(item.children, li); } }); } const container = document.getElementById('container'); renderTree(treeData, container); ``` 在上述代码中，使用 `renderTree` 函数递归地将数据源渲染成树形结构的 HTML 元素，并将元素添加到指定的父元素中。同时，为每个元素添加点击事件，点击事件的处理逻辑可以根据具体需求进行自定义。例如，在本示例中，点击元素将会在控制台输出被点击的节点名称。 最后，将树形结构的容器元素加上样式，使其具有树形结构的外观即可。以下是示例 CSS 样式： ```css ul { list-style-type: none; padding-left: 20px; } li { cursor: pointer; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值