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

小灰灰 2022-05-24 06:08 433阅读 0赞

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

![70][]

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

现在展示数据结构：

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是最顶级的菜单并不是 平台一，工具一，（平台一，工具一）附属于工作平台下的二级，三级菜单

![70 1][]

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

到这里就全部结束了；

[70]: /images/20220524/e54083612aea4b0ab3ee6a56df7d0af1.png
[70 1]: /images/20220524/a5a201780f134b21adfe9cb8c86199db.png