EasyUI動態生成菜單

　　業務需求：不同角色有不同的權限，我們根據角色加載頁面時展示不同的菜單。在easyUI中，菜單一般采用手風琴accordion組件進行展示，一級菜單下可以加載二級菜單，效果如下：

　　普通用戶看到的菜：

 

　　管理員看到的菜單：

 

　　點擊二級菜單后將在右邊添加一個tab頁，支持多個tab頁同時展示：

 

　　接下來看實現：

　　html我們把各種角色都需要展示的菜單列出來，比如：訂單查詢跟發票生成

<div data-options="region:'west',title:'菜單',split:true,iconCls:'icon-table'" style="width:180px;">
    <div id="menus" class="easyui-accordion" data-options="fit:true,border:false,selected:false">
        <div data-options="title:'訂單查詢',iconCls:'icon-page'" style="padding:8px;">
            <ul class="easyui-tree" data-options="onBeforeSelect:function(node){return false;}">
                <li><a onclick="tab_add('訂單查詢','/orders.html')">訂單查詢</a></li>
            </ul>
        </div>
        <div data-options="title:'發票生成',iconCls:'icon-page'" style="padding:8px;">
            <ul class="easyui-tree" data-options="onBeforeSelect:function(node){return false;}">
                <li><a onclick="tab_add('發票生成','/invoice.html')">發票生成</a></li>
            </ul>
        </div>
    </div>
</div>
<div data-options="region:'center',border:false">
    <div class="easyui-tabs" fit="true" id="tt">
    </div>
    <div id="menu" class="easyui-menu">
        <div data-options="iconCls:'icon-reload'" onclick="tab_refresh()">Refresh</div>
        <div data-options="iconCls:'icon-cancel'" onclick="tab_close()">Close</div>
    </div>
</div>

　　在js中動態根據權限添加菜單，生成tab頁，支持右鍵刷新和關閉：

    // 菜單選中后添加tab
    function tab_add(title, url) {
        if ($('#tt').tabs('exists', title)) {
            $('#tt').tabs('select', title)
        } else {
            var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
            $('#tt').tabs('add', {
                title: title,
                content: content,
                closable: true
            });
        }
    }

    // 右鍵刷新
    function tab_refresh() {
        var content = $('#tt').tabs('getTab', menuOfTab).panel('options').content;
        $('#tt').tabs('getTab', menuOfTab).panel({
            content: content
        });
    }

    // 右鍵關閉
    function tab_close() {
        $('#tt').tabs('close', menuOfTab);
    }


    // 當角色不同時，創建不同的菜單
    function createMenu(roleValue) {
        var content = "<ul id='Flow' style='padding:8px;'>";
        content += "<li><a onclick=\"tab_add('評測查詢','flows.html')\">評測查詢</a></li>";
        if (roleValue == '1') {
            content += "<li><a onclick=\"tab_add('評測登記','register.html')\">評測登記</a></li>";
            content += "<li><a onclick=\"tab_add('評測退款','refund.html')\">評測退款</a></li>";
        } else if (roleValue == '2') {
            content += "<li><a onclick=\"tab_add('評測審批','approve.html')\">評測審批</a></li>";
        } else if (roleValue == '3') {
            content += "<li><a onclick=\"tab_add('評測退款','refund.html')\">評測退款</a></li>";
        }
        content += "</ul>";
        $('#menus').accordion('add', {
            title: '評測管理',
            content: content,
            iconCls: 'icon-page',
            selected: false
        });
        $('#Flow').tree({
            onBeforeSelect: function (node) {
                return false;
            }
        });

        // 當角色為admin時，添加merchant和user菜單
        if (roleValue == '4') {
            var content = "<ul id='Merchant' style='padding:8px;'>";
            content += "<li><a onclick=\"tab_add('賬戶管理','merchant.html')\">賬戶管理</a></li></ul>";
            $('#menus').accordion('add', {
                title: '賬戶管理',
                content: content,
                iconCls: 'icon-page',
                selected: false
            });
            $('#Merchant').tree({
                onBeforeSelect: function (node) {
                    return false;
                }
            });

            content = "<ul id='User' style='padding:8px;'>";
            content += "<li><a onclick=\"tab_add('用戶管理','user.html')\">用戶管理</a></li></ul>";
            $('#menus').accordion('add', {
                title: '登陸用戶管理',
                content: content,
                iconCls: 'icon-page',
                selected: false
            });
            $('#User').tree({
                onBeforeSelect: function (node) {
                    return false;
                }
            });

            content = "<ul id='SKU' style='padding:8px;'>";
            content += "<li><a onclick=\"tab_add('產品SKU配置','sku.html')\">產品SKU配置</a></li></ul>";
            $('#menus').accordion('add', {
                title: '產品SKU中文配置',
                content: content,
                iconCls: 'icon-page',
                selected: false
            });
            $('#SKU').tree({
                onBeforeSelect: function (node) {
                    return false;
                }
            });

            content = "<ul id='task' style='padding:8px;'>";
            content += "<li><a onclick=\"tab_add('定時任務配置','task.html')\">定時任務執行時間配置</a></li></ul>";
            $('#menus').accordion('add', {
                title: '定時任務配置',
                content: content,
                iconCls: 'icon-page',
                selected: false
            });
            $('#task').tree({
                onBeforeSelect: function (node) {
                    return false;
                }
            });
        }
    }

　　上面的roleValue是在登陸時調用后台接口獲取到的，可以參見EasyUI動態展示用戶信息。