Layout+Accordion实现后台管理界面

最新推荐文章于 2023-08-19 11:41:38 发布

技术路上的一个小学生

最新推荐文章于 2023-08-19 11:41:38 发布

阅读量264

点赞数

分类专栏： Jquery EasyUI

本文链接：https://blog.csdn.net/qq_40805758/article/details/79315844

版权

Jquery EasyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

采用jsp+servlet+maven实现

效果图:

pom.xml

<dependencies>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>4.0.0</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>1.2.44</version>
		</dependency>

</dependencies>

jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 导入皮肤样式 -->
<link href="jquery-easyui-1.5.2/themes/bootstrap/easyui.css"
	rel="stylesheet" type="text/css" />
<!-- 导入图标样式 -->
<link href="jquery-easyui-1.5.2/themes/icon.css" rel="stylesheet"
	type="text/css" />
<!-- 导入jquery核心文件 -->
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>
<!-- 导入easyui核心文件 -->
<script type="text/javascript"
	src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<!-- 导入easyUI语言文件 -->
<script type="text/javascript"
	src="jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">
<!--初始化手风琴菜单栏-->
	$(function() {
		<!--ajax提交获取数据-->
		$.ajax({
			type : "POST",
			url : "getMenu.do",
			dataType : "json",
			success : function(data) {
				$(data).each(function(index, item) {
					<!--给手风琴加菜单项-->
					$('#menu').accordion('add', {
						//菜单名称
						title : item.text,
						//菜单图标
						iconCls : item.icon,
						content : '子菜单',
						//默认选中第一个
						selected : index == 0 ? true : false
					});
				});
			}
		});
	});
</script>

</head>
<!-- 后台布局 -->
<body class="easyui-layout">
	<div data-options="region:'north',split:true" style="height: 100px;">
		<h1>easyui后台管理界面</h1>
	</div>
	<div data-options="region:'west',title:'菜单栏',split:true"
		style="width: 200px;">
		<!-- 加入手风琴选项卡 -->
		<!-- data-options="fit:true"   分类容器大小将自适应父容器 -->
		<div id="menu" class="easyui-accordion" data-options="fit:true"></div>
	</div>
	<div data-options="region:'center',title:'首页'"
		style="padding: 5px; background: #eee;"></div>
</body>
</html>

servlet:

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.zking.entity.Menu;

//servlet 注解标签   可以去除web.xml中servlet的配置信息
@WebServlet(value = "/getMenu.do")
public class MenuServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		// 固定返回的死数据 这里可以通过dao包来获取菜单的数据
		List<Menu> menuList = new ArrayList<Menu>();
		for (int i = 1; i < 6; i++) {
			Menu menu = new Menu();
			menu.setText("菜单" + i);
			menu.setIcon(i % 2 == 0 ? "icon-save" : "icon-add");
			menuList.add(menu);
		}

		// 用fastjson将list对象转换为json格式
		String outStr = JSON.toJSONString(menuList);
		PrintWriter out = response.getWriter();
		out.println(outStr);
		out.flush();
		out.close();
	}

}

欢迎各位大神，指正错误。

技术路上的一个小学生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Layout+Accordion实现后台管理界面

采用jsp+servlet+maven实现效果图:pom.xml&lt;dependencies&gt; &lt;dependency&gt; &lt;groupId&gt;javax.servlet&lt;/groupId&gt; &lt;artifactId&gt;javax.servlet-api&lt;/artifactId&gt; &lt;version&gt;4
复制链接

扫一扫