easyui中layout、accordion加tabs实现简单菜单布局实例

蔚落 2022-08-07 05:46 196阅读 0赞

一般对于后台界面都是采用`BorderLayout`进行布局的。`BorderLayout`也就是将界面分成五块，如下图所示，分别有：`North`、`East`、`South`、`West`、`Center`

![这里写图片描述][20150315223205132]

其中比较特殊的是`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">
                   
                   <div data-options="fit:true,collapsible:false" style="padding:10px;">
                        <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）：

![这里写图片描述][20150315224517738]

下面要处理的就是点击菜单后，在`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>');
                }
            }
        });
    }

[20150315223205132]: /images/20220805/e8f652e4943143fabce71912be2c99b9.png
[20150315224517738]: /images/20220805/2cee5aa9382b42de8a9026c0e2c73f01.png