精华内容
下载资源
问答
  • js实现树形菜单
    2022-02-27 17:13:04

    数据以数组形式存储,元素包括id和pid

    var data = [
        { id: 1, name: "办公管理", pid: 0 },
        { id: 2, name: "请假申请", pid: 1 },
        { id: 3, name: "出差申请", pid: 1 },
        { id: 4, name: "请假记录", pid: 2 },
        { id: 5, name: "系统设置", pid: 0 },
        { id: 6, name: "权限管理", pid: 5 },
        { id: 7, name: "用户角色", pid: 6 },
        { id: 8, name: "菜单设置", pid: 6 },
    ];

    生成的数据如下:

    var data = [
    	{id: 1, name: "办公管理", pid: 0 ,
    		children:[
    			{ id: 2, name: "请假申请", pid: 1,
    				children:[
    					{ id: 4, name: "请假记录", pid: 2 },
    				],
    			},
    			{ id: 3, name: "出差申请", pid: 1},
    		]
        },
    	{id: 5, name: "系统设置", pid: 0 ,
    		children:[
    			{ id: 6, name: "权限管理", pid: 5,
    				children:[
    					{ id: 7, name: "用户角色", pid: 6 },
    					{ id: 8, name: "菜单设置", pid: 6 },
    				]
    			},
    		]
    	},
    ];

    构建函数:

    
        function toTree(data) {
            // 删除 所有 children,以防止多次调用
            data.forEach(function (item) {
                delete item.children;
            });
     
            // 将数据存储为 以 id 为 KEY 的 map 索引数据列
            var map = {};
            data.forEach(function (item) {
                map[item.id] = item;
            });
    
            var val = [];
            data.forEach(function (item) {
                // 以当前遍历项,的pid,去map对象中找到索引的id
                var parent = map[item.pid];
                // 如果有parent,向parent元素中push该节点
                if (parent) {
                    (parent.children || ( parent.children = [] )).push(item);
                } else {
                    //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
                    val.push(item);
                }
            });
            return val;
        }
    

    更多相关内容
  • 主要介绍了javascript实现树形菜单的方法,涉及javascript动态操作页面元素与节点属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • JS实现树形菜单

    千次阅读 2021-07-07 17:52:04
    JS实现树形结构,原本的数据是数组类型,需要先把数据进行处理,然后在页面上渲染DOM,注意点有以下几点: 1、data必须含有id和fatherId来表示他们的层级关系 2、js动态创建DOM的实现方式是先创建一个div,然后把...

    需求

    用JS实现树形结构,原本的数据是数组类型,需要先把数据进行处理,然后在页面上渲染DOM,注意点有以下几点:
    1、data必须含有id和fatherId来表示他们的层级关系
    2、js动态创建DOM的实现方式是先创建一个div,然后把生成的元素appendChild给这个div

    代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        .treeItem > .treeItem{
        padding-left: 10px;
        cursor: pointer;
    }
    .itemIcon {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: red;
        margin-right: 10px;
    }
    </style>
    
    <body>
        <div id="d0" class="treeItem"></div>
        <script>
            // 数据
            let data = [{
                    "id": "1",
                    "name": "1",
                    "fatherId": "0",
                },
                {
                    "id": "2",
                    "name": "1-1",
                    "fatherId": "1"
                },
                {
                    "id": "3",
                    "name": "1-2",
                    "fatherId": "1"
                },
                {
                    "id": "4",
                    "name": "1-1-1",
                    "fatherId": "2"
                },
                {
                    "id": "5",
                    "name": "1-1-2",
                    "fatherId": "2"
                },
                {
                    "id": "6",
                    "name": "2",
                    "fatherId": "0"
                },
                {
                    "id": "7",
                    "name": "1-2-1",
                    "fatherId": "3"
                }
            ];
    
            // 处理数据
            //1、 先把数据处理成map
            const map = {};
            const val = [];
            data.forEach((item) => {
                map[item.id] = item;
            });
            // 2、遍历之后,形成树形结构
            data.forEach((item) => {
                const parent = map[item.fatherId];
                if (parent) {
                    (parent.children || (parent.children = [])).push(item);
                } else {
                    val.push(item);
                }
            });
            console.log("映射",map)
            console.log("数组",val)
            // 动态生成html
            // const tree = document.getElementById("tree");
    
            function createLi(data) {
                // 父元素id
                const fid = `d${data.fatherId}`;
                const div = document.getElementById(fid);
               // 创建一个子元素div,添加给父元素
                const treeItem = document.createElement("div");
                treeItem.id = `d${data.id}`;
                treeItem.className = "treeItem";
                treeItem.innerHTML = data.name;
                div.appendChild(treeItem);
               // 如果是children,内部调用
                if (data.children) {
                    data.children.forEach(d => {
                        createLi(d);
                    });
                }
            }
            val.forEach(v => {
                createLi(v);
            })
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述

    展开全文
  • js实现树形菜单

    2020-12-22 20:10:25
    li> <li><span>第三级菜单span>li> <li><span>第三级菜单span>li> <li><span>第三级菜单span>li> ul> li> <li><span>第二级菜单span> <ul> <li><span>第三级菜单span>li> <li><span>第三级菜单span>li> <li><span>第...
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            ul{
                list-style: none;
            }
            
            .box {
                width: 500px;
            }
    
            .box span {
                display: block;
                height: 35px;
                line-height: 35px;
                cursor: pointer;
            }
    
            .box span.close:before {
                content: "+";
                font-size: 20px;
                font-weight: bold;
                color: red;
            }
    
            .box span.open:before {
                content: "-";
                font-size: 30px;
                font-weight: bold;
                color: red;
            }
        </style>
    </head>
    
    <body>
        <ul class="box" id="box">
            <li><span>第一级菜单</span>
                <ul>
                    <li><span>第二级菜单</span>
                        <ul>
                            <li><span>第三级菜单</span>
                                <ul>
                                    <li><span>第四级菜单</span></li>
                                    <li><span>第四级菜单</span></li>
                                </ul>
                            </li>
                            <li><span>第三级菜单</span></li>
                            <li><span>第三级菜单</span></li>
                            <li><span>第三级菜单</span></li>
                        </ul>
                    </li>
                    <li><span>第二级菜单</span>
                        <ul>
                            <li><span>第三级菜单</span></li>
                            <li><span>第三级菜单</span></li>
                            <li><span>第三级菜单</span></li>
                            <li><span>第三级菜单</span></li>
                        </ul>
    
                    </li>
                    <li><span>第二级菜单</span>
                    </li>
                    <li><span>第二级菜单</span></li>
                </ul>
            </li>
            <li><span>第一级菜单</span></li>
            <li><span>第一级菜单</span></li>
            <li><span>第一级菜单</span></li>
        </ul>
        <script>
            // 1、获取所有的span元素
            let spans = document.getElementsByTagName('span');
    
            // 2、判断一下当前的span有没有兄弟元素:如果有那它里面就有东西,这样就让当前的span加上close类名,并且让它的兄弟元素默认隐藏;否则加上open类名
            //这个过程为每一个span前面添加合适的标识:‘+’/‘-’
            for(let i=0;i<spans.length;i++){
                let cur=spans[i];//当前span(当前span要么是独生子,要么是第一个孩子)
                let next=cur.nextElementSibling;//当前span的下一个兄弟元素
                //如果当前span的下一个兄弟元素存在,说明里面有东西,span可以打开
                if(cur.nextElementSibling){
                    cur.classList.add('close');
                    next.style.display='none';
                }else{
                    cur.classList.add('open');
                }
            }
    
            //菜单盒子绑定点击事件,由于存在冒泡机制,无论点击菜单盒子的哪个位置都会触发此点击事件,根据事件对象的target目标源来确定当前点击的是哪个span
            box.onclick=function(e){
                let cur=e.target;//当前点击的元素
                //如果点击的元素不是span,那就什么都不做
                if(cur.nodeName!=='SPAN'){
                    return;
                }
                let next=cur.nextElementSibling;//当前span的下一个兄弟元素
                
                //如果当前next有值,那就可以进行打开和关闭的操作;如果当前next没有值,那就什么都不做
                if(next){
                    // if(cur.classList.contains('close')){}
                    //判断一下当前的span有没有close类名:如果有,那就是想要展开;如果没有,那就是想要关闭
                    if(cur.className.includes('close')){
                        cur.className='open';//把类名变成展开
                        next.style.display='block';//让当前span下的ul显示
                    }else{
                        cur.className='close';//把类名变成关闭
                        next.style.display='none';//让当前span下的ul隐藏
                        
                        let uls=next.getElementsByTagName('ul');//获取当前span下一个兄弟元素中所有的ul
                        for(let i=0;i<uls.length;i++){
                            uls[i].style.display='none';//隐藏ul
                            uls[i].previousElementSibling.className='close';//将ul前面span的类名变成关闭
                        }
                    }
                }
            };
        </script>
    </body>
    
    </html>
    
    展开全文
  • 主要为大家详细介绍了JavaScript实现简单的树形菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单。 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '...
  • JavaScript实现树形菜单

    热门讨论 2012-10-08 12:51:49
    JavaScript实现树形菜单源码以及使用说明
  • 主要介绍了JS实现无限级网页折叠菜单(类似树形菜单)效果代码,涉及JavaScript基于鼠标事件实现针对页面元素结点的遍历及样式操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • 主要为大家详细介绍了Vue.js组件tree实现无限级树形菜单代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • JavaScript制作树形菜单

    2020-12-08 11:50:08
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>... li
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            ul{
                list-style: none;
            }
            ul li ul{
                display: none;
            }
            a{
                text-decoration: none;/* 去掉下划线 */
               
            }
            a:hover{
                color:red;
            }
        </style>
        <script>
            window.onload=function(){
                var objA=document.getElementsByTagName("a");
                for(var i=0;i<objA.length;i++){
                      objA[i].num=i;
                    objA[i].onclick=downList;
                }
            }
            function downList(){
                var objUL=document.getElementById(this.num);
                if(objUL.style.display=='block')
                  objUL.style.display='none';
                  else objUL.style.display='block';
            }
    
    
        </script>
    </head>
    <body>
        <div>
            <ul>
                <li><a href="#">分类讨论区</a>
                  <ul id="0">
                      <li>BBS系统</li>
                      <li>BBS系统</li>
                      <li>BBS系统</li>
                      <li>妆点水木</li>
                      <li>申请版主</li>
                  </ul>
                </li>
                  <li><a href="#">社会信息</a>
                  <ul id="1">
                      <li>美容品与装饰品代理</li>
                      <li>考研资料市场</li>
                      <li>上海中喊</li>
                      <li>妆点水木</li>
                      <li>申请版主</li>
                  </ul></li>
                  <li><a href="#">休闲娱乐</a>
                  <ul id="2">
                      <li>BBS系统</li>
                      <li>BBS系统</li>
                      <li>BBS系统</li>
                      <li>妆点水木</li>
                      <li>申请版主</li>
                  </ul></li>
                  <li><a href="#">电脑技术</a>
                  <ul id="3">
                      <li>BBS系统</li>
                      <li>BBS系统</li>
                      <li>BBS系统</li>
                      <li>妆点水木</li>
                      <li>申请版主</li>
                  </ul></li>
            </ul>
        </div>
    </body>
    </html>
    
    展开全文
  • 主要介绍了BootStrap Jstree 树形菜单的增删改查的实现源码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • js树形菜单(可拖动效果) 所采用的技术是ajax+xml 若是读后台数据的话,首先得打包成xml文件,具体格式参照samples下面的tree.xml
  • 由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法。 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下: 后台返回的数据...
  • 首先你需要知道AngularJS的双向数据绑定是什么才可以更好的理解下面的代码,想了很久才想出用下面的代码来实现左侧菜单树形结构 要实现上面的功能你需要操作如下步骤: 在HTML标签内添加ng-app,让AngularJS掌管整个...
  • 主要介绍了javascript实现在下拉列表中显示多级树形菜单的方法,涉及javascript属性菜单的定义、构造及遍历等技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了JS+CSS简单树形菜单实现方法,涉及JavaScript结合css动态操作页面元素结点的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • 内容索引:脚本资源,Ajax/JavaScript,树形菜单 JavaScript实现树形菜单中添加、删除节点实例,本程序侧重于学习,主要介绍一种在多级树节点中创建节点、删除节点,帮助了解树形菜单创作原理。测试中发现代码似乎...
  • JS实现简单树形结构菜单

    千次阅读 2021-05-08 09:27:01
    功能效果图: 思路: 在无限极别的菜单中,数据一般不是固定的,需要从服务器请求获取: 如果数据量不大,一般是一次请求数据,获取到所有级别的信息 如果数据量比较大,一般只是请求当前这一级的...给当前树形折叠菜
  • 通过本文给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形菜单的来一步步进行。下面通过本文给大家分享用 Vue.js 递归组件实现可折叠的树形菜单,需要的朋友参考下吧
  • initial-scale=1.0"> 原生js动态生成树形菜单 title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js">script> head> <body> <div id="menuTree" class="menuTree">div> body> ...
  • html,css,js 实现树形菜单

    千次阅读 多人点赞 2019-06-15 11:24:33
    效果展示: 声明:文字前为图片,引入即可 <!DOCTYPE html> <html> <head> <...树形菜单</title> </head> <style> .box{ width: 180px; ...
  • 这里演示垂直的树形菜单,应用CSS和jquery技术来实现,显示在网页左侧比较合适,考虑到简洁,没有使用图片之类的作修饰。本效果兼容IE、火狐等主流浏览器。 运行效果截图如下: 在线演示地址如下: ...
  • 这里的Tree指的是树形菜单,这篇文章通过一个实例来讲解一下,在Bootstrap框架下怎么去建立一个树形菜单。 前提:先添加Bootstrap和JQ的引用 <link rel="stylesheet" type="text/css" href="bootstrap-3.3.0-...
  • 类别目录function showmenu(menuid){if(menuid.style.display=="none"){menuid.style.display="";}else{menuid.style.display="none";}}body{margin:0px;}table tr td{font-size:12px}$globals["id"] =1; //用来...
  • JQ实现树形菜单

    2021-07-07 17:31:11
    使用JQ实现简单树形菜单,点击展开收起,关键点有以下几点 1、数据格式要正确 2、树形结构主要是用了递归函数来进行的DOM渲染 3、JQ拼接字符串的方式 代码 递归的部分有两个方法,一个是使用比较常见的for循环,另一...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,496
精华内容 4,598
关键字:

js实现树形菜单