jqGrid+FastJson+MybatisPlus快速开发分页排序和增删改查。

z77z后台管理系统

框架介绍


jqGrid :是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信。支持json和xml数据和服务器交互,有很多自定义的功能,具体可以去看文档:http://blog.mn886.net/jqGrid/

MybatisPlus:这个框架是国内的大神编写的,我个人认为这就是一个mybatis的一个增强工具包,好处请大家自行去官方文档查阅,这里就不再赘述了。文档链接:http://mp.baomidou.com/docs/index.html

如果之前没有用过的同学也可以看我的项目来学到这两个框架的实际用法。

·······················································································································································

个人博客:http://z77z.oschina.io/

此项目下载地址:https://git.oschina.net/z77z/springboot_mybatisplus

·······················································································································································

我是在之前项目上来进行开发的,所以已经完成了mybatisPlus的搭建,具体mybatisPlus的配置可以去看我之前美女图片爬虫的那篇博文。

分页查询


下面我就以角色表的分页排序为例:

由于数据层mybatisPlus已经对分页进行了封装,直接在controller层调用分页方法:

//获取角色分页对象
@RequestMapping(value="getRoleListWithPager")
@ResponseBody
public String getRoleListWithPager(FrontPage<SysRole> page) {
    //获取page对象 
    Page<SysRole> pageList = sysRoleService.selectPage(page.getPagePlus());
    CustomPage<SysRole> customPage = new CustomPage<SysRole>(pageList);
    return JSON.toJSONString(customPage);
}

FrontPage对象是用来接受前台jqGrid传来的对象。

package io.z77z.entity;

import com.baomidou.mybatisplus.plugins.Page;

/**
 * 用来接收页面传过来的查询字段   对象
 * @author z77z
 * 
 */
public class FrontPage<T> {
    //是否是查询
    private boolean _search;
    
    //时间戳(毫秒)
    private String nd;
    
    //每页显示条数
    private int rows;
    
    //当前页数
    private int page;
    
    //排序的字段
    private String sidx;
    
    //排序方式 asc升序  desc降序
    private String sord;

    public boolean is_search() {
        return _search;
    }

    public void set_search(boolean _search) {
        this._search = _search;
    }

    public String getNd() {
        return nd;
    }

    public void setNd(String nd) {
        this.nd = nd;
    }

    public int getRows() {
        return rows;
    }

    public void setRows(int rows) {
        this.rows = rows;
    }

    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public String getSidx() {
        return sidx;
    }

    public void setSidx(String sidx) {
        this.sidx = sidx;
    }

    public String getSord() {
        return sord;
    }

    public void setSord(String sord) {
        this.sord = sord;
    }
    
    //获取mybatisPlus封装的Page对象
    public Page<T> getPagePlus(){
        Page<T> pagePlus = new Page<T>();
        pagePlus.setCurrent(this.page);
        pagePlus.setSize(this.rows);
        pagePlus.setAsc(this.sord.equals("asc"));
        pagePlus.setOrderByField(this.sidx);
        return pagePlus;
    }
}

CustomPage对象是我封装的,由于jqGrid和MybatisPlus中的怕个对象字段名称不一样,所以用此对象来过度,就是传入mybatisPlus的page对象,转换成jqGrid的怕个对象,再封装成json对象传到前台。

package io.z77z.entity;

import java.util.List;

import com.baomidou.mybatisplus.plugins.Page;

/**
 * 
 * 由此对象将page对象转换成json对象,传到前台处理
 * @author z77z
 * 由于jqgrid框架定义的page对象里面的字段和mybatisplus的不一样
 * 所以这个由这个中间对象来转换
 * @param <T>
 */
public class CustomPage<T>{
    
    //当前页数
    private int page;
    
    //每页显示数量
    private int pagesize;
    
    //总条数
    private int records;
    
    //数据列表
    private List<T> rows;
    
    //总页数
    private int total;
    
    //排序字段
    private String orderByField;
    
    //是否升序
    private boolean isAsc;
    
    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public int getPagesize() {
        return pagesize;
    }

