标签:function layui 绑定 html 树形 nav tab var children
树形菜单
$(function () { $.ajax({ url: window.location.protocol + '//' + window.location.host + '/Home/Menu', data: null, type: 'post', dataType: 'json', async: true, success: function (res) { var obj = eval(res); console.log(res); if (obj != null) { var data = obj; var comIocn = ''; //触发事件 var tab = { tabAdd: function (title, url, id) { //新增一个Tab项 element.tabAdd('xbs_tab', { title: title , content: '<iframe tab-id="' + id + '" frameborder="0" src="' + url + '" scrolling="yes" class="x-iframe"></iframe>' , id: id }) } , tabDelete: function (othis) { //删除指定Tab项 element.tabDelete('xbs_tab', '44'); //删除:“管理” othis.addClass('layui-btn-disabled'); } , tabChange: function (id) { //切换到指定Tab项 element.tabChange('xbs_tab', id); //切换到:管理 } }; var html = '<ul id="nav">'; var randerTree = function (d) { for (var i = 0; i < d.length; i++) { if (d[i].ParentId == null) { html += '<li><a href="javascript:;"><i class="iconfont">' + d[i].icon + '</i><cite>' + d[i].menuName + '</cite><i class="iconfont nav_right">' + d[i].iconRight + '</i></a><ul class="sub-menu">' if (d[i].childs.length == 0) { html += '</ul>' } } if (d[i].childs.length > 0) { randerTree(d[i].childs) } else { html += '<li><a _href="' + d[i].menuUrl + '"><i class="iconfont">' + d[i].icon + '</i><cite>' + d[i].menuName + '</cite></a></li>' if (i == d.length - 1) { html += '</ul></li>' } } } return html; } var innerhtml = randerTree(data) + '</ul>'; $('#side-nav').append(innerhtml); $('#nav li').click(function (event) { if ($(this).children('.sub-menu').length) { if ($(this).hasClass('open')) { $(this).removeClass('open'); $(this).find('.nav_right').html(''); $(this).children('.sub-menu').stop().slideUp(); $(this).siblings().children('.sub-menu').slideUp(); } else { $(this).addClass('open'); $(this).children('a').find('.nav_right').html(''); $(this).children('.sub-menu').stop().slideDown(); $(this).siblings().children('.sub-menu').stop().slideUp(); $(this).siblings().find('.nav_right').html(''); $(this).siblings().removeClass('open'); } } else { var url = $(this).children('a').attr('_href'); var title = $(this).find('cite').html(); var index = $('.left-nav #nav li').index($(this)); for (var i = 0; i < $('.x-iframe').length; i++) { if ($('.x-iframe').eq(i).attr('tab-id') == index + 1) { tab.tabChange(index + 1); event.stopPropagation(); return; } }; tab.tabAdd(title, url, index + 1); tab.tabChange(index + 1); } event.stopPropagation(); }) } else { var html = '<ul id="nav" class="x-red">您无授权,请联系管理员!</ul>'; $('#side-nav').append(html); } } }); });
标签:function,layui,绑定,html,树形,nav,tab,var,children 来源: https://www.cnblogs.com/BabyRui/p/13932162.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。