Struts2整合EasyUi中的DataGird
最近在做项目的时候，前台显示的时候，需要用到表格的操作，于是果断选择了熟悉的EasyUI，毕竟自己的熟悉，但是接下来的问题是，如何让EasyUI与Struts2进行整合呢？看了网上好多代码，头疼哈，乱七八糟的，有点晕，下面小编来分享一下自己的方法。
因为Easyui中表格的传值是采用的json格式的字符串，类似于下面的这种形式
<span style="font-family:Comic Sans MS;font-size:18px;"><span style="font-family:Comic Sans MS;font-size:18px;">{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}
</span></span>
所以我们首先要做的就是定制符合EasyUI规范的json串
1.QueryResult类
把EasyUi中json传中的属性封装到该类中，从而到时可以序列化
<span style="font-family:Comic Sans MS;font-size:18px;"><span style="font-family:Comic Sans MS;font-size:18px;">/**
* @FileName: QueryResult.java
* @Package:com.tgb.interfaceSystem.util
* @Description: TODO
* @author: LUCKY
* @date:2015年9月28日 上午10:42:33
* @version V1.0
*/
package cn.itcast.action;
import java.util.List;
/**
* @ClassName: QueryResult
* @Description: TODO
* @author: LUCKY
* @date:2015年9月28日 上午10:42:33
*/
public class QueryResult implements java.io.Serializable {
private static final long serialVersionUID = 1L;
private Long total; //总记录条数
public Long getTotal() {
return total;
}
public void setTotal(Long total) {
this.total = total;
}
public static long getSerialversionuid() {
return serialVersionUID;
}
//一页包含的记录条数
private List<User> rows; //查询结果集
public List<User> getRows() {
return rows;
}
public void setRows(List<User> rows) {
this.rows = rows;
}
}</span></span>
2.前台表格
<span style="font-family:Comic Sans MS;font-size:18px;"><span style="font-family:Comic Sans MS;font-size:18px;"><%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="easyui.css">
<link rel="stylesheet" type="text/css" href="icon.css">
<link rel="stylesheet" type="text/css" href="cssdemo.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic DataGrid</h2>
<p>The DataGrid is created from markup, no JavaScript code needed.</p>
<div style="margin:20px 0;"></div>
<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'demo1_add.action',method:'get'">
<thead>
<tr>
<th data-options="field:'name',width:80">Item ID</th>
<th data-options="field:'code',width:100">Product</th>
<th data-options="field:'pssword',width:80,align:'right'">List Price</th>
<th data-options="field:'number',width:80,align:'right'">Unit Cost</th>
</tr>
</thead>
</table>
</body>
</html></span></span>
上面就是一个基本的EasyUI中的表格样式，但是需要注意的是，其中的表格的field字段名称，需要和返回的json中的字段保持一致，否则赋值不上去
3.表格URL调用
如果查看EasyUi官网的话，会看到表格的URL中直接是一个提前写好的JSON文件，那么我们可以在程序中调用后台，通过printWriter对象，直接输出即可。下面看一下后台方法。
<span style="font-family:Comic Sans MS;font-size:18px;"><span style="font-family:Comic Sans MS;font-size:18px;">package cn.itcast.action;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import org.apache.struts2.interceptor.ServletResponseAware;
//创建一个Action，使用pojo类
public class Demo1Action implements ServletResponseAware {
HttpServletResponse httpServletResponse=null;
private JSONObject resultObj = null;
public JSONObject getResultObj() {
return resultObj;
}
public void setResultObj(JSONObject resultObj) {
this.resultObj = resultObj;
}
public String execute() {
//在此进行转换
return "success";
}
public void add(){
QueryResult queryResult=new QueryResult();
queryResult.setTotal(10l);
List<User> users=new ArrayList<User>();
for (int i = 0; i < 5; i++) {
User user=new User();
user.setCode("code"+i);
user.setName("张三");
user.setName("号码"+i);
user.setPssword("123");
users.add(user);
}
queryResult.setRows(users);
this.setResultObj(JSONObject.fromObject(queryResult));
try {
//直接通过PrintWriter对象输出即可
httpServletResponse.getWriter().print(resultObj);
} catch (IOException e) {
e.printStackTrace();
};
}
public String delete(){
return "success";
}
/* (non-Javadoc)
* @param arg0
* @see org.apache.struts2.interceptor.ServletResponseAware#setServletResponse(javax.servlet.http.HttpServletResponse)
*/
public void setServletResponse(HttpServletResponse arg0) {
// TODO Auto-generated method stub
this.httpServletResponse=arg0;
}
}
</span></span>
后台没什么了，定义一个list集合，然后初始化数值，最后通过JSONObject转换即可，最重要的一步就是
//直接通过PrintWriter对象输出即可
httpServletResponse.getWriter().print(resultObj);
需要注意的是，需要用到这些jar包
1.****json-lib-2.2.3-jdk15.jar
2.ezmorph-1.0.6.jar
3.commons-httpclient.jar
4.commons-beanutils-1.8.0.jar
****struts2-json-plugin-2.1.8.jar
关于Struts2中访问ServletAPI，详见我下一篇博客。