[Ext JS Grid] 后端数据分页Store Grid

布满荆棘的人生 2024-03-27 09:22 144阅读 0赞

Ext JS 提供了一个分页工具栏组件-pagingtoolbar， 这个可以添加到Grid 中，通过点击上一页/下一页按钮进行数据的分页查询。
如果使用的是ajax 类型的代理的 Store, 数据从后端获取， 则在分页查询时，会额外附加page、start和limit 三个参数，这三个参数的意思是：

  • page ，当前页
  • start ， 数据开始的下标
  • limit ， 一次取出的数据量
    在后端数据接口中， 根据这三个参数， 返回对应页数的数据。

后端数据分页Grid 定义

数据从后端读取时，添加pagingtoolbar 之后， 分页的工具栏和Store数据就自动绑定了。
这里先基于Spring Boot定义一个后端的数据接口，接收 page、start和limit 三个参数，代码类似：

  1. @GetMapping(value="/users" ,produces="application/json")
  2.     @CrossOrigin(origins = "*")
  3.     public Map<String, Object> listUser(@RequestParam(required = false) int page,
  4.             @RequestParam(required = false) int start, @RequestParam(required = false) int limit) {

接口呼叫地址 http://localhost:8080/grid/users?page=1&start=0&limit

发表评论

表情：
评论列表 （有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读