Struts2与ExtJs Grid结合使用json格式数据
1.引入struts2核心jar包，与jsonplugin-0.32.jar
2.配置struts.xml文件
<constant name="struts.i18n.encoding" value="utf-8"/>
<package name="example" namespace="/" extends="json-default">
<action name="gridUtil" class="com.bict.GridUtil" method="grid">
<result type="json" /> <!--将bean属性以json字符串返回浏览器-->
</action>
<action name="gridAction" class="com.bict.util.ClientModel" method="getJSONPage">
<result name="success">/json_grid.jsp</result>
</action>
</package>配置struts.i18n.encoding常量，不再使用GBK编码，而是UTF-8编码，这是回为AJAX的POST请求都是以UTF-8的方式进行编码的。
3.后台部分User.java
package com.bict;
import java.util.List;
public class User {
private int id;
private String name;
private String age;
private String descn;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
public String getDescn() {
return descn;
}
public void setDescn(String descn) {
this.descn = descn;
}
}定义了一个User对象，当作数据载体
4.gridUtil.java
package com.bict;
import java.util.ArrayList;
import java.util.List;
import com.bict.User;
import com.opensymphony.xwork2.ActionSupport;
public class GridUtil extends ActionSupport {
private int totalProperty = 100;
private List root;
public List getRoot() {
return root;
}
public void setRoot(List root) {
this.root = root;
}
public int getTotalProperty() {
return totalProperty;
}
public void setTotalProperty(int totalProperty) {
this.totalProperty = totalProperty;
}
public String grid() {
root = new ArrayList<User>();
User user1 = new User();
user1.setAge("20");
user1.setDescn("descn1");
user1.setId(1);
user1.setName("name1");
root.add(user1);
User user2 = new User();
user2.setAge("19");
user2.setDescn("descn2");
user2.setId(2);
user2.setName("name2");
root.add(user2);
return SUCCESS;
}
}
定义了一个Action用于进行数据转化与返回。可以在这里进行与数据库交互，totalProperty是总记录数，root是所有数据库取出的值，它是一个List集合。
5.json_grid.jsp,引入Ext-3.2.1相关配置
<link href="ext-3.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.1/ext-all.js"></script>
<script type="text/javascript" src="ext-3.2.1/src/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/json_grid.js"></script>
<body>
<div id="grid"></div>
</body>
6.json_grid.js
Ext.onReady(function(){
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'gridUtil.action'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
ds.load({params:{start:0,limit:10}});
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'年龄',dataIndex:'age'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'gridUtil.action'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'},{name:'age'}
])
});
ds.load({params:{start:0,limit:10}});
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm,
sm: sm,
title: 'struts2->JSON',
//height:400,
autoHeight: true,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
});
grid.render();
})