富有客户端技术之——jQuery EasyUI
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog（网页窗体效果），tabs，tree，DataGrid（强大的数据的绑定和显示控件），ValidateBox（数据验证控件，可以很好的对表单数据进行验证）、window等等。
OK，下面就开始我们的探索之旅…
一、JqueryEasyUI准备
1、下载 jQuery EasyUI 1.2.3
2、将下载包中下列内容拷贝到你项目中
themes文件夹
jquery.easyui.min.js
jquery-1.4.4.min.js
3、在页面中加入js/css文件
二、Dialog（网页窗体效果）
轻松实现在显示页面对话框，可定制工具栏、按钮、对话框内容，足以满足应用的需要，效果如下：
语法格式：
$(‘#dd’).dialog(options);
Options是参数描述，描述形式是{属性名：值, 属性名：值,…},在很多JQuery框架中方法的参数都是这样描述的
主要属性列表：
l title：‘对话框标题’
l minimizable :true|false
l maximizable :true|false
l resizable :true|false
l toolbar :[{…},{…},{…},…] //定义工具栏
l buttons ::[{…},{…},{…},…] //定义对话框右下角的按钮
对于属性有多个值的设置，采用如下形式（同样大多数JQuery框架中也都是这样描述的）：
[
{text:'添加',iconCls:'icon-add',handler:function(){alert('t');}},
{text:'查询',iconCls:'icon-search',handler:function(){alert('t');}
]
说明iconCls设置按钮的图标样式，目前jQuery EasyUI图标有（存放在themes/icons目录）：
对应的样式即 icon-图标文件名
代码实现：
Open.html：
弹框
Open.js:
function Open_Dialog() {
$('#mydialog').show();//首先把隐藏的层显示出来
$('#mydialog').dialog(
{ minimizable: true,
maximizable: true,
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function() {
alert('添加数据')
}
},{
text: '查询',
iconCls: 'icon-search',
handler: function() {
alert('查询数据') }
}],
buttons: [{
text: '关闭 ',
handler: function() {
$('#mydialog').dialog('close');
}
}]
});
}
这样就ok，试一下吧！
三、各种消息框
Js中的alert()、confirm()外观太土气了，现在都是采用弹出层的效果，要与时俱进
使用messager组件可轻松实现
1、 显示消息框
$.messager.alert(title, msg, icon, fn )，效果如下：
2、$.messager.confirm(title, msg, fn )，效果如下：
Messager的这两个方法十分简单,title 设置对话框的标题，msg对话框的内容，icon对话框上的图标类型（取值：error,question,info,warning），fn单击按钮要调用的函数
示例代码：
3、$.messager.show(Options)
比较特殊，是在屏幕的右下角显示消息框，可设置超时时间（the message window will be auto closed when timeout.），常常用来制作及时提醒的效果
Options是参数描述，描述形式是{属性名：值, 属性名：值,…}
主要属性:
Width:窗体宽度
Height:窗体高度
Msg:窗体文本内容
Title:窗体标题
Timeout:设置窗口的多长时间关闭
showType:消息窗口的显示方式：null，slide，fade，show。默认是 slide
示例代码：
function show(){
$.messager.show({
title:'提示信息',
msg:'信息5秒后消失',
showType:'show',
height:300,
width:400,
timeout:5000
});
}
显示 |
四、表单验证
表单验证：一要编写验证规则；二要编写信息显示效果。比较麻烦，占据我们比较多的时间，而JQuery EasyUI提供的验证组件很好的解决这个问题，只需在表单字段上做如下设置：
Class="easyui-validatebox" 设置验证结果的样式
validType=” email” 应用验证规则
required="true" 决定是否必须填写
missingMessage=”Email必须填写” 设置显示信息
invalidMessage=”Email格式无效” 设置显示信息
即可，是不是很容易
不过validType只有email、url、length[m,n]几种验证规则
效果演示：
代码：
五、DataGrid数据列表控件
DataGrid用来做什么的呢？让我们先看看用它实现的效果：
通过DataGrid可以以表格的形式呈现数据，可以实现分页、排序、执行添加、修改、删除数据，为我们提供很多便利，正因为DataGrid的强大，所以使用起来也相当比较复杂，我们先从基本的学起，逐步深入
1、基本属性
Title：DataGrid的标题
Width：宽度
Height：高度
iconCls：DataGrid的图标
2、定义列标题，DataGrid有两种形式的列标题
定义普通列属性
Columns
定义冻结列：被冻结的列将不随着水平滑块的滚动而滚动（类似于Excel效果）
frozenColumns
两种列标题设置列的值是一样的
[{field:'age',title:'年龄',width:50},{field:'grade',title:'班级',width:80},… ]
field:标题名称（与json数据的属性名一致）
title：标题文本
width:宽度
3、绑定数据
url：‘数据源’，要求采用Json格式组织数据
指定json文件
动态产生（稍后讲解）
特定的Json格式数据，要求如下：
{"rows":[
{"id":"1001","name":"Jack","age":18,"grade":"S101"},
{"id":"1002","name":"Peter","age":18,"grade":"S101"},
{"id":"1003","name":"John","age":18,"grade":"S101"} ]
}
说明：rows描述要显示的所有行数据，使用{‘属性名’：‘值’,. ‘属性名’：‘值’,…}描述一条记录，记录之间用’,’分割，注意属性名要与列标题的field属性值一致，这样记录就绑定到DataGrid上了
4：定义工具栏
toolbar
值：[{text:'添加',iconCls:'icon-add'},'-',{text:'删除',iconCls:'icon-remove'}]
这些是DataGrid最核心的属性掌握了这些，我们来做个练习
代码演示:
页面部分：
Js代码：
$(function() {
$('#test').datagrid({
title: 'jQuery EasyUI---DataGrid',
iconCls: 'icon-save',
width: 500,
height: 350,
url: 'datagrid_data.json',
frozenColumns: [[
{ field: 'ck', checkbox: true },
{ title: 'ID', field: 'ID', width: 80, sortable: true }
]],
columns: [
[
{ field: 'name', title: '姓名', width: 120 },
{ field: 'addr', title: '地址', width: 120, sortable: true },
{ field: 'opt', title: '操作', width: 100, align: 'center',
formatter: function(value, rec) {
return '编辑 删除';
}
}
]],
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function() {
alert('添加数据')
} }, '-',
{
text: '保存',
iconCls: 'icon-save',
handler: function() {
alert('保存数据')
} }]
});
});
五、数据分页
DataGrid跟分页相关的属性有主要有三个：
pagination：true 表示使用分页
pageSize：5 设置一页显示多少条记录
pageList：[5,10,20] 设置下拉列表的选项，通过该选项可以重新设置分页尺寸
注意若pagination：true 数据源（json数据）必须设置total属性，通过该属性设置数据的总记录数，这对于分页是必须得
Json数据格式：
{“total”:20,
"rows":[
{"id":"1001","name":"Jack","age":18,"grade":"S101"},
{"id":"1002","name":"Peter","age":18,"grade":"S101"},
{"id":"1003","name":"John","age":18,"grade":"S101"} ]
}
六、使用DataGrid动态显示数据并实现分页
主要三个步骤：
步骤1：设置url: '/demo/ListServlet‘
步骤2：编写后台组件
接受二个参数： page: 页号； rows: 每页记录大小
这两个参数是DataGrid分页导航向目标（url设置的动态页面）传递的数据
提取数据集合(List)
步骤3：转化JSon格式
使用json-lib组件
完整示例代码如下：
页面：
JS代码：
ListServlet代码：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
StudentService ss=new StudentServiceImpl();
String spage=request.getParameter("page");
String srows=request.getParameter("rows");
if(spage==null||spage.equals("")){
spage="1";
}
if(srows==null||srows.equals("")){
srows="5";
}
int page=Integer.parseInt(spage);
int row=Integer.parseInt(srows);
PageMode pm=ss.getStudentList(page, row);
JSONObject jsonobj=new JSONObject();
jsonobj.put("total", pm.getTotalCount());
jsonobj.put("rows", pm.getData());
response.getWriter().print(jsonobj.toString());
}
说明：使用JSObject组件将java数据转为Json格式数据，然后通过Response输出到客户端
JSONObject jsonobj=new JSONObject();//创建JSObject组件
//将要转换的数据放置到jsonobj中
//放置DataGrid分页所需要的total属性其值
jsonobj.put("total", pm.getTotalCount());
//放置DataGrid分页所需要的rows属性及其值
jsonobj.put("rows", pm.getData());
//将存放在jsonobj的数据，转化为JSON格式
jsonobj.toString()
注意：需要向项目中加入如下Jar包
业务层代码（StudentServiceImpl）：
private List
public StudentServiceImpl(){
//可操作数据库，这里在list中组织数据
stuList.add(new Student(1001,"张飞",18,"S2"));
stuList.add(new Student(1002,"刘备",18,"S2"));
stuList.add(new Student(1003,"貂蝉",18,"S2"));
stuList.add(new Student(1004,"关羽",18,"S2"));
stuList.add(new Student(1005,"曹操",18,"S2"));
stuList.add(new Student(1006,"夏侯惇",18,"S2"));
stuList.add(new Student(1007,"周瑜",18,"S2"));
stuList.add(new Student(1008,"孙权",18,"S2"));
stuList.add(new Student(1009,"孙坚",18,"S2"));
stuList.add(new Student(1010,"关平",18,"S2"));
stuList.add(new Student(1011,"Jack",18,"S2"));
stuList.add(new Student(1012,"Jack",18,"S2"));
stuList.add(new Student(1013,"Jack",18,"S2"));
stuList.add(new Student(1014,"Jack",18,"S2"));
stuList.add(new Student(1015,"Jack",18,"S2"));
stuList.add(new Student(1016,"Jack",18,"S2"));
stuList.add(new Student(1017,"Jack",18,"S2"));
stuList.add(new Student(1018,"Jack",18,"S2"));
stuList.add(new Student(1019,"Jack",18,"S2"));
stuList.add(new Student(1020,"Jack",18,"S2"));
}
@Override
public PageMode getStudentList(int pageNo, int pageSize) {
// TODO Auto-generated method stub
PageMode pm=new PageMode();
pm.setTotalCount(20);
int offset=(pageNo-1)*pageSize;
int end=pageNo*pageSize;
for(int i=offset;i pm.getData().add(stuList.get(i)); } return pm; } 实体组件： PageMode： public class PageMode { //封装总记录数 private int totalCount; //封装数据 private List data=new ArrayList(); public int getTotalCount() { return totalCount; } public void setTotalCount(int totalCount) { this.totalCount = totalCount; } public List getData() { return data; } public void setData(List data) { this.data = data; } } Student： public class Student implements java.io.Serializable { private int id; private String name; private int age; private String grade; //省略set/get方法 }