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

2024-10-27 14:55:35

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" rel="external nofollow" rel="external nofollow" />
  <link rel="stylesheet" type="text/css" href="/resources/easyui/themes/default/easyui.css" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="/resources/easyui/themes/icon.css" rel="external nofollow" rel="external nofollow" >
  <%--以下三个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" rel="external nofollow" rel="external nofollow" />
  <link rel="stylesheet" type="text/css" href="/resources/easyui/themes/default/easyui.css" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="/resources/easyui/themes/icon.css" rel="external nofollow" rel="external nofollow" >
  <%--以下三个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实现页面左侧导航菜单功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项

在使用easyUI做前端样式展示时,遇到了文件上传的问题,而且是在弹出层中提交表单,想做到不刷新页面,所以选择了使用ajaxFileUpload插件.提交表单时一直发现后台接收不到文件,后检查发现,原来是文件的id不对. 文件上传框我们定义如下: <input class="easyui-filebox" id="image" name="image" data-options="label:'产品图片:',buttonText:
SpringMVC+ZTree实现树形菜单权限配置的方法

计划在开源项目里加入权限配置的功能,打算加入zTree实现树形结构. Team的Github开源项目链接:https://github.com/u014427391/jeeplatform欢迎star(收藏) zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree下载链接:http://www.treejs.cn/v3/main.php#_zTreeInfo 角色信息实体类: package org.
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 re
vue+iview框架实现左侧动态菜单功能的示例代码

最近在使用vue-cli3配合iview框架搭建新的项目中用到了iview中的menu菜单,按照官网写法固定不太好,因为一般项目都是从后端动态获取菜单列表,所以我们需要将官网代码稍作修改,代码如下: 注意事项: [1]菜单高亮部分动态绑定路由跳转的页面 Menu组件中有一个active-name反映的是当前高亮区域,因此可以动态的绑定active-name来实现高亮显示.前提是需要将MenuItem绑定的name也设置成页面路由的name [2]动态获取菜单数据,需要更新菜单 this.$nex
WordPress中制作导航菜单的PHP核心方法讲解

WordPress 3.0 引入导航菜单功能, 让页面的导航和链接的管理变得简单易用. WP 向用户提供了菜单管理页面和多种调用方法, 我们先来看一下一般WordPress 的导航菜单都具有哪些功能. 管理菜单页面页面路径: Appearance > Menus 由从界面来看, 能够创建多个菜单, 并且可以向菜单中添加自定义链接, 页面链接和分类链接. 但有一点需要注意, 如果将页面链接和分类链接加入, 被带入菜单的仅是链接, 而不是页面和分类本身, 也就是说, 子页面和子分类不会成为菜单的一
ElementUI 复杂顶部和左侧导航栏实现示例

描述:如图项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { topNavState: 'home', leftNavState: 'home' } export default new Vuex.Store({ state }) App.vue内容: <template> <div id="app&qu
Android界面设计(APP设计趋势左侧隐藏菜单右边显示content)

相关文章android popwindow实现左侧弹出菜单层http://www.jb51.net/article/33533.htm 移动App设计的13大精髓http://www.jb51.net/article/33534.htm 这文章讲述了2013年未来的移动APP设计趋势,感觉挺有道理的.wp8的平面界面设计已经取得很大的成功,很多应用也都是采取相同的设计如zaker,还有类似本文要展示的左侧导航菜单右边显示主要内容的设计,通过menu菜单或者左右拖动可以弹出左侧导航菜单,国内的应用
Vue mock.js模拟数据实现首页导航与左侧菜单功能

目录一.mock.js的使用 mock.js的使用步骤 1.安装mock依赖 2.添加开发环境及生产环境的配置 3.引入到main.js 二.前台主页面的搭建 2.1 准备相关组件 2.2 配置路由与组件的关系 2.3 导入图片 2.4 测试三.左侧菜单的收缩功能 3.1 定义一个总线 3.2 改变收缩图标的样式四.退出功能 4.1 添加点击方法 4.2 测试一.mock.js的使用 mock.js的使用步骤 ① 下载依赖 npm install mock -d(开发环境使用) ② 引入
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)

1.wxml代码: <view class="page"> <import src="../../components/catering-item/catering-item.wxml" />  <view class='under_line'></view> <view class="body"> <view style='float: l
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)

本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标MUI的off canvas效果点击列表 -- 右侧展示页面不动,左侧导航滑动 -- 点击右侧遮罩层或者左侧选项 -- 左侧还原,右侧去掉遮罩层实现方案2:左右分上下两层,左侧滑动,右侧不动 WXML <view class="page"> <view class="page-top {{open ? 'page-top-show' : ''}}">
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)

本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭实现方案1:左侧菜单和右侧展示页面分为上下两层 wxml <view class="page"> <----下层左侧导航---> <view class="page-bottom"> <view class="pag
在vue中实现某一些路由页面隐藏导航栏的功能操作

为了将导航栏显示在每一个页面中,可以将导航栏与<router-view>放在同一级显示,如下: <header> ... </header> <router-view></router-view> 但是,在某些时候,我们需要隐藏导航栏显示,比如登录界面,为了实现导航栏的隐藏,可以使用如下代码: <header v-show="$route.name!=='login'"> ... </header> &

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

相关推荐

随机推荐