Easyui简介、使用介绍 即项目演
Easyui简介 即 项目演示
1、什么是Easyui1.2、easyui的不足1.3、easyUI带给我们的好处
2、Easyui使用介绍2.1、下载easyui版本2.2、下载Easyui API 文档
3、使用步骤(使用开发软件eclipse)3.1、引入必要的js和css样式文件3.2、导入EasyUI文件（位置自己看着来）在这里插入图片描述3.3、导入路径（**必须正确且路径正确 ！**）
4、使用API文档效果演示
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"%>
<%
request.setAttribute("ctx", request.getContextPath());
%>
4、使用API文档效果演示
页面效果展示(没有绑定数据库的)：
代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="static/common/head.jsp"%>
样式在结尾有使用种类总结
接下来是给左侧菜单栏连接–MySQL绑定数据库的步骤
文件位置
主界面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="static/common/head.jsp"%>
实体类
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
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
return children;
}
public void setChildren(List
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
private PreparedStatement ps;
private Connection con;
private Module module;
private ResultSet rs;
private String sql;
private int n;
@Override
public List
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
// 获取子节点的集合
List
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 : '', // 选项卡的内容
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（表单组件）
有待完善！！！