bootstrapTable()请求数据,渲染到表格上

太太有成就感了,刚解决一个问题,完全没有学过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;
// 封装(此处省略十万八千字)