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. JS里==和===区别

    面试常问的一个基础问题 == 和 ===区别是什么? 这里简单描述下 "==="叫做严格运算符,"=="叫做相等运算符 而且 == 会对数据做隐式转换,而=== ...

  2. Linux-grep,awk,sed

    grep 参考1:https://www.cnblogs.com/ITtangtang/p/3950497.html sed 参考:https://www.cnblogs.com/wangqiguo/ ...

  3. 终极 Shell——ZSH

    https://zhuanlan.zhihu.com/p/19556676 在开始今天的 MacTalk 之前,先问两个问题吧: 1.相对于其他系统,Mac 的主要优势是什么?2.你们平时用哪种 Sh ...

  4. Rotor里的异常处理

    我看到了一些关于Rotor(和CLR)中使用的异常处理机制的问题.下面是关于Rotor异常处理的另一个注意事项列表.目的是帮助Rotor开发人员调试和理解CLR中的异常. 异常生成和抛出 此步骤在很大 ...

  5. django -- web框架的本质

    web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 下面代码是一个简单的socket服 ...

  6. 【可持久化线段树】【P5826】【模板】子序列自动机

    [可持久化线段树][P5826][模板]子序列自动机 Description 给定一个序列 \(A\),有 \(q\) 次询问,每次询问一个序列 \(B\) 是不是 \(A\) 的子序列 Limita ...

  7. PATA1005Spell It Right

    考虑输入为0的特殊情况 参考代码: #define _CRT_SECURE_NO_WARNINGS #include<cstdio> #include<cstring> #in ...

  8. Ajax运用与分页

    目录 django与ajax的分页处理 ajax + sweetAlert 实现再次确认: 批量数据插入 分页: django与ajax的分页处理 ajax + sweetAlert 实现再次确认: ...

  9. C语言实现Linux之ls

    ls命令用来显示目标列表. 常用参数: -l    :以长格式显示目录下的内容列表.输出信息从左向右依次包括文件名,文件类型,权限模式,硬连接数,所有者.组.文件大小和文件的最后修改时间等: -a   ...

  10. Generator生成器函数执行过程的理解

    一个最基本的Generator函数格式如下,函数体内部要使用yield修饰符则必须在函数名前加上*号 ; function *testYield(x){ console.log('before yie ...