1. 效果图展示

2. 工程目录结构

注意: webapp下的resources目录放置easyui和js(jQuery文件是另外的)

                  

3. 代码

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>学生成绩管理系统 管理员后台</title>

    <link rel="stylesheet" type="text/css" href="/resources/easyui/css/default.css"/>

    <link rel="stylesheet" type="text/css" href="/resources/easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="/resources/easyui/themes/icon.css">

    <%--以下三个js文件导入顺序不要调整!!--%>

    <script type="text/javascript" src="/resources/js/jquery-1.7.2.js"></script>

    <script type="text/javascript" src="/resources/easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="/resources/easyui/js/outlook2.js"></script>

    <script type="text/javascript">

        var _menus = {

            "menus": [

                {

                    "menuid": "1", "icon": "", "menuname": "成绩统计分析",

                    "menus": [

                        {

                            "menuid": "11",

                            "menuname": "考试列表",

                            "icon": "icon-exam",

                            "url": "ExamServlet?method=toExamListView"

                        }

                    ]

                },

                {

                    "menuid": "2", "icon": "", "menuname": "学生信息管理",

                    "menus": [

                        {

                            "menuid": "21",

                            "menuname": "学生列表",

                            "icon": "icon-user-student",

                            "url": "StudentServlet?method=toStudentListView"

                        },

                    ]

                },

                {

                    "menuid": "3", "icon": "", "menuname": "教师信息管理",

                    "menus": [

                        {

                            "menuid": "31",

                            "menuname": "教师列表",

                            "icon": "icon-user-teacher",

                            "url": "TeacherServlet?method=toTeacherListView"

                        },

                    ]

                },

                {

                    "menuid": "4", "icon": "", "menuname": "基础信息管理",

                    "menus": [

                        {

                            "menuid": "41",

                            "menuname": "年级列表",

                            "icon": "icon-world",

                            "url": "GradeServlet?method=toGradeListView"

                        },

                        {

                            "menuid": "42",

                            "menuname": "班级列表",

                            "icon": "icon-house",

                            "url": "ClazzServlet?method=toClazzListView"

                        },

                        {

                            "menuid": "43",

                            "menuname": "课程列表",

                            "icon": "icon-book-open",

                            "url": "CourseServlet?method=toCourseListView"

                        }

                    ]

                },

                {

                    "menuid": "5", "icon": "", "menuname": "系统管理",

                    "menus": [

                        {

                            "menuid": "51",

                            "menuname": "系统设置",

                            "icon": "icon-set",

                            "url": "SystemServlet?method=toAdminPersonalView"

                        },

                    ]

                }

            ]

        };

    </script>

</head>

<body class="easyui-layout" style="overflow-y: hidden" scroll="no">

<div region="north" split="true" border="false" style="overflow: hidden; height: 30px;

        line-height: 20px;color: #fff; font-family: Verdana, 微软雅黑,黑体"></div>

<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>

<div data-options="region:'west',title:'导航菜单',split:true" style="width:200px;">

    <div id="nav" class="easyui-accordion" fit="true" border="false">

    </div>

</div>

<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>

</body>

</html>

springmvc.xml配置静态资源

<!--静态资源-->

<mvc:resources mapping="/resources/**" location="/resources/"/>

注意:

1. EasyUI和JQuery文件是放在webapp/resources目录下的, 需要把 jquery-1.7.2.js也引进去.

2. jsp文件中引入EasyUI的css和js文件的顺序如下, 不要随意调整!!!

　   <link rel="stylesheet" type="text/css" href="/resources/easyui/css/default.css"/>

    <link rel="stylesheet" type="text/css" href="/resources/easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="/resources/easyui/themes/icon.css">

    <%--以下三个js文件导入顺序不要调整!!--%>

    <script type="text/javascript" src="/resources/js/jquery-1.7.2.js"></script>

    <script type="text/javascript" src="/resources/easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="/resources/easyui/js/outlook2.js"></script>

3. springMVC的静态资源配置是针对resources目录下所有文件的, 所以之后的图片等静态资源文件也直接放在resources目录下即可.

4. 导航菜单是在以下id为nav的div里显示的

<div data-options="region:'west',title:'导航菜单',split:true" style="width:200px;">

    <div id="nav" class="easyui-accordion" fit="true" border="false">

    </div>

</div>

该div的id属性一定要是 nav, 试过其它的都没有效果.

