EasyUI ComboGrid 分页_html/css_WEB-ITnose

一、使用场景

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

二、示例

　　html代码如下：

  1   2   3   4   5   6    7       8       9      10  11  12     
  13         选择用户： 14         
 15              16              17              18                19         
 20     
                               21  22  23                 113                                             114 115 

　　后台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;    }