使用EasyUI开发银行业绩统计系统[17]-经典布局、百用不厌-原创手记-慕课网

一，本篇简介

上一篇已经讲了登录的实现，本篇要实现登录之后的主页，样子如下，简单说明几点：

1，logo使用的工行logo，其实建行logo更适配蓝色的EasyUI主题，此处暂且用工行logo。
2，实现了了上标题栏，下版权区域，中间左侧菜单栏，中间右侧内容栏的布局。
3，点击菜单之后，内容栏显示菜单对应内容。

图片描述

二，EasyUI布局实现

1，导入库这个，不必过多解释了吧。

   <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">

2，首先针对body使用布局，然后通过指定div标签的data-options中的region值，设定各个div的位置。需要注意的是内容栏使用了class="easyui-panel"组件，easyui-panel可以轻易的加载指定网页，便于实现点击菜单后显示指定内容这一功能。

<body class="easyui-layout">
        <div data-options="region:'north',border:false" style="height:48px;background:#EEEEEE;">
            <div style="float:left;height:47px;width:451px;background:url(images/logo.jpg);"></div>
        </div>
        <div id="menu" data-options="region:'west',split:true,title:'菜单'" style="width:150px;padding:10px;background:#FDFDFE;">
        </div>
        <div data-options="region:'south',border:false" style="height:50px;background:#EEEEEE;padding:10px;text-align:center;">
            版权所有 熊猫老大
        </div>
        <div id="mainPanel" data-options="region:'center',title:'欢迎使用'" class="easyui-panel" style="width:100%;height:100%;padding:30px 30px;">
            欢迎使用业绩统计系统
        </div>
  </body>

三，点击左侧菜单后，右侧显示对应网页实现

1，首先在编辑一个脚本，在网页初始化后执行InitMenu方法，如果不明白$function(){};，可以百度下，是jQuery的功能。

$(function(){
            InitMenu();
        });

2，在InitMenu()中加载左侧菜单，此处仅仅加载了一个菜单1，对应网页是tree.jsp。通过$("#menu li a").click方法指定了点击menu区域的<a>标签后，将执行showPage方法，携带的参数分别是超链接的文本和way属性，注意way属性是菜单对应的地址。

function InitMenu(){
            var url="tree.jsp";

            var innerHtml="<div><ul>";
            innerHtml+="<li><a href='#' way='"+url+"'>菜单1</a></li>";
            innerHtml+="</ul></div>";
            $("#menu").append(innerHtml);

            $("#menu li a").click(function(){
                var title = $(this).text();
                var url = $(this).attr("way");
                ShowPage(title,url);
            });
        }

3，实现点击菜单1后跳转对应url，通过EasyUI集成的方法，可以轻易的为内容区域的panel组件设置标题并更新内容。

function ShowPage(title,url){
            $("#mainPanel").panel({title:title});
            $("#mainPanel").panel("refresh",url);
        }

四，与之前通过jsp:include标签实现菜单加载的区别

之前猫哥在JSP+Servlet培训班作业管理系统说过一种点击菜单右侧内容页面加载对应页面的方法，实际上是通过调用Servlet来实现的，整个页面，包括左侧菜单区域，全部都是重新返回的。

而本次实际上通过客户端脚本语言，只刷新了内容区域，无疑更加合理，而且因为采用了EasyUI布局，对窗体大小的适配更加舒服，代码量也更少。

从本质上讲，布局嘛，本来就是显示的事情，在不加载远端数据的情况下，能不麻烦服务端就别麻烦，自力更生方丰衣足食。

使用EasyUI开发银行业绩统计系统[17]-经典布局、百用不厌原创