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) } }