一、EasyUI是什么
jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。
二、EasyUI的下载
EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.5.3
下载完成之后,会得到一个 jquery-easyui-1.5.3.zip的文件,解压之后的目录结构,如下图:
三、EasyUI的使用
3.1 引入必要的js和css样式文件
要想在页面中使用EasyUI,那么首先要做的就是在页面中引入必要js和css样式文件,以在jsp文件中使用EasyUI为例:
<!-- 路径要根据自己项目的具体情况来给 -->
<!-- 引入jQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- 引入easyUI-->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
3.2 插件的使用
3.2.1 layout页面布局
代码部分:
<body class="easyui-layout">
<!-- 使用div元素描述每个区域,通过data-options属性 -->
<div style="height: 100px" data-options="region:'north'">北部区域</div>
<div style="width: 200px" data-options="region:'west'">西部区域</div>
<div data-options="region:'center'">中心区域</div>
<div style="width: 100px" data-options="region:'east'">东部区域</div>
<div style="height: 50px" data-options="region:'south'">南部区域</div>
</body>
效果部分:
3.2.2 accordion折叠面板
代码部分:
<!-- 制作accordion折叠面板
fit:true----自适应(填充父容器)
iconCls:'icon-cut' ---- 给面板一加上一个小剪刀图标的样式 -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 使用子div表示每个面板 -->
<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
<div title="面板二">2222</div>
<div title="面板三">3333</div>
</div>
效果部分:
3.2.3 tabs选项卡面板
代码部分:
<!-- 制作一个tabs选项卡面板
closable:true --- 表示面板是可关闭的,这样面板二右边会出现一个× -->
<div class="easyui-tabs" data-options="fit:true">
<!-- 使用子div表示每个面板 -->
<div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
<div data-options="closable:true" title="面板二">2222</div>
<div title="面板三">3333</div>
</div>
效果部分:
3.2.4 动态添加选项卡
代码部分:
<!-- 需要一个linkbutton按钮的存在 -->
<a id="but1" class="easyui-linkbutton">添加一个选项卡</a>
<script type="text/javascript">
$(function(){
//页面加载完成后,为上面的按钮绑定事件
$("#but1").click(function(){
//判断“系统管理”选项卡是否存在
var e = $("#mytabs").tabs("exists","系统管理");
if(e){
//已经存在,选中就可以
$("#mytabs").tabs("select","系统管理");
}else{
//调用tabs对象的add方法动态添加一个选项卡
$("#mytabs").tabs("add",{
title:'系统管理',
iconCls:'icon-edit',
closable:true,
content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
});
}
});
});
</script>
效果部分:
3.3 ztree插件的使用
3.3.1 使用标准json来构造ztree
代码部分:
<!-- 展示ztree效果 :使用标准json数据构造ztree-->
<ul id="ztree1" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后,执行这段代码----动态创建ztree
var setting = {};
//构造节点数据
var zNodes = [
{"name":"节点一","children":[
{"name":"节点一_1"},
{"name":"节点一_2"}
]},//每个json对象表示一个节点数据
{"name":"节点二"},
{"name":"节点三"}
];
//调用API初始化ztree
$.fn.zTree.init($("#ztree1"), setting, zNodes);
});
</script>
效果部分:
3.3.2 使用简单json来构造ztree
代码部分:
<!-- 展示ztree效果 :使用简单json数据构造ztree-->
<ul id="ztree2" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后,执行这段代码----动态创建ztree
var setting2 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
}
};
//构造节点数据,通过id,pId来进行处理父子关系
var zNodes2 = [
{"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据
{"id":"2","pId":"3","name":"节点二"},
{"id":"3","pId":"0","name":"节点三"}
];
//调用API初始化ztree
$.fn.zTree.init($("#ztree2"), setting2, zNodes2);
});
</script>
效果部分:
3.3.3 发送ajax请求json数据构造ztree
<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后,执行这段代码----动态创建ztree
var setting3 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
}
};
//发送ajax请求,获取json数据
//jQuery提供 的ajax方法:ajax、post、get、load、getJSON、getScript
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//调用API初始化ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
},'json');
});
</script>
3.3.4 使用ztree提供的API为节点绑定事件
<!-- 展示ztree效果 :发送ajax请求获取简单json数据构造ztree-->
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后,执行这段代码----动态创建ztree
var setting3 = {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
},
callback: {
//为ztree节点绑定单击事件
onClick: function(event, treeId, treeNode){
if(treeNode.page != undefined){
//判断选项卡是否已经存在
var e = $("#mytabs").tabs("exists",treeNode.name);
if(e){
//已经存在,选中
$("#mytabs").tabs("select",treeNode.name);
}else{
//动态添加一个选项卡
$("#mytabs").tabs("add",{
title:treeNode.name,
closable:true,
content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
});
}
}
}
}
};
//发送ajax请求,获取json数据
//jQuery提供 的ajax方法:ajax、post、get、load、getJSON、getScript
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//调用API初始化ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
},'json');
});
</script>
3.4 messager消息框
1、alert(title,msg,icon,fn) 提示框
title:代表标题
msg:提示框的内容
icon:图标样式 question,warning,info,error
fn:回调函数,一般不使用
2、confirm(title,msg,fn) 确认框
title:代表标题
msg:提示框的内容
fn(r):回调函数,点击确认,r为true,取消r为false
* 如果这里显示不是确认,是ok,需要在页面中引入easyui-lang-zh_CN.js,才能看到下图一样的效果 *
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>
3、show(showType,showSpeed,width,height,title,msg,style,timeout) 欢迎框
showType: 定义了如何将显示消息窗口。可用值: null,slide,fade,show. 默认为slide。
showSpeed: 定义了时间在毫秒完成显示消息窗口。默认值为600。
width: 定义消息窗口的宽度。默认值为250。
height: 定义消息窗口的高度。默认值为100。
title: 标题文本显示在标题面板。
msg: 消息文本显示。
style: 定义了自定义dpecification风格为消息窗口。
timeout: 如果定义为0,消息窗口不会关闭,除非用
3.5 menubutton菜单按钮
代码部分:
<!-- 制作菜单
iconCls:图标的样式
menu:下拉菜单
class:easyui-menubutton
-->
<a data-options="iconCls:'icon-help',menu:'#mm'" class="easyui-menubutton">控制面板</a>
<!-- 使用div元素制作下拉菜单 -->
<div id="mm">
<div onclick="alert(1111)" data-options="iconCls:'icon-edit'">修改密码</div>
<div>联系管理员</div>
<!-- menu-sep 分割线的样式 -->
<div class="menu-sep"></div>
<div>退出系统</div>
</div>
效果部分:
3.5 validatebox 验证框
3.5.1 普通校验
1、非空校验required=”required”
2、使用validType指定
email: 正则表达式匹配电子邮件规则。
url: 正则表达式匹配的URL规则。
length[0,100]: 在0和100字符允许。
remote[‘http://…/action.do‘,’paramName’]: 发送ajax请求做验证值,返回“true”当成功。
代码部分:
<table cellpadding=3>
<tr>
<td>新密码:</td>
<!-- 通过在input标签上添加vailType属性,值是校验的方式,
class里面加上easyui-vaildatabox
整个校验由easyui来完成,我们只需要设置属性即可 -->
<td><input required="true" data-options="validType:'length[4,6]'" id="txtNewPass" type="Password" class="txt01 easyui-validatebox" /></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input required="true" data-options="validType:'length[4,6]'" id="txtRePass" type="Password" class="txt01 easyui-validatebox" /></td>
</tr>
</table>
3.5.2 扩展校验
<script type="text/javascript">
$(function(){
var reg = /^1[3|4|5|7|8][0-9]{9}$/;
//扩展手机号校验规则
$.extend($.fn.validatebox.defaults.rules, {
telephone: {
validator: function(value,param){
return reg.test(value);
},
message: '手机号输入有误!'
}
});
});
</script>
<!-- 添加validtype属性为telephone就会进行手机号校验 -->
<input class="easyui-validatebox" type="text" data-options="validtype:'telephone'" name="telephone" required="true"/>
3.6 datagrid 数据表格
3.6.1 将静态页面渲染成1datagrid样式
<!-- 方式一:将静态HTML渲染为datagrid样式 -->
<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>小明</td>
<td>90</td>
</tr>
<tr>
<td>002</td>
<td>老王</td>
<td>3</td>
</tr>
</tbody>
</table>
3.6.2 发送ajax请求获取json数据创建datagrid
json文件:
页面:
<!-- 方式二:发送ajax请求获取json数据创建datagrid -->
<table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'"
class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年龄</th>
</tr>
</thead>
</table>
3.6.3 使用easyUI提供的API创建datagrid
<!-- 方式三:使用easyUI提供的API创建datagrid
这种方式页面加载完成数据会自动填充
-->
<table id="mytable"></table>
<script type="text/javascript">
$(function(){
//页面加载完成后,创建数据表格datagrid
$("#mytable").datagrid({
//定义标题行所有的列
columns:[[
{title:'编号',field:'id',checkbox:true},
{title:'姓名',field:'name'},
{title:'年龄',field:'age'},
{title:'地址',field:'address'}
]],
//指定数据表格发送ajax请求的地址
url:'${pageContext.request.contextPath }/json/datagrid_data.json',
rownumbers:true,
singleSelect:true,
//定义工具栏
toolbar:[
{text:'添加',iconCls:'icon-add',
//为按钮绑定单击事件
handler:function(){
alert('add...');
}
},
{text:'删除',iconCls:'icon-remove'},
{text:'修改',iconCls:'icon-edit'},
{text:'查询',iconCls:'icon-search'}
],
//是否显示分页条
pagination:false
});
});
</script>
如果使用了分页条,服务器响应的json格式 :
total:总页数
rows:当前页显示的数据
{
"total":123,
"rows":[
{"id":"001","name":"小红","age":"23","address":"北京"},
{"id":"002","name":"小明","age":"32","address":"上海"},
{"id":"003","name":"小强","age":"56","address":"深圳"},
{"id":"004","name":"小王","age":"23","address":"广州"}
]
}
页面效果:
3.7 combobox 下拉列表框
json文件:
[
{"id":"100","name":"小明"},
{"id":"200","name":"小红"},
{"id":"300","name":"小黑"}
]
页面代码:
<!--
valueField:选中后提交的属性
textField:页面展示的属性 -->
<input data-options="url:'${pageContext.request.contextPath }/json/combobox_data.json',
valueField:'id',
textField:'name'"
class="easyui-combobox">
页面效果: