使用 EasyUI 創建左側導航菜單 - longying2008－IT工程師數位筆記本

文章出處

使用 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": []
    }
]