当前位置:Gxlcms > html代码 > EasyUIComboGrid分页_html/css_WEB-ITnose

EasyUIComboGrid分页_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:25人阅读

一、使用场景

  下拉框可以很方便地为我们提供选择功能,通过下拉框我们可以便捷地选择某个值,而不需要手动输入。在EasyUI中有ComboGrid与之对应。ComboGrid既可以当中下拉框来使用,又可以进行搜索,展示与当前输入的字符相匹配的数据。
  一般我们有两种方式使用ComboGrid。一种是将数据先获取,带到页面,然后在页面加载的时候进行渲染;另一种是当页面加载完成后,通过ajax请求后台服务,获取json数据,再进行渲染。这两种方式在一般的应用中都可以使用,也不存在其他问题。然而当数据量大的时候,这两种方式都不能很好的满足我们的需要。例如数据量达到万或者几十万的时候,加载该页面的时间就会明显变长,甚至卡死。此时我们可以使用ComboGrid分页的方式,对数据进行分页展示。

二、示例

  html代码如下:

  1   2   3   4   5   6 easyui-combox 分页示例   7       8       9      10  11  12     
13 选择用户: 14
15 16 17 18 19
20
21

  后台controller如下:

/**     * 以json数据返回person列表数据     * @param page 当前页序号     * @param pagesize 页面大小     * @param keyword 要搜索的关键字     * @return json数据     */    @RequestMapping(value = "person")    @ResponseBody    public Map getPersons(@RequestParam("page") int page,            @RequestParam("pagesize") int pagesize,            @RequestParam(value="keyword",required=false) String keyword){                Map result = new HashMap();        int total = personService.countPageByName(kind, keyword);        List productList = personService.queryPageByName(keyword, pagesize, page);          result.put("total", total);          result.put("rows", productList);         result.put("_pagelines",pagesize);                result.put("_currpage", page);                return result;    }        

人气教程排行