    public void setPagesize(int pagesize) {
        this.pagesize = pagesize;
    }

    public int getRecords() {
        return records;
    }

    public void setRecords(int records) {
        this.records = records;
    }

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public String getOrderByField() {
        return orderByField;
    }

    public void setOrderByField(String orderByField) {
        this.orderByField = orderByField;
    }

    public boolean isAsc() {
        return isAsc;
    }

    public void setAsc(boolean isAsc) {
        this.isAsc = isAsc;
    }

    public CustomPage(){}
    
    public CustomPage(Page<T> page){
        this.page = page.getCurrent();
        this.pagesize = page.getSize();
        this.records = page.getTotal();
        this.rows = page.getRecords();
        this.total = page.getPages();
        this.orderByField = page.getOrderByField();
        this.isAsc = page.isAsc();
    }
}

这个controller测试链接:http://127.0.0.1:8080/role/getRoleListWithPager?_search=false&nd=1489983253884&rows=15&page=1&sidx=&sord=asc

后面的参数含义,对照FrontPage.java的字段。

访问这个controller得到下面的json串:

{
    "asc": true,
    "page": 1,
    "pagesize": 15,
    "records": 3,
    "rows": [
        {
            "id": "1",
            "name": "系统管理员",
            "type": "888888"
        },
        {
            "id": "3",
            "name": "权限角色",
            "type": "100003"
        },
        {
            "id": "4",
            "name": "用户中心",
            "type": "100002"
        }
    ],
    "total": 1
}

对应字段意思,对照CustomPage.java中的字段。

前台加载表单的js代码:

$(document).ready(function() {
    var config = {
        title : '角色列表',
        url : '/role/getRoleListWithPager',
        colNames : [ '主键', '角色名称', '角色编号' ],
        colModel : [ {
            name : 'id',
            index : 'id',
            width : 60,
            key : true,
            hidden : true
        }, {
            name : 'name',
            index : 'name',
            width : 60
        }, {
            name : 'type',
            index : 'type',
            width : 100
        } ]
    };
    JucheapGrid.Load(config);
    $("#btnSearch").bind("click", searchData);
});

显示效果

jqgrid表单

这个分页查询是mybatisPlus已经写好了,只是针对单表查询,如果是自定义多表查询的话,就需要自己写查询sql语句,自己写mapper.xml文件,自己写mapper接口,自己写service,那怎么使用page类分页呐?

只要在查询的mapper.xml中传入page对象,mybatisPlus就会根据传入的page对象拦截生成对应的查询sql语句。所以如果是多表查询也可以自己实现service ,mappe接口,mapper.xml等来实现多表查询的分页排序等。

排序


实际上面分页的实现后,排序也跟着实现了,再点击表头的某个字段时,jqgrid会发送ajax请求访问分页链接:http://localhost:8080/role/getRoleListWithPager?_search=false&nd=1489984862781&rows=15&page=1&sidx=name&sord=asc 。mybatisPlus会根据传入的page对象拦截sql的生成。达到分页排序的效果。

没传sidx字段的时候:拦截器生成的sql为:SELECT id,name,type FROM sys_role LIMIT 0,15

传入sidx字段为name的时候:拦截器生成的sql为:SELECT id,name,type FROM sys_role ORDER BY name ASC LIMIT 0,15

这些都是mybatisPlus给我们封装好了的,建议去了解下源码。

增删改查


这个代码实现就比较简单了,可以直接去我码云上面去查看源码。

使用jqGrid+mybatisPlus开发的好处


  1. 前端不需要使用foreach标签来循环显示列表。
  2. 查询,分页,排序使用同一个url,根据访问参数来控制数据的获取。
  3. jqGrid的page和mybatisPlus的page实现思路一样,通过page对象的封装来实现分页。后台不需要再对page进行封装。
  4. mybatisPlus实现了单表的常用查询。
  5. 前端点击表头进行表单排序,jqGrid已有相应实现。
  6. 模式化开发,这一套开发对增删改查分页排序管理通用。达到敏捷开发的效果。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容