easyui菜单 java_SpringMVC+EasyUI实现页面左侧导航菜单功能

迷南。 2022-11-03 10:56 258阅读 0赞

1. 效果图展示

![5f5d5fbae9158537d7dd64ea6d92af3d.png][]

2. 工程目录结构

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

![171519f37f7c81f757982d707f071f7a.png][]

![1df9a0196b3012e51e3937a23beb3d33.png][]

3. 代码

index.jsp

学生成绩管理系统 管理员后台

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"

\},

\]

\}

\]

\};

springmvc.xml配置静态资源

注意:

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

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

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

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

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

总结

以上所述是小编给大家介绍的SpringMVC+EasyUI实现页面左侧导航菜单功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

[5f5d5fbae9158537d7dd64ea6d92af3d.png]: /images/20221024/01f03645b5ed40fbb8c32e6c1993e79f.png
[171519f37f7c81f757982d707f071f7a.png]: /images/20221024/a1919b8bcc644eb3806df2e5cbee2fd2.png
[1df9a0196b3012e51e3937a23beb3d33.png]: /images/20221024/d2de94c0183b4712b2eb54797142632e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，258人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 实现导航菜单

阅读目录 1 css 实现二级导航菜单 html html 附 css 2 css 侧方位导航菜单 3 CSS实现三级导航（模

深藏阁楼爱情的钟/ 2023年10月06日 23:14/ 0 赞/ 27 阅读

相关 easyui树形菜单实现

![815622-20180809134106370-1515825099.png][] ![815622-20180809134229274-654427617.png][

缺乏、安全感/ 2023年06月10日 09:27/ 0 赞/ 27 阅读

相关 Layui实现左侧导航栏菜单可自由折叠

先看Layui官方的后台管理界面，用过的朋友可以知道，左侧的导航栏都是固定的，并不能折叠起来。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZ

Love The Way You Lie/ 2022年11月11日 05:22/ 0 赞/ 838 阅读

相关 easyui菜单 java_SpringMVC+EasyUI实现页面左侧导航菜单功能

1. 效果图展示 ![5f5d5fbae9158537d7dd64ea6d92af3d.png][] 2. 工程目录结构注意: webapp下的resources目录放

迷南。/ 2022年11月03日 10:56/ 0 赞/ 259 阅读

相关利用JQuery实现左侧菜单栏可折叠功能

今天给大家介绍一下左侧菜单栏可折叠功能，在后台管理中左侧菜单折叠功能是特别常见的一个功能，基本不管是什么类型的管理后台都会涉及到这个功能的实现。想学习分布式、微服务、J

你的名字/ 2022年07月16日 09:10/ 0 赞/ 365 阅读

相关 jQuery实现左侧分类菜单

打开京东、淘宝等各大类网站，最常见的就是左侧分类菜单栏了，既然这么常见的功能，那么应该怎么去实现它呢，接下来，我会在js中介绍两种实现方式，一种是引入jQuery的实现方式，一

我会带着你远行/ 2022年07月14日 04:38/ 0 赞/ 264 阅读

相关实现可左右滑动的导航菜单页面

1.wxml页面代码： < view class = "nav-scroll"> < scroll-view class = "scroll-view\_H" sc

系统管理员/ 2022年05月27日 00:53/ 0 赞/ 222 阅读

相关实现导航栏下拉菜单列表页面

1.wxml页面代码：  < view class = "tabTit box tc bg\_f"> < view class = "fle

刺骨的言语ヽ痛彻心扉/ 2022年05月27日 00:53/ 0 赞/ 376 阅读

相关 easyui 手风琴 accordion展示左侧二级菜单写法

废话不多讲，先上一张效果图共同学们参考： ![70][] 当然工作平台一下也有相应的二级菜单，之前使用递归写无限级菜单，因为遇到种种问题搁置了，下一篇小编继续奉上

小灰灰/ 2022年05月24日 06:08/ 0 赞/ 424 阅读

相关左侧分类导航菜单（续）

左侧分类导航菜单，是电商购物导航的最直接的分类形式。 js方面主要以下几点注意 1、事件有mouseover、mouseleave onmouseover 事

爱被打了一巴掌/ 2022年03月27日 01:47/ 0 赞/ 302 阅读