SpringMVC+EasyUI实现页面左侧导航菜单

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实现页面左侧导航菜单的更多相关文章

使用 EasyUI 创建左侧导航菜单
使用 JQuery EasyUI 创建左侧导航菜单,菜单的数据由后台服务提供. 效果图 HTML 元素 <div id="menuAccordion"></div ...
jquery仿天猫商城左侧导航菜单
之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...
（转）jquery仿天猫商城左侧导航菜单
原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...
SharePoint 2013技巧分享系列 - 隐藏Blog和Apps左侧导航菜单
企业内部网中,不需要员工创建Blog或者创建,安装SharePoint应用,因此需要在员工个人Web页面需要隐藏Blog或者Apps导航菜单, 其步骤设置如下: 该技巧适合SharePoint 201 ...
JS实现静态html页面左侧导航，右侧连接页面
本人前端小菜,想实现左侧导航固定,右侧链接页面,不想用iframe,请问各位有什么好的建议,最好有个demo,谢谢
基于bootstrap的后台左侧导航菜单和点击二级菜单刷新二级页面时候菜单展开显示当前菜单
本文使用的框架版本为: bootstrap3,Jquery2.1.0 (其他jquery可能会报错,菜单项不执行效果如下: 1.在项目中引入框架: <link rel="style ...
PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据（二）
关于tree菜单生成,参考我的另一篇博文地址tree 菜单实现功能:点击左侧tree菜单中的table,右侧通过datagrid加载出该表对用的所有数据难点:获取该表的所有列名,动态生成datag ...
使用Axure设计基于中继器的左侧导航菜单
实现效果: 使用组件: 设计详解: 一.设计外层菜单 1.拖一个矩形,在属性栏中命名cd1,设置宽高为200*45,背景色#393D49,双击设置按钮名称为“默认展开”,字体大小16,字体颜色#C2C ...
SJW-遍历我的账户左侧导航页面（句柄切换）
页面信息类似如下: 定位页面元素: import time from selenium import webdriver # import os #A #username = "182007 ...

随机推荐

主进程和服务进程通信调用Acrobat.AcroPDDoc时出现的问题
场景以及问题主进程发送命令,服务进程接受到,然后执行转换pdf,调用Acrobat pdfDoc = (Acrobat.CAcroPDDoc)Microsoft.VisualBasic.Intera ...
05-cmake语法-message()
输出错误 message(FATAL_ERROR " FATAL: In-source builds are not allowed. You should create a separat ...
nginx 设置反向代理
一.多个路径指向同一ip的不同服务参考地址:https://www.cnblogs.com/hanmk/p/9289069.html 编辑nginx.conf配置文件,新增加一个server模块,或 ...
emacs第一天
emacsbinw64.sourceforge.net windows的emacs下载地方(绿色软件) 学习快速入门 C-h t 快速入门的帮助文档 C-h 是prefix key 光标移动快捷键 ...
org.springframework.beans.NotWritablePropertyException:Bean property 'xxxService' is not writable or has an invalid setter method.
完整报错提示信息:Caused by: org.springframework.beans.NotWritablePropertyException: Invalid property 'blogDe ...
Python面向对象 | 类属性
property property是一个装饰器函数,可以将一个方法伪装成属性,调用的时候可以不用加().@property被装饰的方法,是不能传参数的,因为它伪装成属性了. 装饰器的使用:在要装饰的函 ...
Mongo DB 下载安装
目录 1.下载MongoDB 2.启动MongoDB 3.添加环境变量,添加启动服务 4.MongoDB操作 1.创建用户以及权限控制: 1.下载MongoDB MongoDB的官网简单下载方法 w ...
vs连接oracle
参考: https://www.cnblogs.com/gguozhenqian/p/4262813.html
CSS 分割线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JAVA JDK安装及path环境变量配置
JDK安装 JVM :JAVA虚拟机 JRE :java运行环境=JVM+核心类库 JDK :JAVA开发工具包=JRE+java开发工具 java开发工具:编译工具(javac.exe) . 运行 ...