JQuery EasyUI使用简介

图为EasyUI的基本效果，更换了其默认的橙色系： 

jQuery EasyUI是一组基于jQuery的UI插件集合，对于web开发人员来讲，EasyUI的出现，预示着只要会基本的CSS，JS，就能开发出功能丰富并且美观的UI界面。jQuery EasyUI为我们提供了的大量UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，datagrid，validatebox，window等等。

这几天一直在学习研究JQuery EasyUI，出发点原本是解决公司现在的框架实现某些功能太过于繁琐，比如现在的分页查询，通过一个java类拼接html元素组成分页，太过于繁琐，并且查询条件一多，更是麻烦，所以为了后期开发不再花费太多时间在这个上面，这几天对JQuery EasyUI进行了简单的学习，在这总结一下，做个学习笔记，以免日后忘记。

1.从JQuery官网下载所需插件，当前最新版本为1.2.5，下载 jquery-easyui-1.2.5.zip 。

2.解压下载压缩包，在页面中引入 easyui.css,icon.css,jquery.js,easyui.js,easyui-lang-zh_CN.js(中文支持),对文件名去掉了版本号进行重命名， 注意jquery.js一定要在easyui.js引入之前引入，因为easyui.js是基于jquery.js实现。

3.实现简单的基本功能，实现table绑定datagrid，datagrid分页查询，条件查询，基于模态弹出层的JSON数据格式的AJAX新增，修改以及删除功能的实现。

4.编辑jsp页面，页面实现采用easyui-layout布局，类似与java swing中的 BorderLayout，南北贯通，中间势力最大，分为north，south，west，east，center ，通过div结合easyui的css实现，重点讲table绑定easyui的datagrid实现，只需要在页面中编写一个无内容的table，即

<table id="grid"></table>,一定要包含id,因为datagrid就是通过查找id来实现绑定的，接着在页面引入如下js：

$(function(){
$('#grid').datagrid({
fit:true,//自动大小
nowrap: false,
striped: true,
collapsible:false,//是否可折叠
remoteSort: false,
singleSelect: false,//单选
pagination:true,//分页控件
pageSize:5, //设置默认每页显示的行数
pageList:[5,10,15,20,25,30],
rownumbers:true,//显示行号
loadMsg:'数据加载中，请稍候...',
title:'产品列表',
url:'Products_proLst',
idField:'id',
columns:[[
{field:'ck',checkbox:true,width:20},
{field:'proNo',title:'产品编号',width:90,align:'center'},
{field:'proName',title:'产品名称',width:120,align:'center'},
{field:'proType',title:'产品类型',width:80,align:'center'},
{field:'addTime',title:'录入时间',width:120,align:'center',
formatter:function(value,rec,index){
return value.substring(0,value.lastIndexOf('.'));
}
},
{field:'statue',title:'审核状态',width:80,align:'center',
formatter:function(value,rec,index){
if(value=='1')
return "已审核";
if(value=='2'){
return "未审核";
}
}
},
{field:'opt',title:'操作',width:120,align:'center',
formatter:function(value,rec,index){
return "<a href='javascript:doEdit("+rec.id+")'>编辑</a>&nbsp;|&nbsp;" +
"<a href='javascript:doDel("+rec.id+")'>删除</a>";
}
}
]],
toolbar:[{
id:'btnExport',
text:'导出',
iconCls:'icon-print',
handler:function(){

alertInfo('导出成功！');
}
},'-',{
id:'btnAdd',
text:'添加',
iconCls:'icon-add',
handler:function(){
openWin('w','添加产品',600,400);
}
},'-',{
id:'btnDel',
text:'删除',
iconCls:'icon-remove',
handler:function(){
}
}]
});
});

5.后台采用struts2处理数据，引入JSON的支持包，分别为 commons-beanutils-1.8.0.jar,commons-collections-3.2.1.jar,commons-lang-2.4.jar,commons-logging-1.0.4.jar,ezmorph-1.0.4.jar,json-lib-2.1.jar,jsonplugin-0.33.jar,缺一不可。编写action，在action中定义两个参数，分别为 rows(相当于pageSize)，page(相当于pageIndex)，action主要代码：

public String proLst(){
try{
//当前页
int pageIndex = Integer.parseInt((page == null || page == "0") ? "1":page);
//每页显示条数
int pageSize = Integer.parseInt((rows == null || rows == "0") ? "10":rows);
int startRow = (pageIndex-1)*pageSize;
Map<String, String> map = new HashMap<String, String>();
total = dao.getProTotalRow(map);
List<Products> lst = dao.getProLst(map, startRow, pageSize);
Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map
jsonMap.put("total", total);//total键 存放总记录数，必须
jsonMap.put("rows", lst);//rows键 存放每页记录 list
result = JSONObject.fromObject(jsonMap);//格式化result
System.out.println(result);
}catch (Exception e) {
e.printStackTrace();
}
return SUCCESS;
}

因为datagrid分页需返回json格式的数据，所以在struts.xml配置文件的package 中的配置方式就不再是传统的extends="struts-default"而是extends="json-default",并且result的 type="json",配置参数param，不配置json数据不能正常返回，原因暂时还没想明白，参数中的resaut为action格式化的 JSONObject对象，整体配置如下：

<package name="products" namespace="/" extends="json-default">
<action name="*_*" class="com.yi.action.{1}Action" method="{2}">
<result type="json" >
<param name="root">result</param>
</result>
</action>
</package>

6.在提交查询参数时，含有中文，后台获取到的JSON数据中文乱码，折腾了很久，页面编码与服务器编码一致，并设置了请求编码格式，struts2配置编码过滤器也无效果，最终采用最原始的编码过滤器，将所有的请求在未经任何处理之前就进行编码，中文乱码问题解决。

7.完毕。