ZUI 动态加载树形菜单+动态打开Tab

appData数据：

{"code": 0,"msg": "操作成功","data": [{"AppGUID": "b02311e5-48ea-471f-8b5f-ea62956eb1cd","AppNameJC": "用户管理","MainMenu": [{"GUID": "269f7bc5-38c8-48de-916f-3fe926c52cf3","AppMainMenuName": "新增","ID": 1,"MenuIcon": "desktop","LinkType": 0,"LinkPath": "look.html","LinkPathEx": "","OpenType": 0,"IsMenuShow": 1}, {"GUID": "7f4eb8d3-616a-4370-a2b8-063b94762c1c","AppMainMenuName": "编辑","ID": 2,"MenuIcon": "time","LinkType": 0,"LinkPath": "fulldayData.html","LinkPathEx": "","OpenType": 0,"IsMenuShow": 0}, {"GUID": "2d6330db-c986-4d65-8c43-3c9fb21fddf1","AppMainMenuName": "删除","ID": 3,"MenuIcon": "database","LinkType": 0,"LinkPath": "weightData.html","LinkPathEx": "","OpenType": 0,"IsMenuShow": 0}]}]
}

1、使用纯js生成树状菜单

//要生成的元素
var treeMenu = $('#treeMenu');if (treeMenu && treeMenu[0]) {var t_str = '<li id="innerli">'+'<a href="#" onClick="javascript:SelectLayerEvent(\'hStaAddress\',\'hStaAddress.html\',\'0\',\'首页\');"'+'data-target="#home" '+'data-toggle="tab" '+'class="innera" '+'style="margin-left: 30px;">' +'首页</span></a></li>';//后台数据for (var i in appData) {t_str += '<li class="has-list open in" data-idx="' + (i + 1) + '" id="node_' + (i + 1) + '">';t_str += '<i class="list-toggle icon"></i>';//点击展开或关闭var t_collapseStr = 'onClick="javascript:toggleTreeNode(\'node_' + (i + 1) + '\');"';   t_str += '<a id="node_a_' + (i + 1) + '"  href="#" ' + t_collapseStr + '>' +appData[i].AppNameJC + '</a>';t_str += '<ul id="innerli" data-idx="' + (i + 1) + '">';var colIndex = 0;//二层树状菜单（必须知道有几层树状菜单）for (var j in appData[i].MainMenu) {if (appData[i].MainMenu[j].IsMenuShow == 0) {       //判断是否在菜单栏中显示colIndex += 1;t_icon = appData[i].MainMenu[j].MenuIcon;      //左边树状显示图标t_id = appData[i].MainMenu[j].ID;          //树状链接的idt_name = appData[i].MainMenu[j].AppMainMenuName;      //树状名称t_linkpath = appData[i].MainMenu[j].LinkPath;  //跳转的地址（页面或网址）if(t_linkpath == ""){t_linkpath = appData[i].MainMenu[j].LinkPathEx;}t_opentype = appData[i].MainMenu[j].OpenType;   //打开方式（iframe或打开新标签）//将三个参数传值打开tabs页面，由于是要带上引号传参数，所以需要通过转义符将单引号转义，前后都需要转义t_clickStr = 'onClick="javascript:SelectLayerEvent(\'' + t_id + '\',\''+t_linkpath+'\',\''+ t_opentype+'\',\''+t_name+'\');"';t_str += '<li data-idx="' + (i + 1) + '"  data-id="' + (i + 1) + '-' + colIndex + '">'+'<a class="innera" ' + t_clickStr +' >' +'<i class="icon icon-' + appData[i].MainMenu[j].MenuIcon + ' btn-icon"></i>' +t_name + '</a></li>';}}t_str += "</ul>"t_str += '</li>';}}treeMenu[0].innerHTML = t_str;

2、动态生成树状菜单，推荐！！

无需知道有几层
官网位置：https://www.openzui.com/#view/tree
后台数据参数名称：

{"code": 0,"msg": "操作成功","data": [{"AppGUID": "b02311e5-48ea-471f-8b5f-ea62956eb1cd","title": "用户管理","children": [{"GUID": "269f7bc5-38c8-48de-916f-3fe926c52cf3","title": "新增","ID": 1,"MenuIcon": "database",    //菜单前面的图标"LinkType": 0,             //打开方式：0：内部打开，1：外部打开"url": "edit.html",        //改为自己的页面"LinkPathEx": "",          //也可用外部链接"OpenType": 0,             //打开类型，0：iframe，1：新窗口"IsMenuShow": 0          //是否在菜单中显示}, {"GUID": "7f4eb8d3-616a-4370-a2b8-063b94762c1c","title": "编辑","ID": 2,"MenuIcon": "database","LinkType": 0, "url": "edit.html","LinkPathEx": "", "OpenType": 0,"IsMenuShow": 0 }, {"GUID": "2d6330db-c986-4d65-8c43-3c9fb21fddf1","title": "删除","ID": 3,"MenuIcon": "database","LinkType": 0,"url": "delete.html","LinkPathEx": "", "OpenType": 0,"IsMenuShow": 0 }]}]
}

通过ZUI自带的tree功能生成树状菜单
前提要引入tree.js文件：https://github.com/easysoft/zui/blob/v1.9.2/src/js/tree.js

$('#treeMenu').tree({data: appData,initialState: 'expand', //全部展开itemCreator: function($li, item) {var t_linkpath = item.url; //跳转的地址（页面或网址）if (t_linkpath == "") { //如果内部链接没有的话，使用外部链接t_linkpath = item.LinkPathEx;}//将三个参数传值打开tabs页面，由于是要带上引号传参数，所以需要通过转义符将单引号转义，前后都需要转义var t_clickStr = 'onClick="javascript:SelectLayerEvent(\'' + item.ID + '\',\'' + t_linkpath + '\',\'' + item.OpenType +'\',\'' + item.title + '\');"';var t_collapseStr = 'onClick="javascript:toggleTreeNode(\'' + item.AppGUID + '\');"'; //打开或关闭//判断是应用还是应用系统功能，若是应用则给当前li增加id，方便点击可以展开关闭，并且触发的click事件改为展开关闭事件//否则是触发打开tab标签事件if (item.children !== undefined) {$li.addClass(item.AppGUID);t_clickStr = t_collapseStr;}//判断有没有图标，没有图标则不显示t_str = '<a class="innera" ' + t_clickStr + ' >';if (item.MenuIcon == undefined || item.MenuIcon == 'undefined') {t_str += item.title + '</a>';} else {t_str += '<i class="icon icon-' + item.MenuIcon + ' btn-icon"></i>' +item.title + '</a>';}//只有二局显示下面两个菜单，后面可以分配应用系统功能，可去掉这个if (prefix !== "v3egj" && prefix !== "t3egj") {if (item.title == "二局项目供应商" || item.title == "二局项目物资") {item.IsMenuShow = 1;}}//给所有在菜单中显示的li追加元素if (item.IsMenuShow == 0 || item.IsMenuShow == undefined) {$li.append(t_str);}}});

不论用上述那种方法生成树状菜单，如果要结合tab使用的话，要先初始化一个Tab，也就是你页面刚打开时的Tab页面

 var tabs = [{title: '首页',type: 'iframe',forbidClose: true,//不能关闭url: "index.html",id: "1"}];// 初始化标签页管理器$('#tabsExample').tabs({tabs: tabs});

点击展开关闭功能

function toggleTreeNode(nodeID) {var liObj = $('.' + nodeID);var cName = liObj[0].className;if (cName.indexOf('open') != -1) {liObj.removeClass('open');} else {liObj.addClass('open');}
};

点击菜单打开Tab页面

function SelectLayerEvent(inneraId, linkpath, opentype, name) {if (linkpath == 'undefined') {return}if (opentype == 0) {var arr;arr = {"title": name,"url": linkpath,"type": "iframe","id": inneraId}// 生成导航条的名称用来做以后的搜索,防止重复的导航被再次追加var hsy_nav = $(".tab-nav-item span");var hsy_nav_a = $(".tab-nav-link span");var liStr = [];for (var k = 0; k < hsy_nav.length; k++) {liStr.push(hsy_nav[k].dataset.id);}//如果该tab已经被打开了，则直接显示if (liStr.indexOf(inneraId) !== -1) {for (var x = 0; x < hsy_nav.length; x++) {if (hsy_nav_a[x].innerHTML == span_a) {$(".tab-nav-item").removeClass("active");$(".tab-nav-item:eq(" + x + ")").addClass("active");$(".tab-pane").removeClass("active");$(".tab-pane:eq(" + x + ")").addClass("active");}}} else {var myTabs = $('#tabsExample').data('zui.tabs');myTabs.open(arr);}} else {//外链接window.open(linkpath);return;}}

ZUI 动态加载树形菜单+动态打开Tab相关推荐

Vue + Spring Boot 项目实战（十五）：动态加载后台菜单
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.后端实现 1.表设计 2.pojo 3.菜单查询接口(树结构查询) 二.前端实现 1.后台页面设计 2.数据处理 3.添 ...
Android动态加载黑科技动态创建Activity模式
基本信息 Author:kaedea GitHub:android-dynamical-loading 代理Activity模式的限制还记得我们在代理Activity模式里谈到启动插件APK里的Ac ...
layui的tree如何实现动态加载_layui tree动态加载利用CAReplicatorLayer实现的加载动画 - 电脑常识 - 服务器之家...
layui tree动态加载利用CAReplicatorLayer实现的加载动画发布时间:2017-04-12 来源:服务器之家在上一篇中,笔者简要介绍了CAReplicatorLayer,在本 ...
android listview动态加载数据,ListView动态加载数据
当listview需要加载的数据过多时,若一次性载入则速度会相当缓慢,影响用户体验,这时候就需要动态加载数据,即每次载入固定长度的数据,android market的listview就是采用这种方式, ...
HTML5动态加载资源方式,动态加载JavaScript文件的3种方式
以下是遇到的几种动态加载JavaScript文件的方式,持续更新中... 一.使用document.write/writeln()方式该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方 ...
HTML5动态加载资源方式,动态加载JavaScript文件的两种方法
这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval ...
html动态加载js方法,动态引入js四种方法总结
这次给大家带来动态引入js四种方法总结,动态引入js四种方法的注意事项有哪些,下面就是实战案例,一起来看一下. index.html test.jsalert("hello! I am te ...
第二十四节：动态加载JS和动态加载CSS
1.动态加载JS 一般需要用到js,需要将js放到<script></<script>中,一般script放到页面底部:或者在顶部引入外部js. <!DOCTYPE ...
html 动态加载的菜单当菜单点击一下，打开接着又关闭
当菜单点击一下,打开接着又关闭有可能是jquery 加载了两遍认真检查一下代码