1.什么是EasyUI
EasyUI是基于jQuery的用户界面插件集合体。
EasyUI的目标就是帮助Web开发者轻松的打造出功能丰富、且美观的UI界面。开发者不需要编写复杂的JavaScript脚本，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
2.EasyUI组成部分
EasyUI下载后解压，其组成部分有：
| 文件/文件夹 | 说明 |
|---|---|
| demo | EasyUI使用示例 |
| demo-mobile | EasyUI Mobile（移动端）使用示例 |
| locale | 国际化支持 |
| plugins | EasyUI使用的插件 |
| src | EasyUI插件的源码 |
| themes | EasyUI主题样式 |
| jquery.easyui.min.js | EasyUI Mobile核心JS文件 |
| jquery.min.js | jQuery文件，EasyUI的依赖 |
3.EasyUI的使用
将解压的EasyUI复制到项目中
引入必要的js和css样式文件
在JSP页面引入EasyUI的js和CSS样式文件，确保该页面可以使用EasyUI提供的特效与样式。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/default/easyui.css">
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/icon.css">
<!-- 引入JQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.easyui.min.js"></script>
<!-- 与js文件隔离，容易解决bug-->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>
注意事项：
（1）jQuery与EasyUI两个js的引入顺序不能搞错，因为EasyUI本就是jQuery下的插件，需要jQuery做基础，因此先引用jQuery的js文件，再引用EasyUI的js文件。
Css样式引用代码必须加上：rel=”stylesheet”，否则不会出效果。
Web项目前端js、css文件定位
以 “/” 开头的为绝对路径，资源文件是定位到:8080/后面的。但是这样定位很提示404错误，系统找不到资源文件，必须加上完整项目名才能正确定位，如：:8080/项目名/资源文件路径。获取项目名使用 ${pageContext.request.contextPath}
资源文件：img、css、js等等资料文件。
完整写法：${pageContext.request.contextPath}/资源文件路径，定位到:8080/后面。
//错误案例：
<script type="text/javascript" src="/js/jquery.min.js"></script>
//输出结果：提示找不到资源文件路径，404错误！缺少项目名定位
GET http://localhost:8080/js/jquery.min.js 404 ()
//正确案例：
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
相对定位
不以“/”开头，表示相对定位。
//相对自己
<script type="text/javascript" src="js/jquery.min.js"></script>
//相对base标签的href属性（推荐）
<base href="${pageContext.request.contextPath}" />
<script type="text/javascript" src="js/jquery.min.js"></script>
//查看页面源代码结果
<base href="/EasyUi/">
<script type="text/javascript" src="js/jquery.min.js"></script>
防止页面缓存
在间添加如下代码，防止页面缓存。
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
Layout 布局组件
通过布局组件可以将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">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>
<title>EasyUi</title>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false"
style="height: 60px; background: #B3DFDA; padding: 10px">north
region</div>
<div data-options="region:'west',split:true,title:'West'"
style="width: 150px; padding: 10px;">
后台管理界面的菜单
<ul id="tt"></ul>
</div>
<div
data-options="region:'east',split:true,collapsed:true,title:'East'"
style="width: 100px; padding: 10px;">east region</div>
<div data-options="region:'south',border:false"
style="height: 50px; background: #A9FACD; padding: 10px;">south
region</div>
<div data-options="region:'center',title:'Center'">
<div id="menuTabs" class="easyui-tabs" style="">
<div title="Tab1" style="padding: 20px; display: none;">欢迎使用 </div>
</div>
</div>
</body>
</html>
实现功能的MenuDao方法
package com.xzy.dao;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.xzy.entity.TreeNode;
import com.xzy.util.JsonBaseDao;
import com.xzy.util.JsonUtils;
import com.xzy.util.PageBean;
import com.xzy.util.StringUtils;
public class MenuDao extends JsonBaseDao {
/**
*
* @param map
* @param pageBean
* @return
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
public List<TreeNode> list(Map<String, String[]> map, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException {
List<Map<String, Object>> listMenu = this.listMenu(map, pageBean);
List<TreeNode> treeNodeList = new ArrayList<>();
menu2TreeNodeList(listMenu, treeNodeList);
return treeNodeList;
}
/**
* 查询menu表的数据
* @param map
* @param pageBean
* @return
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
public List<Map<String, Object>> listMenu(Map<String, String[]> map, PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException {
String sql = "select * from t_easyui_menu where true ";
String id = JsonUtils.getParamVal(map, "id");
if (StringUtils.isNotBlank(id)) {
sql = sql + " and parentid = " + id;
} else {
sql = sql + " and parentid = -1";
}
return super.executeQuery(sql, pageBean);
}
/**
* 混合数组集合方法
* [{Menuid:1....[]},{Menuid:1....[]}]
* -->[{id:1....[]},{id:1....[]}]
* menu表的数据不符合easyui树形展示的数据格式
* 需要转换成easyui所能识别的数据格式
* @param map
* @param treeNode
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
private void menu2TreeNode(Map<String, Object> map, TreeNode treeNode) throws InstantiationException, IllegalAccessException, SQLException {
treeNode.setId(map.get("Menuid").toString());
treeNode.setText(map.get("Menuname").toString());
treeNode.setAttributes(map);
// treeNode.setChildren(children);
Map<String, String[]> jspMap = new HashMap<>();
jspMap.put("id", new String[] {treeNode.getId()});
List<Map<String,Object>> listMenu = this.listMenu(jspMap, null);
List<TreeNode> treeNodeList = new ArrayList<>();
menu2TreeNodeList(listMenu, treeNodeList);
treeNode.setChildren(treeNodeList);
}
/**
*
* @param mapList
* @param treeNodeList
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
*/
private void menu2TreeNodeList(List<Map<String, Object>> mapList, List<TreeNode> treeNodeList) throws InstantiationException, IllegalAccessException, SQLException {
TreeNode treeNode = null;
for (Map<String, Object> map : mapList) {
treeNode = new TreeNode();
menu2TreeNode(map, treeNode);
treeNodeList.add(treeNode);
}
}
}
EasyUI官网及下载地址
http://www.jeasyui.net/（中文网）
http://www.jeasyui.com/（英文版）
EasyUI官方下载地址：http://www.jeasyui.com/download/index.php
EasyUI分两个版本：GPL版（开源） 和 商业版
GPL版是免费的，但需要开放源代码。
商业版是需要收费的。
常用属性、事件、方法
每个节点具备的属性（返回的JSON数据与下列属性要对应）
| Node | 节点属性 说明 |
|---|---|
| id | 节点ID，对加载远程数据很重要。 |
| text | 显示节点文本。 |
| state | 节点状态，‘open’ 或 ‘closed’，默认：‘open’。如果为’closed’的时候，将不自动展开该节点。 |
| checked | 表示该节点是否被选中。 |
| attributes | 被添加到节点的自定义属性。 |
| children | 一个节点数组声明了若干节点。 |
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
Tabs 选项卡组件
用途：主要用于不同页面的内容切换，每个Tab页面展示一个不同功能页面；
注意：选项卡组件是个容器，容器中包含了各个子选项卡，子选项卡的title是非常重要的。
常用属性、事件、方法
选项卡面板属性：
Id、title、content、href、cache、iconCls、width、height、collapsible、closable、selected、disabled
选项卡属性：
Width、height、fit、border、tools、toolPosition、tabPosition、tabWidth、tabHeight、selected、showHeader、justified、narrow、pill
选项卡事件：
onLoad、onSelect、onUnselect、onClose、onAdd
选项卡方法：
options、tabs、resize、add、close、getTab、getTabindex、getSelected、select、showHeader、hideHeader、showTool、hideTool、exists
动态添加选项
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
动态加载
实现在Tree中点击节点，打开相应的页面。这里需要title和url两个重要的参数。
index.js文件
添加时可以使用调用其它的页面
var contents =’<iframe scrolling=“no” frameborder=“0” src="’+ url +’" width=“99%”
$(function(){
$('#tt').tree({
url:'menuAction.action?methodName=treeMenu',
onClick:function(node){
var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
if($('#menuTabs').tabs('exists',node.text)){
$('#menuTabs').tabs('select',node.text);
} else{
$('#menuTabs').tabs('add',{
title:node.text,
content: content,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
}
});
})
//注：在动态加载Url页面时，请注意JSP页面中不要包括body/html/head/title/meta等标签
Message消息窗口
Message：消息窗口提供了不同的消息框风格，包含alert(警告框)，confirm(确认框)， prompt(提示框)， progress(进度框)等；
警告框:
$.messager.alert('警告','警告消息');
确认框:
$.messager.confirm('确认对话框标题', '您确认想要删除记录吗？', function(r){
if(r){
alert('确认删除');
}
});
提示框：
$.messager.prompt('提示信息标题', '请输入你的姓名：', function(r){
if(r){
alert('你的姓名是：' + r);
}
});
今天的内容稍微到这~~~~
3112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
