jqGrid+FastJson+MybatisPlus快速開發分頁排序和增刪改查。 頂 原

框架介紹

---

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);
});

顯示效果

這個分頁查詢是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. 模式化開發，這一套開發對增刪改查分頁排序管理通用。達到敏捷開發的效果。