官方文档link
1.AdminLTE的必要配置文件
2.自定义主题样式
(1)在body中设置class。
skin-blue：主题颜色，如果引入了_all-skins.min.css，有很多颜色可以选择，如左图，设置为skin-blue默认就为右图的主题样式。
sidebar-mini：在AdminLTE.css中可以找到。
(2)wrapper设置: AdminLTE.css
header设置：放在header标签里。
xxx后台管理系统
Toggle navigation
header效果如下图所示，点击sidebar toggle button，logo-lg隐藏，logo-mini显示，如右图。
aside设置：放在aside标签里。
导航
首页
{
{each sub1 as value i}} //sub1 对应js代码中的 sub1 .
{
{value.name}}
{
{/each}}
{
{/each}}
functionsloveSliderData (list, pid){var retList =[ ];var len =list.length;if (len > 0)
{for (var i = 0; i < len; i++)
{var x =list[i];if (x.pid ==pid)
{var node ={};
node.name=x.name;if (x.url == undefined || x.url == null || x.url == “”)
{
node.url= null;
}else{
node.url= “${ctx}${apath}/page/” +x.url;
}
node.ico=x.ico;
node.pid=x.pid;
node.id=x.id;
retList.push (node);
}else{
}
}
}returnretList;
}
$.HTTP.list (
{
url :”${ctx}${apath}/permission/list”,
success :function(list, pageinfo) {var rootList =[ ];
rootList= sloveSliderData (list, 0); //根据根菜单的pid为0，挑选出根菜单
if (list.length > 0)
{for (var i = 0; i < rootList.length; i++)
{
rootList[i].sub= sloveSliderData (list, rootList[i].id); //根据pid为0挑选出的根菜单的id，作为子菜单的pid。
}
}//组装数据源
var sidebardata ={
sub1 : rootList
};
console.log(sidebardata);//渲染菜单数据
var dt = template(“left-sidebarTmp”, sidebardata); //artTemplate方法
$(“#left-sidebar”).html(dt);
}
});
注意：
${ctx}${apath}/permission/list接口的数据在数据库中手动添加，java后台有代码将数据存入这个接口。数据库字段与js代码所需的字段对应一致。
经过js处理过的sidebardata：
成功后sidebar显示如下图所示：
content设置：放在section标签里。
点击sidebar的链接，对应的页面都会在iframe_box中显示出来。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/205067.html原文链接：https://javaforall.net
