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<pageSize+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分页数据与后台交互

猜你喜欢