先看看演示效果：
先看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>
相关推荐
ExtJs GridPanel双击事件获得双击的行，双击行可以选中前面的checkbox，并获得行号
extjs4.2 分页combo动态条数 源码,不懂的加群
extjs 简单分页例子。 只有js文件 后台 代码自己可以采用 觉得好的技术实现。
通过Servlet让Extjs GridPanel 显示数据库数据
我们开发项目的时候，有的时候左边的树结点很多，虽然说有extjs有异步，但还是有结点下面有时长达500个以上，甚至更多，这个时候用分页可以解决这个问题
此文件用于项目首页内容,使用了ExtJs中的GridPanel
一个extjs的分页控件，就是可以选择一页显示多少条记录，该控件非常灵活，便于集成
很多同事在用extjs grid做分页的时候，往往会想用grid的多选功能来实现导出Excel之类的功能（也就是所谓的多选记忆功能），但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
extjs 分页 从dao到action
ExtJS的GridPanel导出excel文件,方便快捷易懂!
Extjs gridpanel 出现横向滚动条问题的解决方法，在gridpanel中加入以下代码即可。
在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. ...
一个关于GridPanel的使用例子 介绍了Proxy，JsonReader Store gridPanel等几个对象的简单使用
NULL 博文链接：https://kohisa.iteye.com/blog/651399
详细介绍了EXTJS中gridpanel分页技术的解析
NULL 博文链接：https://lucky16.iteye.com/blog/1522254
extjs 富客户端界面设计 grid分页后台处理
NULL 博文链接：https://xiaohewoai.iteye.com/blog/409898
NULL 博文链接：https://topbox163.iteye.com/blog/1276463
ExtJS .net分页例子SqlConnection con = new SqlConnection(); con.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;//ConnectionString ...