富有客户端技术之—

在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文件

二、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：

<!—在此处组织对话框的内容-->

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单击按钮要调用的函数

示例代码：

function alert_info(){

$.messager.alert('消息框','消息','info');

}

function confirm_info(){

$.messager.confirm('确认','要删除吗？',function(ret){

if(ret){

$.messager.alert('消息','已删除');

}

});

}

</script>

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>

</tr>

<tr>

</tr>

<tr>

</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>

</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>

</body>

JS代码：

$(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