先看看演示效果：
先看PageProperty.html代码：
<!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=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../../../extjs/resources/css/ext-all.css"></link>
<script type="text/javascript" src="../../../extjs/ext-base.js"></script>
<script type="text/javascript" src="../../../extjs/ext-all.js"></script>
<script type="text/javascript" src="../regiontableMgr/PageProperty.js"></script>
</head>
<body>
<div id="north"></div>
<div id="west"></div>
<div id="center"></div>
<div id="south"></div>
</body>
</html>
再看看PageProperty.js代码：
//餐台删除操作；
tableOpt = function(){//需要传参数：rowNumber；
return '<a href="javascript:tableDeleteHandler()"><img src="../../images/del.png">删除</img></a>'
};
Ext.onReady(function() {
//列模型；
cm_tableGrid = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),{
header : "编号",
sortable : true,
dataIndex : "tableAlias",
width : 130,
fixed : true
},{
header : "名称",
sortable : true,
dataIndex : "tableName",
width : 230,
fixed : true
},{
header : "区域",
sortable : true,
dataIndex : "tableRegion",
fixed : true,
width : 130
},{
header : "最低消（￥）",
sortable : true,
dataIndex : "tableMinCost",
width : 130,
fixed : true
},{
header : "服务费率",
sortable : true,
dataIndex : "tableServiceRate",
width : 130,
fixed : true
},{
header : "状态",
sortable : true,
dataIndex : "tableStatusDisplay",
width : 130,
fixed : true
},{
header : "类型",
sortable : true,
dataIndex : "tableCategoryDisplay",
width : 130,
fixed : true
},{
header : "操作",
align : 'center',
dataIndex : "tableOpt",
sortable : true,
renderer : tableOpt
}
]);
table_proxy = new Ext.data.HttpProxy({//远程加载数据；
url : '../../../QueryRegionTable.do',
//baseParams : {//传入restaurantID
//'restaurantID' : restaurantID
//}
});
table_GridRecord = new Ext.data.Record.create([
{name : 'tableAlias',type : 'string',mapping : 'tableAlias'},
{name : 'tableName',type : 'string',mapping : 'tableName'},
{name : 'tableRegion',type : 'string',mapping : 'tableRegion'},
{name : 'tableMinCost',type : 'string',mapping : 'tableMinCost'},
{name : 'tableServiceRate',type : 'string',mapping : 'tableServiceRate'},
{name : 'tableStatusDisplay',type : 'string',mapping : 'tableStatusDisplay'},
{name : 'tableCategoryDisplay',type : 'string',mapping : 'tableCategoryDisplay'},
{name : 'tableOpt',type : 'string',mapping : 'tableOpt'}
]);
//reader;
var reader = new Ext.data.JsonReader({
totalProperty : "totalProperty",
root : "root"
}, table_GridRecord);
//store_tableGrid;
var store_tableGrid = new Ext.data.Store({
proxy : table_proxy,
reader : reader
});
store_tableGrid.load({//传入分页参数；
params:{start:1,limit:27}
});
var grid = new Ext.grid.GridPanel({
title : "餐桌管理",
width : 1200,
cm : cm_tableGrid,
store : store_tableGrid,
height :650,
renderTo : Ext.getBody(),
bbar : new Ext.PagingToolbar({
store : store_tableGrid,
pageSize : 27,
displayInfo : true,
displayMsg : "本页显示第{0}条到第{1}条记录,一共{2}条",
emptyMsg : "没有记录"
})
});
});
再看看PagePropertyAction.java
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class PagePropertyAction extends Action {
@Override
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
System.out.println("akshdkahdkash");
response.setContentType("text/json; charset=utf-8");
// 起始索引
int start = Integer.parseInt(request.getParameter("start").toString());
// 页大小
int limit = Integer.parseInt(request.getParameter("limit").toString());
// 总记录数
int count = 1000;
StringBuffer sb = new StringBuffer();
sb.append("{totalProperty:" + count + ",root:[");
int end = start + limit;
if (end > count)
end = count; // 若是数据库,本行要删除
for (int i = start; i < end; i++) {
sb.append("{did:" + i + ",dname:'部门" + i + "'}");
if (i < end - 1) {
sb.append(",");
}
}
sb.append("]}");
response.getWriter().print(sb.toString());
response.getWriter().flush();
response.getWriter().close();
return null;
}
}
再看看配置文件：(此处的PageProperty是对应的是全面URL的PageProperty.do的)
<action path="/PageProperty"
type="com.wireless.Actions.regionMgr.PagePropertyAction" scope="request">
</action>