layui-tree美化左侧菜单

html

<div class="layui-side layui-bg-black">
 <div class="layui-side-scroll " >
 <div id="sidemenubar" lay-filter="test"></div>
 </div>
</div>

css

/*左侧导航*/
.layui-tree-skin-sidebar li i{
 color: rgba(255,255,255,.7);
 display: none;
}
.layui-tree-skin-sidebar li a cite{
 color: rgba(255,255,255,.7)
}
.layui-tree-skin-sidebar li .layui-tree-spread{
 display: block;
 position: absolute;
 right: 30px;
}
.layui-tree-skin-sidebar li{
 line-height: 45px;
 position: relative;
}
.layui-tree-skin-sidebar li ul{
 margin-left: 0;
 background: rgba(0,0,0,.3);
}
.layui-tree-skin-sidebar li ul a{
 padding-left: 20px;
}
.layui-tree-skin-sidebar li a{
 height: 45px;
 border-left: 5px solid transparent;
 box-sizing: border-box;
 width: 100%;
}
.layui-tree-skin-sidebar li a:hover{
 background: #4E5465;
 color: #fff;
 border-left: 5px solid #009688;
}
.layui-tree-skin-sidebar li a.active{
 background: #009688;
}

js

<!--layui.js文件必须放到HTML内容的最后-->
<script src="layui/layui.js"></script>
layui.use(['element','layer','jquery','tree'], function(){
 var element = layui.element;
 var layer = layui.layer;
 var $ = layui.jquery;
 var menuData = [ //节点
 {
 name: '常用文件夹'
 ,id: '1'
 ,children: [
 {
 name: '所有未读'
 ,id: '11'
 ,url: 'http://www.layui.com/'
 }, {
 name: '置顶邮件'
 ,id: '12'
 }, {
 name: '标签邮件'
 ,id: '13'
 }
 ]
 }, {
 name: '我的邮箱'
 ,id: '2'
 ,children: [
 {
 name: 'QQ邮箱'
 ,id: '21'
 ,spread: true
 ,children: [
 {
 name: '收件箱'
 ,id: '211'
 ,children: [
 {
 name: '所有未读'
 ,id: '2111'
 }, {
 name: '置顶邮件'
 ,id: '2112'
 }, {
 name: '标签邮件'
 ,id: '2113'
 }
 ]
 }, {
 name: '已发出的邮件'
 ,id: '212'
 }, {
 name: '垃圾邮件'
 ,id: '213'
 }
 ]
 }, {
 name: '阿里云邮'
 ,id: '22'
 ,children: [
 {
 name: '收件箱'
 ,id: '221'
 }, {
 name: '已发出的邮件'
 ,id: '222'
 }, {
 name: '垃圾邮件'
 ,id: '223'
 }
 ]
 }
 ]
 }
 ]
 layui.tree({
 elem: '#sidemenubar' //传入元素选择器
 ,skin: 'sidebar' //自定义tree样式的类名
 ,nodes:menuData //节点数据
 ,click: function(node,item){
 //node即为当前点击的节点数据,item就是被点击的a标签对象了
 //导航按钮选中当前
 $('#sidemenubar a').removeClass('active');
 $(item).addClass('active');
 $(item).siblings('.layui-tree-spread').click();
 //添加新tab
 activeTab.init(node.name,node.url,node.id);
 }
 });
 var activeTab = {
 tabTit : '', //tab titile标题
 tabUrl : '', //tab内容嵌套iframe的src
 tabId : '', //tab 标签的lay-id
 tabCon : function(){
 var result;
 $.ajax({
 type: 'get',
 url: this.tabUrl,
 dataType: 'html',
 success: function(data){
 result = data;
 }
 })
 return result;
 },
 addTab : function(){ //新增tab项
 element.tabAdd('demo', {
 title: this.tabTit
 ,content: '<iframe src = '+this.tabUrl +' ></iframe>' //支持传入html
 ,id: this.tabId
 })
 },
 changeTab: function(){ //选中tab项
 element.tabChange('demo', this.tabId);
 },
 ishasTab : function(){ //判断tab项中是否包含
 var _this = this;
 var dataId,isflag;
 var arrays = $('.layui-tab-title li');
 $.each(arrays,function(idx,ele){
 dataId = $(ele).attr('lay-id');
 if(dataId === _this.tabId){
 isflag = true
 return false
 }else{
 isflag = false
 }
 })
 return isflag
 },
 init : function(tabtit,taburl,tabid){
 var _this = this;
 _this.tabUrl = taburl;
 _this.tabId = tabid;
 _this.tabTit = tabtit;
 if(taburl){
 if(!_this.ishasTab()){
 _this.addTab();
 }
 _this.changeTab();
 }else{
 return false
 }
 }
 }
});

新增tab项逻辑思路

点击左侧导航，获取它的数据（url，id。。）

如果有url，则判断其id是否与tab项的lay-id相同，相同则切换选中，不相同则新增

遇到的问题

layui-tree 单击节点只返回当前的节点数据，不返回当前节点的HTML对象

解决方案

更改tree.js 源码

e.children("a").on("click",
 function(e) {
 layui.stope(e),
 i.click(o,this)
 })
i.click(o)改为 i.click(o,this)

使用

更多layui知识请关注layui使用教程栏目。