Ext+Webwork+Json 实现分页表格查询效果
效果图：
前台代码：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.2/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var store=new Ext.data.JsonStore({
root: "result",
totalProperty:"totalCount",
fields:["id","name","sex"],
proxy: new Ext.data.HttpProxy({
url:"testJSON.action"
})
});
var pagebar=new Ext.PagingToolbar({
pageSize:10,
store:store,
displayInfo:true,
displayMsg:"显示 {0}-{1} 共 {2}",
emptyMsg:"No data"
});
var colM=new Ext.grid.ColumnModel([
{header:"序号",dataIndex:"id",sortable:true,hideable:true},
{header:"姓名",dataIndex:"name",sortable:true,hideable:true},
{header:"性别",dataIndex:"sex",sortable:true,hideable:true}
]);
var grid=new Ext.grid.GridPanel({layout:"fit",cm:colM,store:store,autoHeight:true,loadMask:true});
var form1=new Ext.form.FormPanel({
layout:"form",
frame:true,
items:[
{
layout:"column",
border:false,
items:[
{
columnWidth:.3,
layout:"form",
border:false,
items:[
{
xtype:"textfield",
fieldLabel:"姓名",
name:"name",
anchor:"90%"
},
{
xtype:"textfield",
fieldLabel:"职务名称",
name:"postName",
anchor:"90%"
}
]
},
{
columnWidth:.3,
layout:"form",
border:false,
items:[
{
xtype:"textfield",
fieldLabel:"性别",
name:"sex",
anchor:"90%"
},
{
xtype:"textfield",
fieldLabel:"职务层次",
name:"postLevel",
anchor:"90%"
}
]
},
{
columnWidth:.4,
layout:"form",
border:false,
items:[
{
xtype:"textfield",
fieldLabel:"身份证号码",
name:"cardNo",
anchor:"90%"
}
]
}
]
}
],
buttons:[
{
text:"查询",
handler:search
},
{
text:"重置"
}
]
});
//查询按钮事件
function search(){
store.reload({params:{start:0,limit:10,name:Ext.get("name").dom.value}});
}
new Ext.Viewport({
layout:"border",
items:[
new Ext.Panel({
title:"查询条件",
region:"north",
collapsible:true,
height:150,
items:[form1]
}),
new Ext.Panel({
title:"列表",
region:"center",
collapsible:true,
items:[grid],
bbar:pagebar
})
]
});
//给store添加load的pamas
store.on("beforeload",function(){
store.baseParams={name:Ext.get("name").dom.value};
});
store.load({params:{start:0,limit:10}});
});
</script>
</body>
</html>
后台代码：
package com.test;
import com.opensymphony.webwork.dispatcher.json.JSONArray;
import com.opensymphony.webwork.dispatcher.json.JSONObject;
import com.opensymphony.webwork.dispatcher.json.JSONString;
import com.opensymphony.xwork.ActionSupport;
public class TestJson extends ActionSupport{
private String start;
private String limit;
private String name;
private JSONObject jsonObject;
public String execute()throws Exception{
int i=Integer.parseInt(start);
int j=Integer.parseInt(limit);
System.out.println("name:"+name);
JSONArray jsonArray=new JSONArray();
for(int a=i;a<i+j;a++){
JSONObject json=new JSONObject();
json.put("id", a);
if(name!=null&&!"".equals(name)){
json.put("name", "searchName:"+name);
}else{
json.put("name", "name"+a);
}
json.put("sex", "sex");
jsonArray.put(json);
}
jsonObject=new JSONObject();
jsonObject.put("totalCount", "100");
jsonObject.put("result", jsonArray);
System.out.println(jsonObject.toString());
return SUCCESS;
}
public JSONObject getJsonObject() {
return jsonObject;
}
public void setJsonObject(JSONObject jsonObject) {
this.jsonObject = jsonObject;
}
public String getLimit() {
return limit;
}
public void setLimit(String limit) {
this.limit = limit;
}
public String getStart() {
return start;
}
public void setStart(String start) {
this.start = start;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
xwork.xml中的配置：
版本为Ext-2.2 ,Webwork2.2.7