layui ajax实现菜单管理功能,layui自定义ajax左侧三级菜单

HTML代码： 需引入layui.css代码

• 控制面板

js代码：需引入 layui.all.js

var $ = layui.jquery,

element = layui.element(),

form = layui.form();

var html = '';

//获取菜单

$.ajax({

url:"../manage/permissionList?type=1",

type:"post",

dataType:"json",

data:{},

success:function(data){

var navs=data.result;

$.each(navs,function(i,item){

html += '

html += '

'+item.title+'';

//如果有第二级菜单

if(item.children !== undefined && item.children.length > 0){

$.each(item.children,function(j,item2){

html += '

';

html += ''+item2.title+'';

//如果有三级菜单

if(item2.children !== undefined && item2.children.length > 0){

html += '

• ';

$.each(item2.children,function(k,item3){

html += '

'+

''+

''+

''+item3.title+''+

''+

'

';

});

html += '

';

}

html += '

';

});

}

html += '

';

});

//渲染html

$('#admin-navbar-side').html(html);

}

});

//触发事件

var active = {

tabAdd: function(obj){

//新增一个Tab项

element.tabAdd('admin-tab', {

title: $(this).html()//用于演示

,content: ''

});

element.tabChange("admin-tab", $('.layui-tab-title li').length - 1);

},

tabDelete: function(index) {

//删除指定Tab项

element.tabDelete('admin-tab', index); //删除(注意序号是从0开始计算)

}

,tabChange: function(lay_id){

//切换到指定Tab项

element.tabChange('admin-tab', lay_id); //切换到：用户管理

}

};

//添加tab

$(document).on('click','a',function(){

if(!$(this)[0].hasAttribute('data-url') || $(this).attr('data-url')==='')return;

var title = $.trim($(this).text());

var tabs = $(".layui-tab-title").children();

for(var i = 0; i < tabs.length; i++) {

if($(tabs).eq(i).children('cite').text() == title) {

element.tabChange('admin-tab', i);

return;

}

}

active["tabAdd"].call(this);

resize();

active.tabChange($(".layui-tab-title").children().length - 1);

});

//iframe自适应

function resize(){

var $content = $('.admin-nav-card .layui-tab-content');

$content.height($(this).height() - 147);

$content.find('iframe').each(function() {

$(this).height($content.height());

});

}

$(window).on('resize', function() {

var $content = $('.admin-nav-card .layui-tab-content');

$content.height($(this).height() - 147);

$content.find('iframe').each(function() {

$(this).height($content.height());

});

}).resize();

//toggle左侧菜单

$('.admin-side-toggle').on('click', function() {

var sideWidth = $('#admin-side').width();

if(sideWidth === 200) {

$('#admin-body').animate({

left: '0'

}); //admin-footer

$('#admin-footer').animate({

left: '0'

});

$('#admin-side').animate({

width: '0'

});

} else {

$('#admin-body').animate({

left: '200px'

});

$('#admin-footer').animate({

left: '200px'

});

$('#admin-side').animate({

width: '200px'

});

}

});

$(document).on('click','dt',function(){

$(this).parent().find('dd').toggle();

});

$(document).on('click','dd a',function(){

$(this).next('ul').toggle();

});

本文同步分享在 博客“zy1281539626”(CSDN)。

如有侵权，请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。