SSM pageHelper + 前端 Bootstraptbale分页 + 解析嵌套的二级json数据

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" οnclick="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;
    }
}






版权声明：本文为qq_40124831原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。