在B/S开发中页面制作涉及HTML、CSS、javascript等技术，我们随掌握相关技术，但实际开发中页面美化特别是样式设计一直困扰着我们。怎样更好、更快的设计美观、专业、时代性的页面呢？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文件
<link rel="stylesheet" type="text/css" href="../common/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="../common/themes/default/easyui.css" />
<script type="text/javascript" src="../common/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../common/jquery.easyui.min.js"></script>
二、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：
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../common/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../common/jquery.easyui.min.js"></script>
<script type="text/javascript" src="open.js"></script>
<span onclick="Open_Dialog()">弹框</span>
<div id="mydialog" style="display:none;padding:5px;width:400px;height:200px;" title="弹框练习">
<!—在此处组织对话框的内容-->
Dialog Content
</div>
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单击按钮要调用的函数
示例代码：
<script>
function alert_info(){
$.messager.alert('消息框','消息','info');
}
function confirm_info(){
$.messager.confirm('确认','要删除吗？',function(ret){
if(ret){
$.messager.alert('消息','已删除');
}
});
}
</script>
<a href="javascript:alert_info();">消息</a><br>
<a href="javascript:confirm_info();">确认</a><br>
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
});
}
<a href="javascript:void(0)" onClick="show()">显示</a> |
四、表单验证
表单验证：一要编写验证规则；二要编写信息显示效果。比较麻烦，占据我们比较多的时间，而JQuery EasyUI提供的验证组件很好的解决这个问题，只需在表单字段上做如下设置：
Class="easyui-validatebox" 设置验证结果的样式
validType=” email” 应用验证规则
required="true" 决定是否必须填写
missingMessage=”Email必须填写” 设置显示信息
invalidMessage=”Email格式无效” 设置显示信息
即可，是不是很容易
不过validType只有email、url、length[m,n]几种验证规则
效果演示：
代码：
<tr>
<td align="right">姓名:</td>
<td><input class="easyui-validatebox" required="true" validType="length[2,6]" missingMessage="姓名必须填写" invalidMessage="姓名必须是2到6位"></td>
</tr>
<tr>
<td align="right">电子邮件:</td>
<td><input class="easyui-validatebox" required="true" validType="email"></td>
</tr>
<tr>
<td align="right">URL:</td>
<td><input class="easyui-validatebox" required="true" validType="url"></td>
</tr>
五、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最核心的属性掌握了这些，我们来做个练习
代码演示:
页面部分：
<body>
<table id="test"></table>
</body>
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 '<span style="color:red">编辑 删除</span>';
}
}
]],
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组件
完整示例代码如下：
页面：
<body>
<table id="student"></table>
</body>
JS代码：
<script>
$(function(){
$("#student").datagrid(
{
title:'学生信息',
width:500,
height:400,
iconCls:'icon-save',
url:'/querydemo/ListServlet',
idField:"id",
singleSelect:false,
frozenColumns:[[
{field:'ck',checkbox:true},
{field:'id',title:'编号',width:50},
{field:'name',title:'姓名',width:100}
]],
columns:[
[
{field:'age',title:'年龄',width:50},
{field:'grade',title:'班级',width:80}
],
],
toolbar:[
{text:"删除",iconCls:"icon-remove"},
{text:"添加",iconCls:"icon-add"}
],
pagination:true,
pageSize:5,
pageList:[5,10,20]
}
);
});
</script>
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<Student> stuList=new ArrayList<Student>();
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<end;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方法
}
来源：https://www.cnblogs.com/xiaopohou/archive/2011/09/28/2194091.html