使用 EasyUI 创建左侧导航菜单

使用 JQuery EasyUI 创建左侧导航菜单，菜单的数据由后台服务提供。

效果图

HTML 元素

<div id="menuAccordion"></div>

JavaScript 代码

$(function() {
    var basePath = $(\'#basePath\').val();

    // 初始化
    $(\'#menuAccordion\').accordion({
        fillSpace: true,
        fit: true,
        border: false,
        animate: false
    });

    $.post(basePath + \'sys/menu/tree\', {type: 1}, function(data) {
        if(data) {
            $.each(data, function(index, item) {
                var selected = false;
                if (index == 0) {
                    selected = true;
                }
                // Accordion 折叠面板
                $(\'#menuAccordion\').accordion(\'add\', {
                    title: item.text,
                    content: "<ul id=\'menu_tree_" + item.id + "\'></ul>",
                    selected: selected
                });
                // 树形菜单
                $(\'#menu_tree_\' + item.id).tree({
                    data: item.children,
                    onClick: function(node) {
                        if (node.children.length != 0) {
                            return;
                        }
                        // 添加选项卡
                        addTab(\'tabs\', node.text, node.url);
                    }
                });
            });
        }
    }, \'json\');
});

/**
 * 添加标签页面板
 * @param tabsId 标签页 ID
 * @param title 标签页面板的标题文字
 * @param url 加载远程内容来填充标签页面板的 URL
 */
function addTab(tabsId, title, url) {
    var $tabs = $(\'#\' + tabsId);
    if($tabs.tabs(\'exists\', title)) {
        $tabs.tabs(\'close\', title);
    }
    $tabs.tabs(\'add\', {
        title: title,
        href: url,
        closable: true
    })
}

数据格式（JSON）

[
    {
        "id": 1,
        "parentId": 0,
        "url": "javascript:void(0)",
        "text": "系统设置",
        "checked": false,
        "state": "open",
        "children": [
            {
                "id": 2,
                "parentId": 1,
                "url": "sys/menu/index",
                "text": "菜单管理",
                "checked": false,
                "state": null,
                "children": []
            },
            {
                "id": 3,
                "parentId": 1,
                "url": "sys/role/index",
                "text": "角色管理",
                "checked": false,
                "state": null,
                "children": []
            },
            {
                "id": 4,
                "parentId": 1,
                "url": "sys/user/index",
                "text": "用户管理",
                "checked": false,
                "state": null,
                "children": []
            }
        ]
    },
    {
        "id": 8,
        "parentId": 0,
        "url": "javascript:void(0)",
        "text": "基础设置",
        "checked": false,
        "state": "open",
        "children": []
    }
]