layui 无限级多级菜单

layui 二级菜单 :https://gitee.com/hslr/layui_extension_modulemenu
我更改了下,变成了无线级菜单
layui.define('element',function(exports){
  var $ = layui.$,element = layui.element,tamp=new Date().getTime();
  var elem='#enian_menu_'+tamp;
    var menu_Ul = '<div class="layui-side layui-bg-black"><div class="layui-side-scroll" ><ul class="layui-nav layui-nav-tree" lay-shrink="" id="enian_menu_'+ tamp +'" lay-filter="enian_menu_'+ tamp +'"></ul></div></div>';
  var enian_menu = {
    render: render,
       setCheck:setCheck,
       v:"1.0.2019-1-9"
  };
  /*
     * 渲染纵向菜单
     * 1.对象数据
     * 2.DOM名称 jq类型 #id .class
     * 3.单击回调
     */
    function render(data,domName,r){
        var htmlUl = '';
        var root = [];
        $(domName).html(menu_Ul);
        //遍历分组
        for(var k in data){
            //判断是不是分组
            if(data[k].pid==0 || data[k].pid=='group'){
                $(elem).append(group(data[k]));
                root.push(data[k]);
            }
        }
        for (var k in root) {
            endlessUl(root[k], data,20);
        }
        ////遍历二级菜单
        //for(var k in data){
        //    var sonHtml='<dd data-name="console">'+ html_url(data[k]) +'</dd>';
        //    $(elem+' dl[data-id_'+tamp+'= "'+ data[k].pid +'" ]').append(sonHtml)
        //}
        element.init()
            if(r){
                //监听菜单被单击
                element.on('nav(enian_menu_'+tamp+')', function(elem){
                  if(elem.attr('data-url')){
                      obj = {'type':elem.attr('data-type'),'url':elem.attr('data-url'),'id':elem.attr('data-id'),'name':elem.html(),'title':elem.attr('data-title')}
                       r(obj)
                  }
                });
            }
      }
    /*
     * 解析分组代码
     */
    function group(obj){
        var html=''
        var children='<dl class="layui-nav-child sonmenus" data-id_'+tamp+'="'+obj.id+'"  ></dl>'
        if(obj.url){
            //无二级菜单可点击...
            html = html_group_url(obj);
            return '<li data-name="home" class="layui-nav-item">'+html+'</li>';
        }else{
            html = html_group(obj);
            //有二级菜单...
            if(obj.open && obj.open == true){
                return '<li class="layui-nav-item layui-nav-itemed">'+html+children+'</li>';
            }else{
                return '<li class="layui-nav-item">'+html+children+'</li>';
            }
        }
    }
    /*
     * HTML源码,url链接,a标签
     */
    function html_url(obj){
        var checked = (obj.checked==true)?'data-check_'+tamp+'="true"':'';
        obj.id = obj.id?obj.id:'';
        obj.title = obj.title?obj.title:'';
        obj.type = obj.type?obj.type:'';
        obj.url = obj.url?obj.url:'';
        obj.name = obj.name?obj.name:'';
        obj.note = obj.note?obj.note:'';
        var html ;
        if(obj.img){
            html = '<a class="enian_menu_'+ tamp +'"  style="margin-left:23px" title="'+ obj.note +'" '+checked+' data-name="'+ obj.name +'" data-id="'+ obj.id +'" data-title="'+ obj.title +'" data-type="'+ obj.type +'" data-url="'+ obj.url +'">'+obj.img+'<cite style="margin-left:8px">'+obj.title+'</cite></a>';
        }else{
            html = '<a class="enian_menu_'+ tamp +'"  style="margin-left:23px" title="'+ obj.note +'" '+checked+' data-name="'+ obj.name +'" data-id="'+ obj.id +'" data-title="'+ obj.title +'" data-type="'+ obj.type +'" data-url="'+ obj.url +'">'+obj.title+'</a>';
        }
        return html;
    }
    function html_url_len(obj,len) {
        var checked = (obj.checked == true) ? 'data-check_' + tamp + '="true"' : '';
        obj.id = obj.id ? obj.id : '';
        obj.title = obj.title ? obj.title : '';
        obj.type = obj.type ? obj.type : '';
        obj.url = obj.url ? obj.url : '';
        obj.name = obj.name ? obj.name : '';
        obj.note = obj.note ? obj.note : '';
        var html;
        if (obj.img) {
            html = '<a class="enian_menu_' + tamp + '"  style="margin-left:' + len+'px" title="' + obj.note + '" ' + checked + ' data-name="' + obj.name + '" data-id="' + obj.id + '" data-title="' + obj.title + '" data-type="' + obj.type + '" data-url="' + obj.url + '">' + obj.img + '<cite style="margin-left:8px">' + obj.title + '</cite></a>';
        } else {
            html = '<a class="enian_menu_' + tamp + '"  style="margin-left:'+len+'px" title="' + obj.note + '" ' + checked + ' data-name="' + obj.name + '" data-id="' + obj.id + '" data-title="' + obj.title + '" data-type="' + obj.type + '" data-url="' + obj.url + '">' + obj.title + '</a>';
        }
        return html;
    }
    function endlessUl(obj, initData,spaceLen) {
        var checked = (obj.checked == true) ? 'data-check_' + tamp + '="true"' : '';
        obj.id = obj.id ? obj.id : '';
        obj.title = obj.title ? obj.title : '';
        obj.type = obj.type ? obj.type : '';
        obj.url = obj.url ? obj.url : '';
        obj.name = obj.name ? obj.name : '';
        obj.note = obj.note ? obj.note : '';
        var html;
        var childNode = [];
        for (var i = 0; i < initData.length; i++) {
            if (obj.id == initData[i].pid) {
                childNode.push(initData[i]);
            }
        }
        if (childNode.length > 0) {
            var sonHtml = '<dd data-name="console">' + html_url_len(obj, spaceLen) +
                '<dl class="layui-nav-child sonmenus" data-id_' + tamp + '="' + obj.id + '"  ></dl>'+
                '</dd>';
            $(elem + ' dl[data-id_' + tamp + '= "' + obj.pid + '" ]').append(sonHtml)
            for (var m = 0; m < childNode.length; m++) {
                endlessUl(childNode[m], initData, spaceLen+5)
            }
        } else {
            var sonHtml = '<dd data-name="console" data-id_' + tamp + '= "' + obj.id + '">' + html_url_len(obj, spaceLen) + '</dd>';
            $(elem + ' dl[data-id_' + tamp + '= "' + obj.pid + '" ]').append(sonHtml)
        }
    }
    /*
     * HTML源码,普通分组
     */
    function html_group(obj){
        var note = obj.note || '';
        if(obj.img){
            html = '<a  title="'+ note +'">'+obj.img+'<cite style="margin-left:8px">'+obj.title+'</cite></a>';
        }else{
            html = '<a  title="'+ note +'">'+obj.title+'</a>';
        }
        return html;
    }
    /*
     * HTML源码,可点击分组
     */
    function html_group_url(obj){
        var checked = (obj.checked==true)?'data-check_'+tamp+'="true"':'';
        obj.id = obj.id?obj.id:'';
        obj.title = obj.title?obj.title:'';
        obj.type = obj.type?obj.type:'';
        obj.url = obj.url?obj.url:'';
        obj.name = obj.name?obj.name:'';
        obj.note = obj.note?obj.note:'';
        var html ;
        if(obj.img){
            //href="javascript:;"
            html = '<a class="enian_menu_'+ tamp +'"   title="'+ obj.note +'"  data-name="'+ obj.name +'" data-id="'+ obj.id +'" '+checked+' data-title="'+ obj.title +'" data-type="'+ obj.type +'" data-url="'+ obj.url +'">'+obj.img+'<cite style="margin-left:8px">'+obj.title+'</cite></a>';
        }else{
            html = '<a class="enian_menu_'+ tamp +'"   title="'+ obj.note +'"  data-name="'+ obj.name +'" data-id="'+ obj.id +'" '+checked+' data-title="'+ obj.title +'" data-type="'+ obj.type +'" data-url="'+ obj.url +'">'+obj.title+'</a>';
        }
        return html;
    }
    /* setCheck
     * 设置选中项目
     * 参数1.要寻找的字段 可选:id type name title url
     * 参数2.被寻找的内容
     */
    function setCheck(key,content){
        var cElem = $(elem+' a[data-'+key+' = "'+ content +'" ]');
        //当没有查找到符合条件的,不进行刷新选中 特性,用于子页跳转其他无菜单链接,2018-12-10 12:04:32
        if(cElem.length>0){
            $(elem+' .layui-this').removeClass('layui-this');//删除已经选中
            cElem.parent().addClass('layui-this');//选中指定
            cElem.parent().parent().parent().addClass('layui-nav-itemed')//打开分组
        }else{
            return false;
        }
    }
  //输出test接口
  exports('enianMenu', enian_menu);
});    
// 模块手册:http://enianteam.com/doc/layui_module/43.html
function endlessUl(obj, initData,spaceLen) {
        var childNode = [];
        for (var i = 0; i < initData.length; i++) {
            if (obj.id == initData[i].pid) {
                childNode.push(initData[i]);
            }
        }
        if (childNode.length > 0) {
            var sonHtml = '<dd data-name="console">' + html_url_len(obj, spaceLen) +
                '<dl class="layui-nav-child sonmenus" data-id_' + tamp + '="' + obj.id + '"  ></dl>'+
                '</dd>';
            $(elem + ' dl[data-id_' + tamp + '= "' + obj.pid + '" ]').append(sonHtml)
            for (var m = 0; m < childNode.length; m++) {
                endlessUl(childNode[m], initData, spaceLen+5)
            }
        } else {
            var sonHtml = '<dd data-name="console" data-id_' + tamp + '= "' + obj.id + '">' + html_url_len(obj, spaceLen) + '</dd>';
            $(elem + ' dl[data-id_' + tamp + '= "' + obj.pid + '" ]').append(sonHtml)
        }
    }
