layui 加载二级菜单

想要使用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;
}

layui 加载二级菜单

猜你喜欢