EasyUI ComboGrid 分页-阿里云开发者社区

开发者社区> 烟火_> 正文

EasyUI ComboGrid 分页

简介: 一、使用场景   下拉框可以很方便地为我们提供选择功能,通过下拉框我们可以便捷地选择某个值,而不需要手动输入。在EasyUI中有ComboGrid与之对应。ComboGrid既可以当中下拉框来使用,又可以进行搜索,展示与当前输入的字符相匹配的数据。
+关注继续查看

一、使用场景

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

二、示例

  html代码如下:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 
  5 <meta charset="utf-8"/>
  6 <title>easyui-combox 分页示例</title> 
  7     <link rel="stylesheet" type="text/css" href="resource/themes/default/easyui.css">
  8     <link rel="stylesheet" type="text/css" href="resource/themes/icon.css">
  9     <link rel="stylesheet" type="text/css" href="resource/demo.css">
 10 </head>
 11 <body>
 12     <div> 
 13         <span><b class="tool_box_b">选择用户:</b></span>
 14         <div>
 15             <input id="person" style="width:285px;"/>
 16             <input id="personId" type="hidden" name="personId"/>
 17             <input type="text" id="txtName" style="display: none;" />
 18               <input type="text" id="txtId" style="display: none;" />
 19         </div>
 20     </div>                              
 21 <script type="text/javascript" src="resource/jquery.min.js"></script>
 22 <script type="text/javascript" src="resource/jquery.easyui.min.js"></script>
 23 <script type="text/javascript">
 24 $(function () {
 25     $('#person').combogrid({
 26         panelWidth: 400,
 27         idField: 'id',        //ID字段  
 28         textField: 'name',    //显示的字段  
 29         url: "${pageContext.request.contextPath}/controller/persons.action",
 30         fitColumns: true,
 31         striped: true,
 32         editable: true,
 33         pagination: true,           //是否分页
 34         rownumbers: true,           //序号
 35         collapsible: false,         //是否可折叠的
 36         fit: true,                  //自动大小
 37         method: 'post',
 38         columns: [[
 39             { field: 'name', title: '页面名称', width: 80 },
 40             { field: 'id', title: '用户id', width: 80, hidden: true },
 41         ]],
 42         keyHandler: {
 43             query: function (keyword) {     //【动态搜索】处理
 44                 var comgrid = $('#person').combogrid("grid");
 45                 var queryParams = comgrid.datagrid('options').queryParams;  //设置查询参数
 46                 queryParams.keyword = keyword;
 47                 comgrid.datagrid('options').queryParams = queryParams;
 48                 comgrid.datagrid("reload");    //重新加载
 49                 $('#person').combogrid("setValue", keyword);
 50                 //将查询条件存入隐藏域
 51                 $('#txtId').val(keyword);
 52             }
 53         },
 54         onSelect: function () {              //选中处理
 55             var seldata = $('#person').combogrid('grid').datagrid('getSelected');
 56             $('#txtName').val(seldata.name);
 57             $('#txtId').val(seldata.id);
 58             $('#personId').val(seldata.id);
 59             //alert(seldata.id+"--"+seldata.name);
 60         }
 61     });
 62           
 63     //取得分页组件对象
 64     var pager = $('#person').combogrid('grid').datagrid('getPager');
 65       
 66     if (pager) {
 67         $(pager).pagination({
 68              pageSize: 10,               //每页显示的记录条数,默认为10
 69              pageList: [10, 20, 30, 40, 50],       //可以设置每页记录条数的列表
 70              beforePageText: '',       //页数文本框前显示的汉字
 71              afterPageText: '页    共 {pages} 页',
 72              displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
 73              //选择页的处理
 74              onSelectPage: function (pageNumber, pageSize) { //按分页的设置取数据
 75                 getData(pageNumber, pageSize);
 76                 //设置表格的pageSize属性,表格变化时按分页组件设置的pageSize显示数据
 77                 $('#person').combogrid("grid").datagrid('options').pageSize = pageSize;
 78                 //将隐藏域中存放的查询条件显示在combogrid的文本框中
 79                 $('#person').combogrid("setValue", $('#txtId').val());
 80                 $('#txtName').val('');
 81             },
 82             onChangePageSize: function () {}, //改变页显示条数的处理 (处理后还是走onSelectPage事件,所以设置也写到onSelectPage事件中了)
 83             onRefresh: function (pageNumber, pageSize) { //点击刷新的处理
 84                 getData(pageNumber, pageSize); //按分页的设置取数据
 85                 $('#person').combogrid("setValue", $('#txtId').val());//将隐藏域中存放的查询条件显示在combogrid的文本框中
 86                 $('#txtName').val('');
 87             }
 88         });
 89     }
 90         
 91     var getData = function (page, pagesize) { 
 92         $.ajax({
 93             type: "POST",
 94             url: "${pageContext.request.contextPath}/controller/persons.action",
 95             type : "POST",
 96             data: {
 97                 "page" : page,
 98                 "pagesize" : pagesize,
 99                 "keyword" : $('#txtId').val()
100             }
101             error: function (XMLHttpRequest, textStatus, errorThrown) {
102                $.messager.progress('close');
103             },
104             success: function (data) {
105                 console.log(typeof data);
106                    $('#person').combogrid("grid").datagrid("loadData", $.parseJSON(data));
107             }
108         }); 
109         
110     };
111 });
112 </script>                
113                                             
114 </body>
115 </html>

  后台controller如下:

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
UpdatePanel中GridView的分页问题
项目中在UpdatePanel范围内加入了一个GridView控件。如果此页面初始化有数据时,分页效果一切正常。但是当初始化时没有数据,页面中点击按钮加载数据后,再点分页数字时报异常:“Microsoft JScript 运行时错误: 缺少对象”经多方请教,几经周折后,终于搞定这个问题。
754 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3956 0
EasyUI-- datagrid分页详解
分页的英文是pagination,记住这个单词,因为会经常遇见。 在EasyUI框架下,datagrid使用分页简单到令人发指,只需要2点: 1,为table启用class=“easyui-datagrid”,这样table就成为了一个数据网格。 2,为table启用pagination=“true”,表示表格启用分页功能。
4 0
asp.net RadGrid分页功能扩展Demo
1、在权限判断代码后面增加如下代码     VSDataTable1 = new DataSet();          public void BindRadGrid()     {              //.
1058 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5676 0
WinForm DataGridView分页功能
WinForm 里面的DataGridView不像WebForm里面的GridView那样有自带的分页功能,需要自己写代码来实现分页,效果如下图: 分页控件   .CS: 1 using System; 2 using System.
889 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
10712 0
Struts2获取easyUI datagrid 分页参数page和rows
Struts2获取easyUI datagrid 分页参数page和rows   用pageHelper分页时,只要是能够获取前台传来的两个参数page和rows基本就完成了很大一部分。 获取方法:定义两个变量page和rows,设置对应的getter,setter方法,在方法中直接获取就能打得。
1133 0
EasyUI Pagination 分页的两种做法
EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用。 一:使用 datagrid 默认机制 后台: public JsonResult GetQuestionUnit() {     // ...
836 0
+关注
烟火_
从事java开发多年
113
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载