easyui中layout、accordion加tabs實現簡單菜單佈局實例

原創

2020-02-21 13:35

一般對於後臺界面都是採用BorderLayout進行佈局的。BorderLayout也就是將界面分成五塊，如下圖所示，分別有：North、East、South、West、Center

其中比較特殊的是Center這塊區域，它是不固定的，會隨着四塊區域的變化而做出相應的調整。比如將West向左縮小10px，那麼Center則會向West方向擴張10px。其實這個easyUI已經幫我們實現好了，我們只需要使用它的layout就可以完成。

<body class="easyui-layout">
       <div data-options="region:'north'" style="height:70px; text-align: center">
           <h1>EasySpring後臺管理</h1>
       </div>
       <div data-options="region:'south',split:true" style="height:50px;"></div>
       <div data-options="region:'west',split:true,title:'菜單欄',iconCls:'icon-ok'" style="width:250px;">
           <div class="easyui-accordion" data-options="fit:true,border:false">
               <!-- 這裏由於只有一個，所以不設置title-->
               <div data-options="fit:true,collapsible:false" style="padding:10px;"><!-- 每一個div都是accordion中依賴的panel -->
                    <ul class="westBar" id="admin">
                        <li id="adminUser"><span class="icon-search" style="height:16px;width:16px;display:inline-block"></span>用戶管理</li>
                        <li id="adminRole"><span class="icon-search" style="height:16px;width:16px;display:inline-block"></span>角色管理</li>
                        <li id="adminPermission"><span class="icon-search" style="height:16px;width:16px;display:inline-block"></span>權限管理</li>
                    </ul>
               </div>
           </div>
       </div>
       <div data-options="region:'center',iconCls:'icon-ok'">
           <div id="admin_tabs" class="easyui-tabs" data-options="fit:true,border:false,plain:true">
           </div>
       </div>
</body>

這裏我們將easyui-layout這個class設到<body>標籤上，那麼就表示對整個頁面執行layout。當然也可以對局部的div執行layout。另外這裏對於左邊的菜單欄運用了accordion組件，accordion中的子級div就代表了每一個滑塊，這裏我們只用到一個滑塊，所以將collapsible設置爲false。那麼下面就要構建菜單欄中的菜單了，我們用ul+li來進行佈局。ok，佈局完成，效果應該如下所示（1024 * 768）：

下面要處理的就是點擊菜單後，在center中添加或選中響應的tab了。爲了達到便於擴展的目的，我們應該設計一套統一的邏輯：比如這裏的accordion下的每個panel都作爲一個模塊，然後該panel下面的菜單都歸屬於這個上級panel，那麼在url的設置時就有一個關聯了，比如模塊爲admin，菜單爲adminUser，那麼請求url就是.../admin/adminUser，具體可以看下面的代碼：

$(function(){
    $("ul.westBar li").on("click", function(){
        // 添加選中樣式
        $("ul.westBar li").removeClass('active');
        $(this).addClass('active');

        var id = $(this).attr('id');
        if($(this).hasClass('zdialog')){ // 這裏可以擴展對話框菜單
            $('#' + id + '-dialog').dialog('open');
            return;
        }
        var id = $(this).attr('id');
        var title = $(this).text();
        var iconCls = $(this).find("span").attr('class');
        var parent = $(this).parent().attr('id');
        addTabs(id, title, iconCls, parent);
    })
});

function addTabs(id, title, iconCls, parent){
    if($('#admin_tabs').tabs('exists',title)){ // 處理已打開過的tab
        $('#admin_tabs').tabs('select',title);
        return;
    }
    if(!iconCls){
        iconCls = 'icon-ok';
    }
    $('#admin_tabs').tabs('add',{
        title: title,
        href: contextPath + '/' + parent + '/' + id, // 這裏用parent + id來定義url
        iconCls: iconCls,
        closable: true,
        onLoadError:function(data){
            // 這裏對於非200狀態碼的都會加載不出來界面，而需要在這裏手動處理
            var tab = $('#admin_tabs').tabs('getSelected');
            var body = tab.panel('body');
            if(data.status == 401){
                body.html(data.responseText)
            }else{
                body.html('<h1>加載出錯</h1>');
            }
        }
    });
}