总结了一下这星期所学的课程 EasyUi 觉的在后台管理的时候 有一个界面挺好的
Easyui是基于jQuery的用户界面插件集合;
完整支持HTML5的完美框架;
本博客简述了实现步骤以及完整实现代码 如有问题请微信 :aikele1379
1.百度JQuery EasyUi中文网 下载EasyUI
网址:[http://www.jeasyui.net/download/]
2.主要文件放置路径(可以把下载的文件全部放进去)
3.Layout,手风琴和树 布局效果
效果图
代码实现
(1)首先准备是要准备好的:EasyUi文件放在WebContext下面的res(如果没有请手动创建)文件
(2)引用EasyUi文件
<link rel="stylesheet" type="text/css" href="res/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="res/themes/icon.css">
<link rel="stylesheet" type="text/css" href="res/demo.css">
<script type="text/javascript" src="res/jquery.min.js"></script>
<script type="text/javascript" src="res/jquery.easyui.min.js"></script>
(3)Layout布局搭建
<div style="margin:20px 0;"></div>
<!-- 整个布局 -->
<div class="easyui-layout" style="width:1000px;height:550px;">
<!-- 上边 -->
<div data-options="region:'north'" style="height:100px;background:#B3DFDA" title="电脑配件系统"></div>
<!-- 下边 -->
<div data-options="region:'south',split:true" style="height:100px;background:#A9FACD" title="我是布局的上方哦"></div>
<!-- 右边 -->
<div data-options="region:'east',split:true" title="East" style="width:200px;"></div>
<!-- 左边 -->
<div data-options="region:'west',split:true" title="管理列表" style="width:200px;"></div>
<!-- 中间 -->
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"></div>
</div>
总体布局也算是搭好了 下面就该实现树和手风琴的功能了,不过在这之前 树状结构我在这用的是从数据库获取的信息,通过JSON传递数据到树
数据库:采用通过查询id获取信息 id互相关联. 不多说截图献上,请思考红框内容
查询数据库返回给JSP显示页面
//在此用的Hibernate的sessionFactory.getCurrentSession().createQuery查询方法
@Override
public List<Tree> findTree(int id) {
List<Tree> list=(List<Tree>) sessionFactory.getCurrentSession().createQuery("from Tree where parentid = " + id).list();
return list;
}
Action层获取传值方法
//调用查询方法 返回字符串给Struts2.xml接受
public String jsonTree() {
list = service.findTree(id);
return "jsontree";
}
Struts2.xml action配置文件
<action name="trees" class="computerAction" method="jsonTree">
<result name="jsontree" type="json">
<param name="root">list</param>
</result>
</action>
JSP页面 树 接受并显示实现
此获取数据库实现树代码可以放在Layout布局中的任意一个, 根据需求自行解决
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
上面代码实现 树
下面代码实现 手风琴
<!-- 手风琴样式实现 -->
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="电脑管理" style="padding:10px;">
<ul class="easyui-tree" data-options="url:'trees',method:'get' "></ul>
</div>
<div title="添加电脑配件" style="padding:10px;">
<a href="addComputerParts.jsp">添加电脑配件</a>
</div>
<div title="查看电脑配件" data-options="selected:true" style="padding:10px;">
<a href="findAllComputer">查看电脑配件</a>
</div>
<div title="查看电脑" style="padding:10px">
<a href="selectComputer">查看电脑</a>
</div>
<div title="添加电脑" style="padding:10px">
<a href="selectparts">添加电脑</a>
</div>
</div>
好了到此 整个代码已经简述完了 , 下面JSP代码是EasyUi布局的 Layout 树和手风琴 代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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>EasyUi</title>
<link rel="stylesheet" type="text/css" href="res/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="res/themes/icon.css">
<link rel="stylesheet" type="text/css" href="res/demo.css">
<script type="text/javascript" src="res/jquery.min.js"></script>
<script type="text/javascript" src="res/jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:1000px;height:550px;">
<!-- 上边 -->
<div data-options="region:'north'" style="height:100px;background:#B3DFDA" title="电脑配件系统"></div>
<!-- 下边 -->
<div data-options="region:'south',split:true" style="height:100px;background:#A9FACD" title="我是布局的上方哦"></div>
<!-- 右边 -->
<div data-options="region:'east',split:true" title="East" style="width:200px;">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true,dnd:true"></ul>
</div>
<!-- 左边 -->
<div data-options="region:'west',split:true" title="管理列表" style="width:200px;">
<!-- 手风琴样式实现 -->
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="电脑管理" style="padding:10px;">
<ul class="easyui-tree" data-options="url:'trees',method:'get' "></ul>
</div>
<div title="添加电脑配件" style="padding:10px;">
<a href="addComputerParts.jsp">添加电脑配件</a>
</div>
<div title="查看电脑配件" data-options="selected:true" style="padding:10px;">
<a href="findAllComputer">查看电脑配件</a>
</div>
<div title="查看电脑" style="padding:10px">
<a href="selectComputer">查看电脑</a>
</div>
<div title="添加电脑" style="padding:10px">
<a href="selectparts">添加电脑</a>
</div>
</div>
</div>
<!-- 中间 -->
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
</div>
</div>
</body>
</html>
谢谢!!!