zoukankan      html  css  js  c++  java
  • 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)
            }
    
        }
  • 相关阅读:
    网络流量监控工具iftop
    CentOS6.X安装vsftpd服务
    CentOS 6.x版本升级Mysql
    CentOS 5.x版本升级Mysql
    CentOS 5.x版本升级PHP
    CentOS 6.X版本升级PHP
    Spring bean configuration inheritance
    cannot load such file -- openssl
    第八章、Linux 磁盘与文件系统管理
    Laravel Configuration
  • 原文地址:https://www.cnblogs.com/HelloQLQ/p/14529553.html
Copyright © 2011-2022 走看看