文档章节

easyui datagrid 分页 详解

小橙子的曼曼
 小橙子的曼曼
发布于 07/22 21:42
字数 1470
阅读 6
收藏 0

1.界面

 

2.前端代码

<table id="dg" title="文章管理" class="easyui-datagrid" fitColumns="true" pagination="true"
    url="${pageContext.request.contextPath}/admin/showAllTrainee" toolbar="#tb" rownumbers="true">
    <thead>
        <tr>
            <th field="cb" checkbox="true"  align="center"></th>
            <th field="tid" width="20" align="center" hidden="true"></th>    
            <th field="title" width="200" formatter="formatTitle">标题</th>
            <th field="time" width="100" align="center">发布日期</th> 
            <th field="tname" width="100" align="center">实习生姓名</th> 
            <th field="major" width="100" align="center">专业</th> 
            <th field="view_num" width="30" align="center">阅读量</th> 
            <th field="aname" width="100" align="center">发布者</th>
        </tr>
    </thead>
</table>

3.后端我用的是springmvc处理数据,返回json串

package com.jyb.pojo;

/**
 * 
 * @author
 * @时间 2016-08-06
 *
 */
public class Page {

    private int page;     //当前第几页
    private int rows;     //每页显示记录数
    private int firstPage;  //第几条记录起始
    
    
    public Page(int page, int rows){
        this.page = page;
        this.rows = rows;
    }
    public int getPage() {
        return page;
    }
    public void setPage(int page) {
        this.page = page;
    }
    public int getRows() {
        return rows;
    }
    public void setRows(int rows) {
        this.rows = rows;
    }
    
    public int getFirstPage() {
        firstPage = (page - 1) * rows;
        return firstPage;
    }

    
    
}
/**
     * @author 
     * @时间 2016-08-06
     * @param page  当前第几页
     * @param rows  每页显示的记录数
     * @param title
     * @return Map
     */
    @SuppressWarnings({ "rawtypes", "unchecked" })
    @ResponseBody
    @RequestMapping(value="/showAllTrainee")
    public Map showAllTrainee(@RequestParam(value="page", required=false) String page, 
            @RequestParam(value="rows", required=false) String rows, @RequestParam(value="title", required=false) String title){
           
          Page pageBean = new Page(Integer.parseInt(page), Integer.parseInt(rows));
          Map reMap = new HashMap();          
          Map paraMap = new HashMap();    
          
          paraMap.put("title", title);
          paraMap.put("firstPage", pageBean.getFirstPage());
          paraMap.put("rows", pageBean.getRows());
          
          try {
            List<Map> list = adminService.showAllTrainee(paraMap);
            long total = adminService.getTraineeTotal(paraMap);
            reMap.put("rows", list);     //存放每页记录数
            reMap.put("total", total);   //存放总记录数 ,必须的
        } catch (Exception e) {    
            e.printStackTrace();
        }
         return reMap; 
    }

其中controller中必须返回json字符串所以加了@ResponseBody注解。

4.mybatis映射文件

