layui结合后端语言实现菜单渲染
注意：接口渲染的时候 一定要防止动态化的问题
layui.use(['element'],function(){
var element = layui.element;
//初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
element.init();
例子：
我使用了layui中的menu结构，这个结构一般来说使用Java、php进行结合，php的话页面可以混用，Java就不行了，Java中是用呢ajax进行接口获取使用之后，进行菜单渲染
渲染完成之后，没有动态效果，那么需要element进行设置
html相关代码
js相关代码
window.menu = '';
layui.use(['index','layer', 'form','element'],function(){
var layer = layui.layer,$ = layui.$, element = layui.element;
$.ajax({
url:'/user/functionList',
data:{},
type:'get',
dataType:'json',
async:false,
success:function(result){
var menuStr = result.data;
menuChildren(menuStr,1,true);
$("#LAY-system-side-menu").append(menu);
//初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
element.init();
}
});
})
/**
* 根据级别 最高级别三级
* @param menuStr
* @param level
*/
function menuChildren(menuStr, level, order){
$.each(menuStr, function(i, item){
if(level == 1){
menu += '\n' +
'\n' +
' \n' +
' '+item.name+'\n' +
' \n\n';
menuChildren(item.children, 2, true);
}else if(level == 2){
if(item.children.length>0){
menu += '\n' +
' - \n' +
' '+item.name+'\n' +
'
\n';
menuChildren(item.children, 3, true);
}else{
menu += '\n' +
'- \n' +
''+item.name+'\n' +
'
\n';
menuChildren(item.children, 3, false);
}
}else{
menu += '- '+item.name+'
\n';
}
});
if(level == 1){
menu += '
';
}else if(level == 2){
}else if(level == 3){
if(order){
menu += '\n\n\n';
}else{
menu += '\n';
}
}
}
数据结构体(java/php/其他语言) json数据结构
{"code":0,"message":"成功","data":[{"id":1,"name":"权限管理","parentId":0,"url":null,"children":[{"id":2,"name":"用户列表","parentId":1,"url":"user/index","children":[{"id":5,"name":"test","parentId":2,"url":"test/test","children":[]}]},{"id":3,"name":"角色列表","parentId":1,"url":"role/index","children":[]},{"id":4,"name":"菜单列表","parentId":1,"url":"function/index","children":[]}]}]}