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                     json +="{id:"+i+",name:'name"+i+"',age:'desc"+i+"'}";  
                    if(i!=pageSize + index - 1){  
                        json+=",";  
                    }  
                }  
                json+="]}";  
                res.getWriter().write(json);  
            }catch(Exception e){  
                e.printStackTrace();  
            }  
        //return null;
        
    }

}


你可能感兴趣的:(Extjs分页数据与后台交互)