大家好，又见面了，我是你们的朋友全栈君。
第一次听说这个模板，留着以后用
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
-
${user.name}
${user.name}
- Followers Sales Friends
- 修改密码 注销
header效果如下图所示，点击sidebar toggle button，logo-lg隐藏，logo-mini显示，如右图。
aside设置：放在aside标签里。
导航
首页
{ {each sub1 as value i}} //sub1 对应js代码中的 sub1 .
{ {value.name}}
- { {each value.sub as value1 i1}}//对应 rootList[i].sub
- { {value1.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
{
}
}
}
return retList;
}
$.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.cn/164548.html原文链接：https://javaforall.cn
