JSP+EXt2.0实现分页的方法 |
|
本文标签:JSP,EXt2.0,分页 本文实例讲述了JSP+EXt2.0实现分页的方法 。分享给大家供大家参考 。具体如下: JavaScript代码:
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:编号,dataIndex:id,sortable:true},
{header:名称,dataIndex:name,sortable:true},
{header:性别,dataIndex:sex,sortable:true,renderer:function(value){
if(value==male){
return " <span style=color:red;font-weight:bold;>红男 </span> <img src=./img/125.gif>";
}else{
return " <span style=color:green;font-weight:bold;>绿女 </span> <img src=./img/123.gif>";
}
}},
{header:描述,dataIndex:descn,sortable:true}
]);
cm.defaultSortable = true;
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:page.jsp}),
reader: new Ext.data.JsonReader({
totalProperty: totalProperty,
root: root
},
[
{name: id,mapping:id},
{name: name,mapping:name},
{name:sex,mapping:sex},
{name: descn,mapping:descn}
]),
remoteSort:true
});
var grid = new Ext.grid.GridPanel({
el: grid,
title:Ext Grid Test,
width:450,
height:410,
trackMouseOver:false,
loadMask: {msg:正在加载数据,请稍侯……},
store:ds,
cm: cm,
sm:sm,
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: ds,
displayInfo: true,
displayMsg: 当前显示 {0} - {1}条记录 /共 {2}条记录,
emptyMsg: "No topics to display"
})
});
grid.render();
ds.load({params:{start:0, limit:5}});
});
JSP代码:
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String start = request.getParameter("start");
String limit = request.getParameter("limit");
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit);
String json = "{totalProperty:100,root:[";
String sex="";
for (int i = index; i < pageSize + index; i++) {
if(i%2==0)
{
sex="male";
}
else{
sex="female";
}
json += "{id:" + i + ",name:" + i + ",sex:"+sex+",descn:descn" + i
+ "}";
if (i != pageSize + index - 1) {
json += ",";
}
}
json += "]}";
response.getWriter().write(json);
System.out.print(json);
%>
希望本文所述对大家的JSP程序设计有所帮助 。 |