Extjs分页数据与后台交互
自己就是记记笔记，欢迎讨论，测试通过
1，前端代码
这里最重要的就是：：1）路径：url:"role/search.do"
2)配置json数据格式：例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}];其中total，rows必须跟reader里一一对应
3) 前端传来数据:例如：String start=req.getParameter("start");
String limit=req.getParameter("limit");还可以得到其它值，为什么这样得到这个值，我也不懂
Ext.onReady(function(){
var roleStore=Ext.create('Ext.data.Store',{
fields: [{name : "id"},
{name : "name"},
{name : "age"},
{name:"createTime"}
],
pageSize: 20, //页容量5条数据
//是否在服务端排序 （true的话，在客户端就不能排序）
remoteSort: true,
remoteFilter: true,
proxy: {
type: 'ajax',
url: "role/search.do",
reader: { //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]
type: 'json', //返回数据类型为json格式
root: 'rows', //数据
totalProperty: 'total'
}
},
sorters: [{
//排序字段。
property:'id',
//排序类型，默认为 ASC
direction:'desc'
}],
listeners : {
'load' : function(store, records, options) {
grid.getSelectionModel().deselectAll();
grid.getSelectionModel().select(0);
}
},
autoLoad: true //即时加载数据
});
var grid=Ext.create('Ext.grid.Panel', {
renderTo: 'grid',
store: roleStore,
autoScroll: 'auto',
region: 'center',
// layout:'fit',
selModel: {
selType: 'checkboxmodel'
}, // 选择框
columns: [
{ text: 'ID', dataIndex: 'id', align: 'left', width: 50},
{ text: '姓名', dataIndex: 'name', minWidth: 300 },
{ text: '年龄', dataIndex: 'age', minWidth: 300 },
{ text: '创建时间', dataIndex: 'createTime', minWidth: 300 },
],
bbar: [{
xtype: 'pagingtoolbar',
store: roleStore,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: "没有数据",
beforePageText: "当前页",
afterPageText: "共{0}页",
displayInfo: true
}],
listeners: {
'itemclick': function(view, record, item, index, e) {
// Ext.MessageBox.alert("提示",record.data.guid.guid);
}
},
tbar: [{
text: '新增',
iconCls:'a_add',
handler: ""
}, "-", {
text: '编辑',
handler: ""
}, "-", {
text: '知识点',
handler: ""
}, "-", {
text: '标签',
handler: ""
}, "-",{
text: '删除',
handler: ""
},"-", {
text: "搜索",
handler: ""
}],
height: "100%"
});
});
2。后台代码
package com.tedu.note.web;
import java.util.Map;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.tedu.note.entity.RoleManager;
//@SuppressWarnings("serial")
@Controller
@RequestMapping("/role")
public class RoleController extends HttpServlet{
@RequestMapping("/search.do")
@ResponseBody
public void search(RoleManager role,HttpServletRequest req,
HttpServletResponse res, HttpSession httpSession){
String start=req.getParameter("start");
String limit=req.getParameter("limit");
System.out.println(start+" "+limit);
try{
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit);
System.out.println(index);
System.out.println(pageSize);
String json = "{total:100,rows:[";
for(int i = index;i
if(i!=pageSize + index - 1){
json+=",";
}
}
json+="]}";
res.getWriter().write(json);
}catch(Exception e){
e.printStackTrace();
}
//return null;
}
}