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. PAT 乙级 1047.编程团体赛 C++/Java

    题目来源 编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜. 现给定所有队员的比赛成绩,请你编写程序找出冠军队. 输入格式: 输入第一行 ...

  2. D. Maxim and Array

    https://www.cnblogs.com/qscqesze/p/5925893.html  原博客 http://codeforces.com/group/1EzrFFyOc0/contest/ ...

  3. JMeter【第五篇】关联：5种方法

    前几天在Q群里看到群友发的最近10年性能测试工具使用率的统计,最近的2018年,jmeter+loadrunner占了93%的使用率,说明这两个是主流,其中,jmeter的使用率逐年提升,现在已经超过 ...

  4. el获取对象属性大小写问题

    当el表达式首字母大写,会判断第二个字母大小写,小写,抛异常:大写,则直接拼接get,形成getter方法 当el表达式首字母小写,会判断第二个字母大小写,大写,必须第一个字母大写:否则无法获取值 e ...

  5. LA 4998简单加密游戏 —— 自相似性质&&不动点迭代

    题意 输入正整数 $K_1$($K_1 \leq 50000$),找一个12为正整数 $K_2$(不能含有前导0)使得 ${K_1}^{K_2} \equiv K_2(mod \ {10}^{12}) ...

  6. Flask常用路由参数

    Flask中的路由参数: @app.route(‘/’, endpoint=’xx’ , methods=[‘GET’,...]) >endpoint后的名字,用来反向生成url的.后面的名字随 ...

  7. ZROI 暑期高端峰会 A班 Day1 序列数据结构

    FBI Warning:本文包含大量人类的本质之一 CF643G 维护一个序列,可以区间赋值,求区间中出现超过 \(p\%\) 的数. 允许输出不对的数,允许重复输出,但是所有对的数都一定要输出.而且 ...

  8. 原生 JS 实现最简单的图片懒加载

    懒加载 什么是懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多 ...

  9. Comet OJ - Contest #1 C 复读游戏（状态压缩）

    题意 https://www.cometoj.com/contest/35/problem/C?problem_id=1498 思路 这题要用到一种比较小众的状压方法(没见过的话可能一时比较难想到). ...

  10. javaWeb如何转发数据，jsp页面如何接收？

      1.情景展示 现在有一个需求就是:请求达到服务器后,服务器需要将请求的数据传给另一个页面,如何实现? 2.目标分析 通过服务器跳转到页面上,有两种实现方式:一种是转发,一种是重定向. 我们知道转发 ...