SSM pageHelper + 前端 Bootstraptbale分頁 + 解析巢狀的二級json資料
阿新 • • 發佈：2019-01-05
ssm 後臺使用pageHelper 分頁外掛 前端使用Bootstraptable 外掛
廢話不多說 先上圖
為了大家能更快的掌握 ,我不加其他花哨的內容 bootstrapboot 裡的屬性我就設定了常用幾個
下面是jsp頁面的程式碼 一共要引入5個檔案 注意引入js的先後順序 jquery 在前
bootstrap.min.css
bootstrap-table.css
jquery-3.2.1.min.js 我用的是3.2.1
bootstrap.min.js
bootstrap-table.js
bootstrap-table-zh-CN.js 支援中文的
jsp 頁面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <!--引入 bootstrap.min.css--> <link rel="stylesheet" href="${pageContext.request.contextPath }/statics/css/bootstrap.min.css" /> <!--引入bootstrap-table.css--> <link rel="stylesheet" href="${pageContext.request.contextPath }/statics/css/bootstrap-table.css" /> <!--引入jquery--> <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/jquery-3.2.1.min.js"></script> <!--引入bootstrap.min.js --> <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/bootstrap.min.js"></script> <!--引入bootstrap-table.js --> <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/bootstrap-table.js"></script> <!--引入bootstrap-table-zh-CN.js--> <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/bootstrap-table-zh-CN.js"></script> </head> <body> <div class="panel panel-default"> <div class="panel-body"><h2>學生資訊表</h2></div> </div> <!-- table 標籤 --> <table></table> </body> </html> <script type="text/javascript"> //專案根路徑 var path = '${pageContext.request.contextPath}'; $('table').bootstrapTable({ method : 'post', // 向伺服器請求方式 contentType : "application/x-www-form-urlencoded", // 如果是post必須定義 url : path + '/getData', //請求後臺的URL（*） pageSize : 2, // 每頁的記錄行數（*） pageNumber : 1, // table初始化時顯示的頁數 pageList : [ 2, 5, 10 ], //可供選擇的每頁的行數（*） sidePagination : "server", //分頁方式：client客戶端分頁，server服務端分頁（*） bootstrap-table要求伺服器返回的json須包含：total rows cache : false, // 是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*） striped : true, // 隔行變色 pagination : true, // 是否啟用分頁 showRefresh : true, //是否顯示重新整理按鈕 showToggle : true, //是否顯示詳細檢視和列表檢視的切換按鈕預設true showToggle : true, //是否顯示詳細檢視和列表檢視的切換按鈕預設true silent : true, // 設定重新整理事件 queryParams : function(params) { //params為bootstraptable自帶的 // 請求引數，傳到伺服器的引數 return { pageSize : params.limit, // 每頁顯示數量 pageNumber : params.offset, // 顯示第幾頁 } }, columns : [ //頁面需要展示的列，後端互動物件的屬性 { field : 'stuNo', // 返回json資料中的name title : '學生編號', // 表格表頭顯示文字 align : 'center', // 左右居中 valign : 'middle' // 上下居中 }, { field : 'stuName', title : '姓名' }, { field : 'gradeName', title : '年級編號' }, { field : 'stuGender', title : '性別' }, { field : 'stuBirthday', title : '生日' }, { field : 'enterDate', title : '入學時間' }, { field : 'createBy', title : '建立者' }, { field : 'createTime', title : '建立時間' }, { field : 'modifyBy', title : '修改者' }, { field : 'modifyTime', title : '修改時間' }, { title : '操作', align : 'center', formatter : function(value, row, index) { return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.stuNo + '\')">刪除</button>'; } } ], onLoadSuccess : function() { //載入成功時執行 //alert("success"); console.info("載入成功"); }, //載入成功時執行的方法 onLoadError : function() { //載入失敗時執行 //alert("error"); console.info("載入資料失敗"); }, //載入失敗時執行的方法 responseHandler : function(res) { //載入伺服器資料之前的處理程式，可以用來格式化資料。引數：res為從伺服器請求到的資料。如果你的json格式沒有巢狀可以不必寫 // 把res.rows中巢狀的json物件取出來追加到res.rows中 for (var i = 0; i < res.rows.length; i++) { var grade = res.rows[i].gradeList[0]; for (var key in grade) { //如果grade的鍵值等於gradeName 就追加 if (key == "gradeName") { var k = key; var value = grade[key]; res.rows[i][k] = value; } } } //把res.rows 中的 gradeList刪除 for (var i = 0; i < res.rows.length; i++) { delete res.rows[i]["gradeList"]; } //返回格式化好的json資料 return res; } }); </script> </html>
由於我後臺傳來的json格式是巢狀的 bootstraptable 無法獲取到巢狀的值 所以要在表格渲染之前對json處理
如果後臺傳來的json是這樣的: total 為後臺傳過來的總記錄數 rows 是傳過來渲染表格的資料
rows裡沒有巢狀 則不需要處理
{"total" : 6 , "rows" : [ {"name" : "李四", "age": "20" },{"name" : "張三", "age": "21" } ] } rows裡沒有巢狀 則不需要處理 rows裡又嵌套了一層 grade物件 grade裡的屬性和值在bootstraptable裡拿不出來的 就要在表格渲染之前處理這個json資料
{"total" : 6 , "rows" : [ {"name" : "李四", "age": "20","grade":[{"gradeNo":"101"},{"gradeName":"三班"}] },{"name" : "張三", "age": "21","grade":[{"gradeNo":"101"},{"gradeName":"三班"}] } ] } 我從後臺傳來的json如下
{"total":6,"rows":[{"age":8,"classNumber":"03","createBy":"孔子","createTime":"2018-04-25 14:19","enterDate":"2018-04-25","gradeList":[{"createBy":"孔子","createTime":"2018-04-25 14:19","gradeName":"三班","modifyBy":"孔子","modifyTime":"2018-04-25 14:57"}],"modifyBy":"孔子","modifyTime":"2018-04-25 14:57","stuBirthday":"2010-02-03","stuGender":"女","stuName":"李濤","stuNo":"0007"},{"age":35,"classNumber":"03","createBy":"孔子","createTime":"2018-04-25 12:51","enterDate":"2018-04-30","gradeList":[{"createBy":"孔子","createTime":"2018-04-25 12:51","gradeName":"三班"}],"stuBirthday":"1983-02-09","stuGender":"男","stuName":"郭德綱","stuNo":"0009"}]}我的處理方式如下
responseHandler : function(res) { //載入伺服器資料之前的處理程式，可以用來格式化資料。引數：res為從伺服器請求到的資料。如果你的json格式沒有巢狀可以不必寫
// 把後臺傳來的資料中 rows中巢狀的json物件gradeList 的屬性gradeName取出來追加到rows中
for (var i = 0; i < res.rows.length; i++) {
var grade = res.rows[i].gradeList[0];
for (var key in grade) {
//如果grade的鍵值等於gradeName 就追加 gradeName到rows中
if (key == "gradeName") {
var k = key;
var value = grade[key];
res.rows[i][k] = value;
}
}
}
//把res.rows 中的 gradeList刪除
for (var i = 0; i < res.rows.length; i++) {
delete res.rows[i]["gradeList"];
}
//返回格式化好的json資料
return res;
}處理之後的json資料
{"total":6,"rows":[{"age":8,"classNumber":"03","createBy":"孔子","createTime":"2018-04-25 14:19","enterDate":"2018-04-25","modifyBy":"孔子","modifyTime":"2018-04-25 14:57","stuBirthday":"2010-02-03","stuGender":"女","stuName":"李濤","stuNo":"0007","gradeName":"三班"},{"age":35,"classNumber":"03","createBy":"孔子","createTime":"2018-04-25 12:51","enterDate":"2018-04-30","stuBirthday":"1983-02-09","stuGender":"男","stuName":"郭德綱","stuNo":"0009","gradeName":"三班"}]}後臺Controller的程式碼如下
package com.xuan.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.validation.groups.Default;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSONArray;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.xuan.pojo.Student;
import com.xuan.service.StudentService;
@Controller
public class TestController {
@Autowired
StudentService studentService;
@RequestMapping("/index")
public String enter() {
return "test/table";
}
/**
* @param pageNumber
* @param pageSize
* @return
*/
@ResponseBody
@RequestMapping("/getData")
//前臺傳來的引數 pageNumber:顯示第幾頁 ,pageSize:頁面的大小
public String getData(@RequestParam(value = "pageNumber") int pageNumber, @RequestParam("pageSize") int pageSize) {
//呼叫PageHelper的startPage靜態方法傳入分頁要的引數: 第幾頁 和頁面大小
PageHelper.startPage(pageNumber, pageSize);
//呼叫service查詢 得到一個lisi 集合 我的Student物件裡包含了一個grade集合
List<Student> studentList = studentService.ListStudent();
//使用PageInfo 的有參構造傳入上面呼叫Service得到的集合 得到pageInfo物件 此物件不僅包含了分頁查詢得到的結果 還有分頁的引數 如 總記錄數,總頁數等等
PageInfo<Student> pageInfo = new PageInfo<Student>(studentList);
//因為bootstraptable接收渲染資料的引數時會以鍵名為rows的接收 所以新建一個集合取出pageinfo物件中查詢到集合賦值給它
List<Student> rows = pageInfo.getList();
//取出總記錄數
int totlal = (int) pageInfo.getTotal();
//把總記錄數和查詢到的集合裝到一個map物件嗎中
Map<String, Object> results = new HashMap<String, Object>();
results.put("rows", rows);
results.put("total", totlal);
//使用JSONArray的toJSONString方法不map 集合解析為json格式 並返回給前臺頁面
return JSONArray.toJSONString(results);
}
}
service 方法:
@Override
public List<Student> ListStudent() {
return studentMapper.ListStudent();
dao介面:
List<Student> ListStudent();mapper.xml:
<resultMap id="gradeMap" type="com.xuan.pojo.Grade">
<id column="gradeNo" property="gradeNo" jdbcType="VARCHAR" />
<result column="gradeName" property="gradeName" jdbcType="VARCHAR" />
<result column="createBy" property="createBy" jdbcType="VARCHAR" />
<result column="createTime" property="createTime" jdbcType="TIMESTAMP" />
<result column="modifyBy" property="modifyBy" jdbcType="VARCHAR" />
<result column="modifyTime" property="modifyTime" jdbcType="TIMESTAMP" />
</resultMap>
<resultMap id="studentMap" type="com.xuan.pojo.Student">
<id column="stuNo" property="stuNo" jdbcType="VARCHAR" />
<result column="classNumber" property="classNumber" jdbcType="VARCHAR" />
<result column="stuName" property="stuName" jdbcType="VARCHAR" />
<result column="stuGender" property="stuGender" jdbcType="VARCHAR" />
<result column="stuBirthday" property="stuBirthday" jdbcType="DATE" />
<result column="enterDate" property="enterDate" jdbcType="DATE" />
<result column="createBy" property="createBy" jdbcType="VARCHAR" />
<result column="createTime" property="createTime" jdbcType="TIMESTAMP" />
<result column="modifyBy" property="modifyBy" jdbcType="VARCHAR" />
<result column="modifyTime" property="modifyTime" jdbcType="TIMESTAMP" />
<collection property="gradeList" ofType="com.xuan.pojo.Grade"
resultMap="gradeMap" />
</resultMap>
<select id="ListStudent" resultMap="studentMap">
SELECT
gra.`gradeName`,stu.*
FROM student stu
JOIN grade gra ON (gra.`gradeNo` = stu.`classNumber`)
</select>
student Bean student裡有一個 grade集合
package com.xuan.pojo;
import java.util.Date;
import java.util.List;
import org.springframework.format.annotation.DateTimeFormat;
import com.alibaba.fastjson.annotation.JSONField;
public class Student {
private String stuNo;
private String classNumber;
private String stuName;
private String stuGender;
@DateTimeFormat(pattern = "yyyy-MM-dd")
@JSONField(format = "yyyy-MM-dd")
private Date stuBirthday;
@DateTimeFormat(pattern = "yyyy-MM-dd")
@JSONField(format = "yyyy-MM-dd")
private Date enterDate;
private String createBy;
@DateTimeFormat(pattern = "yyyy-MM-dd")
@JSONField(format = "yyyy-MM-dd HH:mm")
private Date createTime;
private String modifyBy;
@JSONField(format = "yyyy-MM-dd HH:mm")
private Date modifyTime;
private List<Grade> gradeList;
public List<Grade> getGradeList() {
return gradeList;
}
public void setGradeList(List<Grade> gradeList) {
this.gradeList = gradeList;
}
@SuppressWarnings("deprecation")
public Integer getAge() {
Date date = new Date();
return date.getYear() - stuBirthday.getYear();
}
public String getStuNo() {
return stuNo;
}
public void setStuNo(String stuNo) {
this.stuNo = stuNo == null ? null : stuNo.trim();
}
public String getClassNumber() {
return classNumber;
}
public void setClassNumber(String classNumber) {
this.classNumber = classNumber == null ? null : classNumber.trim();
}
public String getStuName() {
return stuName;
}
public void setStuName(String stuName) {
this.stuName = stuName == null ? null : stuName.trim();
}
public String getStuGender() {
return stuGender;
}
public void setStuGender(String stuGender) {
this.stuGender = stuGender == null ? null : stuGender.trim();
}
public Date getStuBirthday() {
return stuBirthday;
}
public void setStuBirthday(Date stuBirthday) {
this.stuBirthday = stuBirthday;
}
public Date getEnterDate() {
return enterDate;
}
public void setEnterDate(Date enterDate) {
this.enterDate = enterDate;
}
public String getCreateBy() {
return createBy;
}
public void setCreateBy(String createBy) {
this.createBy = createBy == null ? null : createBy.trim();
}
public Date getCreateTime() {
return createTime;
}
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
public String getModifyBy() {
return modifyBy;
}
public void setModifyBy(String modifyBy) {
this.modifyBy = modifyBy == null ? null : modifyBy.trim();
}
public Date getModifyTime() {
return modifyTime;
}
public void setModifyTime(Date modifyTime) {
this.modifyTime = modifyTime;
}
}grade Bean:
package com.xuan.pojo;
import java.util.Date;
import java.util.List;
import com.alibaba.fastjson.annotation.JSONField;
public class Grade {
private String gradeNo;
private String gradeName;
private String createBy;
@JSONField(format="yyyy-MM-dd HH:mm")
private Date createTime;
private String modifyBy;
@JSONField(format="yyyy-MM-dd HH:mm")
private Date modifyTime;
public String getGradeNo() {
return gradeNo;
}
public void setGradeNo(String gradeNo) {
this.gradeNo = gradeNo == null ? null : gradeNo.trim();
}
public String getGradeName() {
return gradeName;
}
public void setGradeName(String gradeName) {
this.gradeName = gradeName == null ? null : gradeName.trim();
}
public String getCreateBy() {
return createBy;
}
public void setCreateBy(String createBy) {
this.createBy = createBy == null ? null : createBy.trim();
}
public Date getCreateTime() {
return createTime;
}
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
public String getModifyBy() {
return modifyBy;
}
public void setModifyBy(String modifyBy) {
this.modifyBy = modifyBy == null ? null : modifyBy.trim();
}
public Date getModifyTime() {
return modifyTime;
}
public void setModifyTime(Date modifyTime) {
this.modifyTime = modifyTime;
}
}