使用layui写左侧动态手风琴

后台代码:

@RequestMapping("/loadId2")
public void list2(HttpServletResponse response, HttpServletRequest request,String token) {
String userTokenString = token.toString();
String string = request.getSession().getServletContext().getAttribute(userTokenString).toString();
Long id = null;  
if (string!=null) {
  String[] split = string.split("_");
  id = Long.parseLong(split[0]);
 }

List list = moduleService.getList(id);
String[] exclude = { "Users" ,"RoleModule"};
JsonUtils.printJsonStringFromArrayObjectWithExclude(response, list, exclude);

}

        public List getList(Long id){
String sql = " select m.moduleID,m.name,m.moduleParentID,m.className,m.sortIndex,m.url from                         permission.dbo.module as m where moduleID in(select module from roleModule where role =("+
        "select role from userRole where users ="+id+" )) order by sortIndex asc ";
return this.baseDao.exeSqlQuery(sql);

html中代码:

<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
        <ul class="layui-nav layui-nav-tree site-demo-nav" id="ul" lay-filter="test">
        </ul>
</div>

</div>

<div class="layui-body framediv" style="padding-left: 2px; " id="framedivs">
<!-- 内容主体区域 -->
<iframe id="iframeHome" name="iframeHome" src="page/video.html" scrolling="no" frameborder="0"     style="height: 905px;"></iframe>
</div>

js中代码:

//初始化菜单
function initMenu() {
$.ajax({
type: "post",
url: basePath + "/module/loadId2",
data: {
"token": token
},
async: false,
success: function(data) {
data = eval("(" + data + ")");
console.log(data);
var sonIndex = -1;
var menuList = "";
for(var i = 0; i < data.length; i++) {
var menu = data[i];
if(menu[2] == 0 || menu[2] == null) {
menuList += "<li class=\"layui-nav-item layui-nav-itemed " + (i == 0 ? "  layui-nav-itemed" : "") + "\"><a class=\"javascript:;\" href=\"javascript:void(0);\"><i class=\"" + menu[3] + "\"></i>" + menu[1] + "</a>";
sonIndex = 0;
for(var a = 0; a < data.length; a++) {
var ss = 1;
var menu2 = data[a];
if(menu2[2] == menu[0] && sonIndex == 0) {
menuList += "<dl class=\"layui-nav-child\"><dd><a href=\"" + (menu2[5].indexOf("http:") == 0 ? menu2[5] : ((menu2[5] == null || menu2[5] == '') ? "javascript:void(0);" : menu2[5])) + "\" target=\"iframeHome\" dataType=\"tabAdd\" onclick=\"tabAdd(this);\" ><i class=\"" + menu2[3] + "\"></i>" + menu2[1] + "</a></dd>";
sonIndex = -1;
ss++;
}
if(menu2[2] == menu[0] && sonIndex == -1 && menu2[2] != 0 && ss == 1) {
menuList += "<dd><a href=\"" + (menu2[5].indexOf("http:") == 0 ? menu2[5] : ((menu2[5] == null || menu2[5] == '') ? "javascript:void(0);" : menu2[5])) + "\" target=\"iframeHome\" dataType=\"tabAdd\" onclick=\"tabAdd(this);\" ><i class=\"" + menu2[3] + "\"></i>" + menu2[1] + "</a></dd>";
sonIndex = -1;
}
}
menuList += "</dl></li>";
}
}
$("#ul").html(menuList);
loadSchedule();
layui.use(['form'], function() {
var form = layui.form;
form.render();
});

}
});

}

//动态加载页面
function tabAdd(obj) {
var fa = $(obj).closest(".layui-nav-itemed").find("a").eq(0).text();
var a = $(obj).text();
var href = $(obj).attr("href");
$("#father").text(fa);
$("#ther").text(a);
$("#ids").attr("href", href);
if(href == "page/control.html") {
$("#iframeHome").height('1075px');
$('#framedivs').css('overflow', 'auto');
} else if(href == "page/video.html") {
$("#iframeHome").height('905px');
$('#framedivs').css('overflow', 'auto')
} else if(href == "page/systemTypeList.html") {
// $("#iframeHome").height('1075px');
$('#framedivs').css('overflow', 'hidden')
} else if(href == 'page/systemLicense.html') {
// $("#iframeHome").height('1075px');
$('#framedivs').css('overflow', 'hidden')
} else if(href == 'page/moduleList.html') {
$('#framedivs').css('overflow', 'hidden')
} else {
$("#iframeHome").height('861px');
}
}

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40393093/article/details/79461127
文章标签: 手风琴 layui
个人分类: 前端
上一篇使用echarts画简单的柱状图
下一篇使用layui实现树形结构
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