<select id="selectTraineeLimit" parameterType="map" resultType="map">
                 select 
                     trainee.tid, 
                     admin.name aname, 
                     trainee.name tname, 
                     trainee.major, 
                     trainee.time, 
                     trainee.title, 
                     trainee.view_num 
                 from 
                     trainee, admin 
                 <where>
                     <if test="title != null and title != ''">
                        and trainee.title like concat('%',#{title},'%')
                     </if>                
                        and trainee.aid = admin.aid
                 </where> 
                 order by 
                     trainee.time desc, trainee.tid                
                 limit 
                     #{firstPage}, 
                     #{rows}; 
         </select>
         
         <select id="getTraineeTotal" parameterType="map" resultType="long">
                select count(tid) from trainee
                <where>
                         <if test="title != null and title != ''">
                            and trainee.title like concat('%',#{title},'%')
                         </if>
                         <if test="name != null and name != ''">
                             and name like concat('%',#{name},'%')
                         </if>
                         <if test="major != null and major != ''">
                             and major like concat('%',#{major},'%')
                         </if>
                         <if test="city != null and city != ''">
                             and city like concat('%',#{city},'%')
                         </if>
                         <if test="company != null and company != ''">
                             and company like concat('%',#{company},'%')
                         </if>
                         <if test="title != null and title != ''">
                             and title like concat('%',#{title},'%')
                         </if>  
                </where>                
         </select>

其他代码就不上了,特写出重点的方便自己或别人作为参考。如果有什么问题大家可以留言,我看见了会解答。

附:

    table easyui-datagrid                   生成一个表格。
             属性如下:
                 1)title:该DataGrid面板的标题文本。
                 2)iconCls:一个CSS类,将提供一个背景图片作为标题图标。
                 3)border:当true时,显示该datagrid面板的边框。
                 4)width:面板宽度,自动列宽。
                 5)height:面板高度,自动列高。
                 6)columns:该DataGrid列配置对象,查看column属性可获取更多信息。
                 7)frozenColumns:跟Columns属性相同,但是这些列将会被固定在左边。
                 8)striped:当true时,单元格显示条纹。默认false。
                 9)method:通过该方法类型请求远程数据。默认post。
                10)nowrap:当true时,显示数据在同一行上。默认true。
                11)idField:说明哪个字段是一个标识字段。
                12)url:一个URL,从远程站点获取数据。
                13)loadMsg:当从远程站点加载数据时,显示一个提示信息。默认"Processing,please wait …"。自定义覆盖。
                14)pagination:当true时在DataGrid底部显示一个分页工具栏。默认false。
                15)rownumbers:当true时显示行号。默认false。
                16)singleSelect:当true时只允许当前选择一行。默认false。
                17)fit:当true时,设置大小以适应它的父容器。默认false。
                18)pageNumber:当设置分页属性时,初始化的页码编号。默认从1开始
                19)pageSize:当设置分页属性是,初始化的页面大小。默认10行
                20)pageList:当设置分页属性时,初始化页面的大小选择清单。默认[10,20,30,40,50]
                21)queryParams:当请求远程数据时,也可以发送额外的参数。
                22)sortName:定义哪列可以排序。
                23)sortOrder:定义列的排列顺序,只能是'asc'或'desc'。默认asc。
             Column属性如下:
                 1)title:该列标题文本。
                 2)field:该列对应的字段名称。
                 3)width:列宽。
                 4)rowspan:说明该单元格需要多少行数。
                 5)colspan:说明该单元格需要多少列数。
                 6)align:说明Column数据的对齐方式。'left','right','center' 都可以使用。
                 7)sortable:当true时,允许该列进行排序。
                 8)checkbox:当true时,允许该列出现checkbox。
             事件如下:
                 1)onLoadSuccess:当远程数据加载成功是激活。
                 2)onLoadError:当远程数据加载发现一些错误时激活。
                 3)onClickRow:当用户点击某行时激活,参数包含:
                    rowIndex: 点击的行索引,从0开始。
                    rowData: 点击行时对应的记录。
                4)onDblClickRow:当用户双击某行时激活,参数包含:
                    rowIndex: 点击的行索引,从0开始。
                    rowData: 点击行时对应的记录。
                5)onSortColumn:当用户对某列排序时激活,参数包含:
                   sort:排序字段名称。
                   order:排序字段类型。
                6)onSelect:当用户选择某行时激活,参数包含:
                   rowIndex: 点击的行索引,从0开始。
                   rowData: 点击行时对应的记录。
                7)onUnselect:当用户取消选择某行时激活,参数包含:
                    rowIndex: 点击的行索引,从0开始。
                    rowData: 点击行时对应的记录。
             方法如下:
                 1)options:返回选择对象。
                 2)resize:重调大小,生成布局。
                 3)reload:重新加载数据。
                 4)fixColumnSize:固定列大小。
                 5)loadData:加载本地数据,过去的行会被删除。
                 6)getSelected:返回第一个选中行的记录,若未选返回null。
                 7)getSelections:返回选中的所有行,当没有选择记录时将返回空数组。
                 8)clearSelections:清除所有选项的选择状态。
                 9)selectRow:选择一行,行索引从0开始。
                10)selectRecord:通过传递一个ID值参数,选择一行。
                11)unselectRow:取消选择一行。

链接:https://www.cnblogs.com/flythinking/p/5793798.html

© 著作权归作者所有

小橙子的曼曼
粉丝 4
博文 89
码字总数 98903
作品 0
南京
程序员
私信 提问
Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,二话不说,上图直观! 2、easyui的datagrid的...

岁月无痕
2013/04/17
9.8K
3
关于easyui datagrid分页的json格式

在网上找了很多资料,始终无法知晓easyui如果分页的话,需要传哪些值,并且json的组成格式是什么样的。 看了一篇质量比较好的博文,http://blog.sina.com.cn/s/blog8263c3c701014m10.html,得...

supperman
2012/08/26
9K
4
jquery easyui datagrid 分页数据请求

jquery easyui datagrid内置了分页的功能,当设置为 pagination: true 以后就能够启用分页功能。 启用分页以后,jquery easyui datagrid发送的数据请求中会包含两个参数: int iPageIndex =...

我吃火锅你吃调料-快给我打钱-房子不要钱
2015/11/02
470
0
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.2K
3
Easyui的datagrid结合hibernate实现数据分页

Easyui的datagrid结合hibernate实现数据分页 最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,...

岁月无痕
2015/06/01
455
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部