SpringMVC+EasyUI实现页面左侧导航菜单的更多相关文章

  1. 使用 EasyUI 创建左侧导航菜单

    使用 JQuery EasyUI 创建左侧导航菜单,菜单的数据由后台服务提供. 效果图 HTML 元素 <div id="menuAccordion"></div ...

  2. jquery仿天猫商城左侧导航菜单

    之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...

  3. （转）jquery仿天猫商城左侧导航菜单

    原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...

  4. SharePoint 2013技巧分享系列 - 隐藏Blog和Apps左侧导航菜单

    企业内部网中,不需要员工创建Blog或者创建,安装SharePoint应用,因此需要在员工个人Web页面需要隐藏Blog或者Apps导航菜单, 其步骤设置如下: 该技巧适合SharePoint 201 ...

  5. JS实现静态html页面左侧导航，右侧连接页面

    本人前端小菜,想实现左侧导航固定,右侧链接页面,不想用iframe,请问各位有什么好的建议,最好有个demo,谢谢

  6. 基于bootstrap的后台左侧导航菜单和点击二级菜单刷新二级页面时候菜单展开显示当前菜单

    本文使用的框架版本为: bootstrap3,Jquery2.1.0  (其他jquery可能会报错,菜单项不执行 效果如下: 1.在项目中引入框架: <link rel="style ...

  7. PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据（二）

    关于tree菜单生成,参考我的另一篇博文地址tree 菜单 实现功能:点击左侧tree菜单中的table,右侧通过datagrid加载出该表对用的所有数据 难点:获取该表的所有列名,动态生成datag ...

  8. 使用Axure设计基于中继器的左侧导航菜单

    实现效果: 使用组件: 设计详解: 一.设计外层菜单 1.拖一个矩形,在属性栏中命名cd1,设置宽高为200*45,背景色#393D49,双击设置按钮名称为“默认展开”,字体大小16,字体颜色#C2C ...

  9. SJW-遍历我的账户左侧导航页面（句柄切换）

    页面信息类似如下: 定位页面元素: import time from selenium import webdriver # import os #A #username = "182007 ...

随机推荐

  1. JavaScript 关于金额、数字验证的正则表达式

    JavaScript 关于金额.数字验证的正则表达式 function ismoney(money) { var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^ ...

  2. Comet OJ 夏季欢乐赛 距离产生美

    距离产生美 https://cometoj.com/contest/59/problem/B?problem_id=2680 题目描述 JWJU放暑假了,于是鸡尾酒就和女朋友璇璇一起出去玩.但是外面太 ...

  3. html2canvas@^1.0.0-rc.1

    这个版本的html2canvas是我在npm找到的,有严重问题,如截图后字体变小,解决方法就是官网找个min.js的版本,放到项目中引用就好 https://html2canvas.hertzen.c ...

  4. ESA2GJK1DH1K基础篇: 阿里云物联网平台: 测试MQTT客户端接收云平台的数据

    前言 有时候想想可能直接连接现成的感觉比较方便吧! 这种东西考验的是你底子是否够好,是否有很强的学习能力 因为咱就是看文档,理解文档.用文档. 测这节会感觉:这是啥呀...下一节更精彩,但是必须看这节 ...

  5. 洛谷 P5535 【XR-3】小道消息

    https://www.luogu.com.cn/problem/P5535 伯特兰-切比雪夫定理: 若整数n > 3,则至少存在一个质数p,符合n < p < 2n − 2. 另一 ...

  6. 【BZOJ4722】由乃

    [BZOJ4722]由乃 题面 bzoj 题解 考虑到区间长度为\(14\)时子集个数\(2^{14}>14\times 1000\),由抽屉原理,区间长度最多为\(13\)(长度大于这个值就一 ...

  7. 【LG2567】[SCOI2010]幸运数字

    [LG2567][SCOI2010]幸运数字 题面 洛谷 题目大意: 问你区间\([L,R](1\leq L\leq R\leq 10^{10})\)中有几个数是仅由\(6,8\)组成的数的倍数. 题 ...

  8. react + node + express + ant + mongodb 的简洁兼时尚的博客网站

    前言 此项目是用于构建博客网站的,由三部分组成,包含前台展示.管理后台和后端. 此项目是基于 react + node + express + ant + mongodb 的,项目已经开源,项目地址在 ...

  9. python 之类的继承

    #类的继承 class As1(): def As2(self): print("he11...") class As2(As1): def As2(self): print(&q ...

  10. IDEA调试进入class文件

    今天用IDEA调试时,一直进入class文件,而没有进入java文件. 错误原因 出现这种情况,有可能是Module有多个同名的依赖,调试时程序进入了同名的jar包里面,而不是同名的Module. 如 ...