easyui 手风琴 accordion展示左侧二级菜单写法

废话不多讲,先上一张效果图共同学们参考:


当然工作平台一下也有相应的二级菜单,之前使用递归写无限级菜单,因为遇到种种问题搁置了,下一篇小编继续奉上

现在展示数据结构:

var json=[{
    "m_id": 1,
    "m_name": "工作平台",
    "m_code": "001",
    "m_childrenId": 0,
    "m_icon": "fa fa-television fa-2x",
    "m_url": "ww.baidu.com",
    "m_time": 1526349702000,
    "m_text": "",
    "m_sort": 0,
    "m_level": 0,
    "m_statu": 0,
    "menus": [{
        "m_id": 6,
        "m_name": "工作平台一",
        "m_code": "006",
        "m_childrenId": 1,
        "m_icon": "fa fa-television fa-2x",
        "m_url": "ww.baidu.com",
        "m_time": 1526349703000,
        "m_text": "",
        "m_sort": 0,
        "m_level": 0,
        "m_statu": 0,
        "menus": [{
            "m_id": 11,
            "m_name": "工作平台二",
            "m_code": "011",
            "m_childrenId": 6,
            "m_icon": "fa fa-television fa-2x",
            "m_url": "ww.baidu.com",
            "m_time": 1526349704000,
            "m_text": "",
            "m_sort": 0,
            "m_level": 0,
            "m_statu": 0,
            "menus": []
        }]
    }]
}, {
    "m_id": 2,
    "m_name": "工具",
    "m_code": "002",
    "m_childrenId": 0,
    "m_icon": "fa fa-cubes fa-2x",
    "m_url": "ww.baidu.com",
    "m_time": 1526349702000,
    "m_text": "",
    "m_sort": 0,
    "m_level": 0,
    "m_statu": 0,
    "menus": [{
        "m_id": 7,
        "m_name": "工具一",
        "m_code": "007",
        "m_childrenId": 2,
        "m_icon": "fa fa-cubes fa-2x",
        "m_url": "ww.baidu.com",
        "m_time": 1526349703000,
        "m_text": "",
        "m_sort": 0,
        "m_level": 0,
        "m_statu": 0,
        "menus": [{
            "m_id": 12,
            "m_name": "工具二",
            "m_code": "012",
            "m_childrenId": 7,
            "m_icon": "fa fa-cubes fa-2x",
            "m_url": "ww.baidu.com",
            "m_time": 1526349704000,
            "m_text": "",
            "m_sort": 0,
            "m_level": 0,
            "m_statu": 0,
            "menus": []
        }, {
            "m_id": 13,
            "m_name": "数据统计二",
            "m_code": "013",
            "m_childrenId": 7,
            "m_icon": "fa fa-bar-chart fa-2x",
            "m_url": "ww.baidu.com",
            "m_time": 1526349704000,
            "m_text": "",
            "m_sort": 0,
            "m_level": 0,
            "m_statu": 0,
            "menus": []
        }]
    }]
}, {
    "m_id": 3,
    "m_name": "数据统计",
    "m_code": "003",
    "m_childrenId": 0,
    "m_icon": "fa fa-bar-chart fa-2x",
    "m_url": "ww.baidu.com",
    "m_time": 1526349702000,
    "m_text": "",
    "m_sort": 0,
    "m_level": 0,
    "m_statu": 0,
    "menus": [{
        "m_id": 8,
        "m_name": "数据统计一",
        "m_code": "008",
        "m_childrenId": 3,
        "m_icon": "fa fa-bar-chart fa-2x",
        "m_url": "ww.baidu.com",
        "m_time": 1526349703000,
        "m_text": "",
        "m_sort": 0,
        "m_level": 0,
        "m_statu": 0,
        "menus": []
    }]
}, {
    "m_id": 4,
    "m_name": "系统管理",
    "m_code": "004",
    "m_childrenId": 0,
    "m_icon": "fa fa-cog fa-2x",
    "m_url": "ww.baidu.com",
    "m_time": 1526349703000,
    "m_text": "",
    "m_sort": 0,
    "m_level": 0,
    "m_statu": 0,
    "menus": [{
        "m_id": 9,
        "m_name": "系统管理一",
        "m_code": "009",
        "m_childrenId": 4,
        "m_icon": "fa fa-cog fa-2x",
        "m_url": "ww.baidu.com",
        "m_time": 1526349703000,
        "m_text": "",
        "m_sort": 0,
        "m_level": 0,
        "m_statu": 0,
        "menus": [{
            "m_id": 14,
            "m_name": "系统管理二",
            "m_code": "014",
            "m_childrenId": 9,
            "m_icon": "fa fa-cog fa-2x",
            "m_url": "ww.baidu.com",
            "m_time": 1526349704000,
            "m_text": "",
            "m_sort": 0,
            "m_level": 0,
            "m_statu": 0,
            "menus": []
        }]
    }]
}, {
    "m_id": 5,
    "m_name": "更多",
    "m_code": "005",
    "m_childrenId": 0,
    "m_icon": "fa fa-list fa-2x",
    "m_url": "ww.baidu.com",
    "m_time": 1526349703000,
    "m_text": "",
    "m_sort": 0,
    "m_level": 0,
    "m_statu": 0,
    "menus": [{
        "m_id": 10,
        "m_name": "更多一",
        "m_code": "010",
        "m_childrenId": 5,
        "m_icon": "fa ffa-list fa-2x",
        "m_url": "ww.baidu.com",
        "m_time": 1526349703000,
        "m_text": "",
        "m_sort": 0,
        "m_level": 0,
        "m_statu": 0,
        "menus": [{
            "m_id": 15,
            "m_name": "更多二",
            "m_code": "015",
            "m_childrenId": 10,
            "m_icon": "fa ffa-list fa-2x",
            "m_url": "ww.baidu.com",
            "m_time": 1526349704000,
            "m_text": "",
            "m_sort": 0,
            "m_level": 0,
            "m_statu": 0,
            "menus": []
        }]
    }]
}]

这是一个标准的树形结构,再看一下前台的页面easyui官方demo布局样式:
    <div region="west" data-options="iconCls:'icon-world '" split="true"  title="导航菜单" style="width:220px;">
    <div id="west" class="easyui-accordion"> 
    </div>  

</div>

到最后一步遍历数据拼接菜单,上面已经提到了暂时没有递归,这种写法会有局限性不过可以实现我们想要的效果:

function showTree(menu,m_id) {
    if(menu.menus.length > 0){
        $.each(menu.menus,function(i,n){
              var menulist = "";  
              menulist += "<ul>";
                $.each(n.menus, function(j, o) {  
                    menulist += "<li><div><a target='mainFrame'>" + o.m_name + "</a></div></li> ";  
                })  
                menulist += "</ul>";  
            $("#west").accordion("add", {  
                title: n.m_name,  
                content: menulist,
                select:true
            })  

        })

    }
}

在这里解释一下showTree()里的两个参数:menu跟m_id是最顶级的菜单并不是 平台一,工具一,(平台一,工具一)附属于工作平台下的二级,三级菜单


不明白继续看:menu 跟 m_id 是第一个要展示的顶级菜单的第一个数组的id,也就是说menu[0],menu[0].m_id;再不明白加留言加我

到这里就全部结束了;

   



猜你喜欢

转载自blog.csdn.net/nicholas_long/article/details/80402494
今日推荐