太太有成就感了,刚解决一个问题,完全没有学过bootstrap,终于把数据通过bootstrapTable()方法实现了,对我来讲感觉特别巴适,写个博客分享分享。
先给大家讲一下大概的流程
用户进入界面,通过ajax的url请求地址找到RequestMapping注解对应的方法,
执行方法返回json格式数据,ajax的success属性定义方法开始将数据渲染到表格中,下面请看详细流程操作:
1.先是加载一个表格,现在是没有任何数据的,只有头部的“日志编号”、“日志标题”、“发布人”、“发布时间”、“执行时间”、“发布内容”。
$(function () {
$('#table').bootstrapTable({
method: "get",//请求方式
striped: true,//是否隔行变色
singleSelect: false,
dataType: "json",
pagination: true, //分页
pageSize: 10,//每页的记录行数
pageNumber: 1,//初始化加载第一页,默认第一页
search: false, //显示搜索框
// contentType: "application/x-www-form-urlencoded",
queryParams: null,
columns: [
{
checkbox: "true",
align: 'center',
valign: 'middle'
},
{
title: "日志编号",
field: 'id',//实体类对应的id
align: 'center',
valign: 'middle'
},
{
title: '日志标题',
field:'title',//实体类对应的title
align: 'center',
valign: 'middle'
},
{
title: '发布人',
field:'issuer',//实体类对应的issuer
align: 'center'
},
{
title: '发布时间',
field:'issuerdate',//实体类对应的issuerdate
align: 'center',
valign: 'middle'
},
{
title: '执行时间',
field:'implementdate',//实体类对应的implementdate
align: 'center',
valign: 'middle'
},
{
title: '发布内容',
field:'issuercontent',//实体类对应的issuercontent
align: 'center'
},
{
title: '操作',
align: 'center',
formatter: function (value, row) {
var e = '<button button="#" mce_href="#" οnclick="delWork(\'' + row.WORKRECORDID + '\')">审批</button> '
return e;
}
}
]
});
});
2.开始请求数据库数据(RequestMapping注解方式,其它的方式也是同样的道理)
$.ajax({
type: "get",
url: "getWorkList",
data:{"dtStart":workTitle,"dtEnd":Publisher,"dtDate":workTime},
dataType: "json",
success: function (msg) {
//这一部分是最最最主要的代码,之前我一直在这里打转,可能是之前的思维太狭隘了
if (msg) {
var NoticeTableData = msg;
//将数据库中获取到的数据渲染到id为"table"的这个表格中
$('#table').bootstrapTable("load", NoticeTableData);
}
}
})
3.回到上面的bootstrapTable()里面,将每一列的"field"属性修改为"msg"返回的对象属性名,不懂看我实体类和bootstrapTable()的"field"做对比.
public class Work {
// 编号
private int id;
// 日志内容
private String title;
// 发布人
private String issuer;
// 执行人
private int executor;
// 发布时间
@JSONField(format = "yyyy-MM-dd HH:mm:ss")
private Date issuerdate;
// 执行时间
@JSONField(format = "yyyy-MM-dd HH:mm:ss")
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date implementdate;
// 发布内容
private String issuercontent;
// 用户对象
private Person person;
// 封装(此处省略十万八千字)