在 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 的强大，所以使用起来也相当比较复杂，我们先从基本的学起，逐步深入
一、基本属性
Title ： DataGrid 的标题
Width ：宽度
Height ：高度
iconCls ： DataGrid 的图标
二、定义列标题， DataGrid 有两种形式的列标题
定义普通列属性
Columns
定义冻结列：被冻结的列将不随着水平滑块的滚动而滚动（类似于 Excel 效果）
frozenColumns
两种列标题设置列的值是一样的
[{field:'age',title:' 年龄 ',width:50},{field:'grade',title:' 班级 ',width:80},… ]
field: 标题名称（与 json 数据的属性名一致）
title ：标题文本
width: 宽度
三、绑定数据
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 上了
四：定义工具栏
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 方法
}
