ExtJs的Grid元件配合struts2返回json資料
第一次使用extjs的grid元件，簡單做了一個分頁條。主要目地是把資料庫中的資料呈現到前端的grid中。過程記錄如下
首先是JSP頁面程式碼：
<div id="grid" style="width:400px;height:300px"></div>
然後是JS程式碼：
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'編號', dataIndex:'id', width:250},
{header:'名字', dataIndex:'name'},
{header:'年紀', dataIndex:'age'},
{header:'地址', dataIndex:'address'}
]);
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: path + '/index_query.action'}),
reader: new Ext.data.JsonReader({
totalProperty: "total",
root: "rows"
},[
{name:'id'},
{name:'name'},
{name:'age'},
{name:'address'}
])
});
var grid = new Ext.grid.GridPanel({
renderTo: 'grid', // 渲染到id=grid在div
autoHeight: true,
store: store,
cm: cm,
width: 600,
height: 300,
frame: true,
forceFit: true,
stripeRows: true,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: "顯示{0}條到{1}條記錄,一共{1}條記錄",
emptyMsg: "沒有記錄"
})
});
// 如果配置了分頁工具條,store.load()就必須在構造表格以後執行,否則分頁工具條不起作用
store.load({params:{start:0, limit:10}});
});
Action中的程式碼：
public class IndexAction extends BaseAction<Person> {
private static final long serialVersionUID = 6187270463225630432L;
@Resource
private PersonService personService; // 用到了spring框架
ExtGrid<Person> extGrid = new ExtGrid<Person>(); // 這裡的ExtGrid只是一個簡單的javaBean物件
public ExtGrid<Person> getExtGrid() {
return extGrid;
}
public void setExtGrid(ExtGrid<Person> extGrid) {
this.extGrid = extGrid;
}
// limit 10
// start 0
private Integer start;
private Integer limit;
public void setStart(Integer start) {
this.start = start;
}
public void setLimit(Integer limit) {
this.limit = limit;
}
public String query() {
System.out.println("start = " + start);
System.out.println("limit = " + limit);
List<Person> list = personService.findAll();
extGrid.setRows(list);// 設定資料
extGrid.setTotal(list.size()); // 設定總數
return SUCCESS; // 這裡要返回String , 如果方法是void的話，介面沒資料返回
}
}
struts.xml檔案的配置（重點是返回JSON的配置）
<struts>
<package name="json" namespace="/" extends="json-default">
<action name="index_*" class="indexAction" method="{1}">
<result type="json">
<!-- 這裡指定將被Struts2序列化的屬性，該屬性在action中必須有對應的getter方法 -->
<param name="root">extGrid</param>
</result>
</action>
</package>
最終效果如下:
經過查詢了很多資料，才總結出這個做法。先記錄下來，以後再慢慢改進。。。