想要使用layui+template 展示后台管理的二级导航栏。
加载数据格式如下:{
"error": 0,
"desc": "请求成功",
"data": [
{
"id": 1,
"typeName": "首页信息",
"parentId": null,
"children": [
{
"id": 2,
"typeName": "首页分类",
"parentId": null,
"children": []
},
{
"id": 3,
"typeName": "首页信息",
"parentId": null,
"children": []
}
]
},
{
"id": 4,
"typeName": "课程管理",
"parentId": null,
"children": [
{
"id": 5,
"typeName": "课程分类",
"parentId": null,
"children": []
},
{
"id": 6,
"typeName": "课程管理",
"parentId": null,
"children": []
},
{
"id": 7,
"typeName": "情景案例",
"parentId": null,
"children": []
},
{
"id": 8,
"typeName": "必备知识",
"parentId": null,
"children": []
},
{
"id": 9,
"typeName": "特定思考题",
"parentId": null,
"children": []
},
{
"id": 10,
"typeName": "可选方案",
"parentId": null,
"children": []
},
{
"id": 11,
"typeName": "解决问题",
"parentId": null,
"children": []
},
{
"id": 12,
"typeName": "案例分析",
"parentId": null,
"children": []
},
{
"id": 13,
"typeName": "总结归纳",
"parentId": null,
"children": []
},
{
"id": 14,
"typeName": "考试自测",
"parentId": null,
"children": []
},
{
"id": 15,
"typeName": "智能决策",
"parentId": null,
"children": []
},
{
"id": 16,
"typeName": "参考资料",
"parentId": null,
"children": []
}
]
},
{
"id": 17,
"typeName": "论坛管理",
"parentId": null,
"children": []
}
]
}
初次加载,我想用thymeleaf 的each遍历,但是因为是二级的关联关系,并不能展示出来,只能展示一级根目录,二级目录展示就报错。说不能为空或不存在。好吧。问了下 别人说,需要递归。
由于只有两级,并不是无限的层级,所以,我就简单的写了一下,并不是不想继续考虑,因为层级越多,好像界面就没有办法展示,涉及到页面中的处理,有个想法,也就不试试了。
直接上自己的界面处理:
/** * 把数据递归出来 * @param data 要解析的数据 * @param flag 是否是根节点;true:是,false,不是 */ var html=""; function iteratorData(jsonObject,flag) { if(jsonObject.length!=0){ for(var i=0;i<jsonObject.length;i++){ if(flag){ html += " <li class=\"layui-nav-item layui-nav-itemed\">\n" + " <a href=\"javascript:;\">"+jsonObject[i].typeName+"</a>"; if(jsonObject[i].children!=null && jsonObject[i].children.length>0){ html += "<dl class=\"layui-nav-child\">"; iteratorData(jsonObject[i].children,false); html += "</dl>"; } html +="</li>"; }else { html +="<dd><a href=\"javascript:;\">"+jsonObject[i].typeName+"</a></dd>"; } } } return html; }