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. xadmin引入django-ckeditor富文本编辑器

    一.安装: pip install django-ckeditor 安装django-ckeditor库 https://github.com/django-ckeditor/django-ckedi ...

  2. 如何使用和关闭onbeforeunload 默认的浏览器弹窗事件

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定.区别在于o ...

  3. 201671010449 杨天超 实验十四 团队项目评审&课程学习总结

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 作业学习目标 1.掌握软件评审流程及内容 2.个人总结 实验一问题解答 实验一问题链接:https://ww ...

  4. [codevs3044]矩形面积求并

    题目描述 Description 输入n个矩形,求他们总共占地面积(也就是求一下面积的并) 输入描述 Input Description 可能有多组数据,读到n=0为止(不超过15组) 每组数据第一行 ...

  5. ANSI Common lisp1

    lisp(本文专指common lisp)语言简介 lisp程序员能够并且经常编写一些能够写程序的程序,对于程序生成程序的这种特性, 因为lisp是主流语言中唯一一个提供一些方便的抽象来让你完成这个任 ...

  6. php+ajax无刷新分页原生ajax实现分页最简单完整实例-完整代码，

    展示页面:index.html <html><script> function ajax_show() { // 获取当前页 var page =1; var xhr = ne ...

  7. EasyUI前后端分离

    陈旧的开发模式 美工(ui工程师:出一个项目模型) java工程师:将原有的html转成jsp,动态展示数据 缺点: 客户需要调节前端的展示效果 解决:由美工去重新排版,重新选色.Vs前后端分离 美工 ...

  8. pytest--命令行常用参数

    前戏 在python中,大家听到最多的单元测试框架就是unittest和pytest了,而pytest有很多的功能,甩unittest几条街 我们在使用pytest时,要遵循pytest的命名规则: ...

  9. loj2245 [NOI2014]魔法森林 LCT

    [NOI2014]魔法森林 链接 loj 思路 a排序,b做动态最小生成树. 把边拆成点就可以了. uoj98.也许lct复杂度写假了..越卡常,越慢 代码 #include <bits/std ...

  10. 洛谷 P1965 转圈游戏

    洛谷 P1965 转圈游戏 传送门 思路 每一轮第 0 号位置上的小伙伴顺时针走到第 m 号位置,第 1 号位置小伙伴走到第 m+1 号位置,--,依此类推,第n − m号位置上的小伙伴走到第 0 号 ...