LayUI------iframe版生成動態菜單

1、簡單的動態生成

/**
     * 根據用戶權限動態生成菜單
     * @param data
     */
    function setMenu(data) {
        let ulHtml = '<ul class="layui-nav layui-nav-tree ">';
        for (let i = 0; i < data.length; i++) {
            ulHtml += '<li class="layui-nav-item">';
            if (data[i].children !== undefined && data[i].children !== null && data[i].children.length > 0) {
                ulHtml += '<a href="javascript:;" target="option">' + data[i].title;
                ulHtml += '<span class="layui-nav-more"></span>';
                ulHtml += '</a>';
                ulHtml += '<dl class="layui-nav-child">';
                //二級菜單
                for (let j = 0; j < data[i].children.length; j++) {
                    //是否有孫子節點
                    if (data[i].children[j].children !== undefined && data[i].children[j].children !== null && data[i].children[j].children.length > 0) {
                        ulHtml += '<dd>';
                        ulHtml += '<a href="javascript:;" target="option">' + data[i].children[j].title;
                        ulHtml += '<span class="layui-nav-more"></span>';
                        ulHtml += '</a>';
                        //三級菜單
                        ulHtml += '<dl class="layui-nav-child">';
                        let grandsonNodes = data[i].children[j].children;
                        for (let k = 0; k < grandsonNodes.length; k++) {
                            ulHtml += '<dd>';
                            ulHtml += '<a href="' + grandsonNodes[k].href + '" target="option">' + grandsonNodes[k].title + '</a>';
                            ulHtml += '</dd>';
                        }
                        ulHtml += '</dl>';
                        ulHtml += '</dd>';
                    } else {
                        ulHtml += '<dd>';
                        ulHtml += '<a href="' + data[i].children[j].href + '" target="option">' + data[i].children[j].title;
                        ulHtml += '</a>';
                        ulHtml += '</dd>';
                    }
                }
                ulHtml += '</dl>';
            }
            ulHtml += '</li>';
        }
        ulHtml += '</ul>';

        $('#nav-menu').html(ulHtml);
    }

2、返回數據格式

[
    {
        "id":6,
        "title":"用戶管理",
        "field":"menu:userManager",
        "href":"#",
        "children":[
            {
                "id":7,
                "title":"用戶列表",
                "field":"menu:userList",
                "href":"user/userList.html",
                "children":[

                ]
            },
            {
                "id":8,
                "title":"角色列表",
                "field":"menu:userRoleList",
                "href":"role/roleList.html",
                "children":[

                ]
            }
        ]
    }
]