Easyui简介 即 项目演示
1、什么是Easyui
easyui是一款基于jQuery的前端框架，可以使用其中的组件进行布局以及用来做后台的管理界面。
1.2、easyui的不足
现在据了解到有三种UI框架，分别是easyUI、bootstrap、layUI这三种。
不足之处： 从效果来看easyui的界面效果要远远差于bootstrap
跟 layui 比，界面效果也更差
1.3、easyUI带给我们的好处
-
表面上它的效果界面并不是那么好看，但是它也有它的好处，而且easyUI要简单学些，如果学会的easyUI框架，那么上手layUI就会轻松许多
easyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要 对css样式有深入的了解，开发者需要了解的只有一些简单的html标签
easyUI是一种基于jQuery的用户界面插件集合.
easyUI为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyUI你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyUI是个完美支持HTML5网页的完整框架。
easyUI节省了开发产品的时间和规模。
easyUI非常简单，但是功能非常强大
2、Easyui使用介绍
2.1、下载easyui版本
EasyUI官网：
官网：http://www.jeasyui.com.
中文版：http://www.jeasyui.net.
2.2、下载Easyui API 文档
官网英文文档：http://www.jeasyui.com/documentation/index.php.
中文版chm文档下载：http://pan.baidu.com/s/1pL6O7hD.
3、使用步骤(使用开发软件eclipse)
3.1、引入必要的js和css样式文件
- 引入JQuery（jquery.min.js）
- 引入EasyUI（jquery.easyui.min.js）
- 引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js）
- 引入EasyUI的样式文件（/themes/default/easyui.css）
- 引入EasyUI的图标样式文件（/themes/icon.css）
- 将EasyUI文件导入(位置看自己决定)
3.2、导入EasyUI文件（位置自己看着来）
3.3、导入路径（必须正确且路径正确 ！）
图片： 
代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- base标签的href属性里面的内容会自动添加到 在head标签里面的引入的路径前面 -->
<base href="${pageContext.request.contextPath }/static/">
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery-3.3.1.min.js"></script>
<!-- 引入easyui相关文件 -->
<!-- 图标库 -->
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/icon.css">
<!-- 样式文件 -->
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css">
<!-- js文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!-- 动态获取项目名，并保存在request作用域里面 -->
<%
request.setAttribute("ctx", request.getContextPath());
%>
<!-- 从request作用域里面获取项目名，并赋给js变量 -->
<script type="text/javascript">
var ctx = '${ctx}';
</script>
4、使用API文档效果演示
页面效果展示(没有绑定数据库的)：
代码：
<%@ 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>主界面</title>
</head>
<!-- 通过include指令引入公共部分页面的head.jsp -->
<%@ include file="static/common/head.jsp"%>
<script type="text/javascript" src="js/index.js"></script>
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>
</html>
样式在结尾有使用种类总结
接下来是给左侧菜单栏连接–MySQL绑定数据库的步骤
文件位置
主界面代码：
<%@ 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>主界面</title>
</head>
<!-- 通过include指令引入公共部分页面的head.jsp -->
<%@ include file="static/common/head.jsp"%>
<script type="text/javascript" src="js/index.js"></script>
<body class="easyui-layout">
<div data-options="region:'north',title:'网上书城',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'版权链接',split:true" style="height:100px;"></div>
<div data-options="region:'west',title:'菜单管理',split:true" style="width:100px;">
<!-- 左侧菜单绑定 -->
<ul id="menuTree" class="easyui-tree">
</ul>
</div>
</body>
</html>
- 实体类
package com.zking.entity;
import java.util.ArrayList;
import java.util.List;
public class Module {
private Integer id;// 节点 id
private Integer pid;// 节点父 id
private String text;// 节点标题
private String icon;// 节点图标
private String url;// 节点对应的页面地址(只有子节点的这个属性才有值)
private int sort;// 排序
private List<Module> children = new ArrayList<>();// 存放当前节点的子节点集合
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public int getSort() {
return sort;
}
public void setSort(int sort) {
this.sort = sort;
}
public List<Module> getChildren() {
return children;
}
public void setChildren(List<Module> children) {
this.children = children;
}
@Override
public String toString() {
return "Module [id=" + id + ", pid=" + pid + ", text=" + text + ", icon=" + icon + ", url=" + url + ", sort="
+ sort + "]";
}
}
- 获取数据的Dao类
public class ModuleDao implements IModuleDao{
private List<Module> listModule;
private PreparedStatement ps;
private Connection con;
private Module module;
private ResultSet rs;
private String sql;
private int n;
@Override
public List<Module> query(Integer pid) {
try {
listModule = new ArrayList<>();
con = DBAccess.getConnection();
sql = "select id,pid,text,url from t_module where pid = ? order by sort";
ps = con.prepareStatement(sql);
ps.setInt(1, pid);
rs = ps.executeQuery();
while(rs.next()) {
module = new Module();
module.setId(rs.getInt("id"));
module.setPid(rs.getInt("pid"));
module.setText(rs.getString("text"));
module.setUrl(rs.getString("url"));
listModule.add(module);
}
DBAccess.close(con, ps, rs);
} catch (Exception e) {
e.printStackTrace();
}
return listModule;
}
}
- Biz层重要操作！
public class ModuleBiz implements IModuleBiz{
private IModuleDao im = new ModuleDao();
@Override
public List<Module> query(Integer pid) {
// 获取子节点的集合
List<Module> listModule = im.query(pid);
for (Module m : listModule) {
// 如果节点的url属性为空或者空白字符串，该节点就是父节点
if (null == m.getUrl() || "".equals(m.getUrl())) {
// 给这个父节点的 子节点赋值
m.setChildren(query(m.getId())); // 递归 父节点的id就是子节点的pid
}
}
return listModule;
}
}
- js代码
$(function() {
/* 绑定树形菜单绑定数据 */
$('#menuTree').tree({
/* url:数据路径 */
url : ctx+'/moduleServlet',
//tree_data1.json 注意：后台返回到前端的数据必须要是json格式的
/* 给tree节点添加点击事件 */
onClick : function(node) { // node表示每一个节点(即表示父节点,也表示子节点)
// 获取节点的子节点集合
var childern = $("#menuTree").tree("getChildren", node.target);// node.target表示每一个节点对象,这一窜代码的意思就是调用每一个节点对象里面的集合
// 当集合里面有数据的时候未免才进行增加
if (childern <= 0) { // 有子节点才增加选项卡,反之则不增加
// 解决重复选项卡：如果选项卡不存在则添加选项卡
if (!$("#myTab").tabs("exists", node.text)) {
// 当点击左侧菜单节点的时候在右侧内容区域div里面添加选项卡
$('#myTab').tabs('add', {
title : node.text, // 选项卡的标题
content : '<iframe frameborder=0 src='+node.url+' style="width:100%;height:100%" />', // 选项卡的内容
closable : true, // 设置选项卡是否显示关闭按钮,true：显示,false：不显示
});
} else {// 如果当前选中的选项卡存在，那么就切换到当前选中的选项卡
$("#myTab").tabs("select", node.text);
}
}
}
});
})
4.组件
分类：Base（基础）、Layout（布局）、Menu and Button（菜单和按钮）、Form（表单）、Window（窗口）、
DataGrid and Tree（表格和树）、Extension（扩展）
本章节主要讲述以下组件的使用：
1）layout（布局组件）
2）accordion（分类组件）
3）tree（树形组件）
4）tabs（选项卡组件）
5）datagrid和pagination（表格和分页组件）
6）dialog和messager（窗口组件）
7）form（表单组件）
有待完善！！！
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