layui 无限级多级菜单的更多相关文章
- Vue2 实现树形菜单(多级菜单)功能模块
		
结构示意图 ├── index.html ├── main.js ├── router │ └── index.js # 路由配置文件 ├── components # 组件目录 │ ├── App. ...
 - vue+element-ui实现无限级动态菜单树
		
使用vue+element-ui实现无限级动态菜单 该案例实现主要使用递归的思想,递归对新人来容易迷惑的是自己调用自己,直到满足条件为止,接下来我们就一步一步实现一个动态多级菜单vue组件 搭建项目并 ...
 - 前端开发css实战:使用css制作网页中的多级菜单
		
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
 - MVC5+EF6 入门完整教程13 -- 动态生成多级菜单
		
稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...
 - java 24 - 7 GUI之 创建多级菜单窗体
		
需求: 创建多级菜单 步骤: A:创建窗体对象(并设置属性和布局) B:创建菜单栏 C:创建菜单和子菜单 D:逐步添加菜单(子菜单添加到菜单中,菜单添加到菜单栏中) E:窗体中设置菜单栏(菜单栏并不是 ...
 - 单片机C语言下LCD多级菜单的一种实现方法
		
摘要: 介绍了在C 语言环境下,在LCD 液晶显示屏上实现多级嵌套菜单的一种简便方法,提出了一个结构紧凑.实用的程序模型. 关键词: 液晶显示屏; 多级菜单; 单片机; C 语言; LCD 中 ...
 - zTree下拉菜单多级菜单多选实现
		
惯例,先上图: 这是在一个项目中,为了满足样式美观.多级菜单以及多选而将zTree插件更改过后的效果. 在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox ...
 - Jquery多级菜单插件Slimmenu使用说明
		
Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...
 - python作业设计:多级菜单,并可依次进入各级子菜单
		
'''作业三:多级菜单 三级菜单 可依次选择进入各子菜单 所需新知识点:列表.字典 ''' data = { "北京":{ "昌平":{ "沙河&qu ...
 - Python练习----多级菜单
		
多级菜单要求: 1.三级菜单 2.可依次选择进入各子菜单 3.可以返回上一层 4.输入'q'可以退出 脚本: zone = { '北京' : { ' ...
 
随机推荐
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Scan Kit
			
1.问题描述 Scan Kit扫描专用底层码流接口需要鉴权,鉴权失败后功能还能用吗? 解决方案 如果已经申请过白名单,因为异常导致的鉴权失败会优先放通,保障业务成功. 2.问题描述 调用Scan Ki ...
 - 将py文件编译成pyc
			
核心代码 import compileall compileall.compile_file("a.py", legacy=True, force=True) 演示步骤 1.新建 ...
 - mysql交集查询按照时间范围查询myBatis
			
查询 开始时间 --结束时间 <if test="searchParam.startTime != null and searchParam.endTime != null" ...
 - python 远程windows系统执行cmd命令
			
如果你的服务器是windows系统,不想一台一台mstsc远程到桌面上去操作,python是有模块可以远程处理的:winrm pip install pywinrm 安装模块即可 windows系统服 ...
 - 力扣579(MySQL)-查询员工的累积薪水(困难)
			
题目: Employee 表保存了一年内的薪水信息. 请你编写 SQL 语句,对于每个员工,查询他除最近一个月(即最大月)之外,剩下每个月的近三个月的累计薪水(不足三个月也要计算). 结果请按 Id ...
 - EventBridge 事件总线及 EDA 架构解析
			
简介:EventBridge 是事件驱动的具体落地产品,也是 EDA 的最佳实践方式. 作者:肯梦 作为 Gartner 定义的 10 大战略技术趋势之一,事件驱动架构(EDA)逐渐成为主流技术架构 ...
 - LlamaIndex 探索视频系列
			
如果您喜欢通过视频学习,现在正是查看我们的"探索 LlamaIndex"系列的好时机.否则,我们建议您继续阅读"理解 LlamaIndex"教程. 自下而上开发 ...
 - [FE] Canvas 转图片并下载的方式
			
先获取 canvas 节点,使用 toDataURL 转为 image 数据,最后使用 a 链接下载. // Trans to image const canvas = document.getEle ...
 - [PPT] WPS 提取 PPT 中的母版到另一份 PPT 中
			
1. 打开 PPT. 2. 视图 - 幻灯片母版,在第一个 ppt 上面 "鼠标右键 - 复制" 来进行拷贝. 3. 打开目标 PPT,视图 - 幻灯片模板,快捷键 Ctrl + ...
 - spannerlib优雅的go异常处理
			
蹩脚的go 异常处理 一般写go的人,如果他不是写算法,正常写业务代码的话,可能都会为优雅的异常处理而烦恼,因为脑子抽筋的go设计者们,总是感觉语法糖是一种很低级的东西.但是在我们大多数公司的业务逻辑 ...