boostrapTable.js基本使用和里面常用的方法使用(学习篇)

1、要使用，首先要引入相关的js文件，和css样式文件

//引入表格样式文件
<link rel="stylesheet" type="text/css" href="../css/bootstrap-table.min.css" />
//引入jquery，后面写js用这个方便
<script src="../js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
//引入表格js
<script src="../js/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
//将表格翻译为中文的js
<script src="../js/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>

2、html中定义一个table标签，添加id

<table id="mytable" class="table"></table>

3、发送请求，获取数据渲染表格

window.onload = function() {
    // 获取表格数据
    $("#mytable").bootstrapTable({
    	//接口
        url: PortalMessage + 'v1/notification/message?accountId='+accountId+'&pageRows=100000',
        contentType: "application/x-www-form-urlencoded",
        method: 'GET',
        pageNumber: 1,
        pagination: true,//是否开启分页
        sidePagination: 'client',
        pageSize: 5, //每页的记录行数（*）
        pageList: [5, 10], //可供选择的每页的行数（*）
        queryParamsType: "limit",
        // 请求头
		ajaxOptions:{
		    headers: {
				"token": 'qazwsxedcrfvtgbyhnujmikolppoliku',
				"sign":"123",
				"appKey":"23145687971236589",
			}
		},
        queryParams: function(params) {//传参
            //获取已读未读状态
            var text = document.getElementsByClassName("current")[0].innerText;
            var temp = null;
            if (text == "全部") {
                temp = {
                    pageIndex: 1, //页面大小
                    pageRows: params.limit
                }
            } else {
                temp = {
                    pageIndex: 1, //页面大小
                    pageRows: params.limit,
                    state: text //0:未读 1:已读
                }
            }
            return temp;
        },
        responseHandler: function(res) {
            return res.data.pageDataList;
        },
        columns: [{
                field: '',
                checkbox: true,//复选框
                align: 'center',//水平居中
                valign: 'middle'//垂直居中
                formatter: formatCheck//自定义方法
            }, {
                title: '消息标题',
                field: 'subject',
                sortable: true, //是否显示排序
                align: 'center', //水平居中
                valign: 'middle' //垂直居中
            }, {
                title: '状态',
                field: 'state',
                align: 'center',
                valign: 'middle'
            },
            {
                title: '发送时间',
                field: 'sendAt',
                align: 'center',
                valign: 'middle',
                formatter: formatTime//自定义时间
            },
            {
                title: '操作',
                field: '',
                align: 'center',
                valign: 'middle',
                formatter: formatLook//添加操作按钮，类似删除，增加，编辑等
            },
            {
                title: '开票状态',
                field: 'status',
                align: 'center',
                valign: 'middle',
                formatter: function(value, row, index) {//也可以这样自定义方法
                    if (value == 0) {
                        value = "未开票";
                    } else if (value == 1) {
                        value = "开票中";
                    } else {
                        value = "已完成"
                    }
                    return value;
                }
            },
            //条件判断，设置样式
            cellStyle: function(value, row, index) {
                    if (value == "1") { //已经提交数据，颜色变化
                        return {
                            css: {
                                'background': '#DCFCCF',
                            }
                        }
                    }
                    return {};
            }
        ],
        // 全选选中
        onCheckAll: function(row) {
            console.log(row,'row1');
        },
        // 全选取消
        onUncheckAll: function(row) {
           console.log(row,'row2');
        },
        // 单选选中
        onCheck: function(row) {
            console.log(row,'row3');
        },
        // 单选取消
        onUncheck: function(row) {
            console.log(row,'row4');
        },
    })
}

//1、 复选框，判断禁用条件
function formatCheck(value, row, index) {
    //已读状态下不能选择删除
    if (row.messageStatus != '' && row.messageStatus != '0') {
        return {
            disabled: true
        }
    }
}
//2、 时间操作
function formatTime(value, row, index) {
    return formatDate(value)
}
//3、日期时间处理
function formatDate(now) {
    const t = new Date(now)
    var year = t.getFullYear();
    var month = t.getMonth() + 1;
    var date = t.getDate();
    return year + "/" + month + "/" + date;
}
//4、添加操作按钮
function formatLook(value, row, index) {
    var htm = "<button οnclick=\"handelLook('" + row.messageId + "')\">查看</button>";
    return htm;
}
// 5、点击查看按钮操作
function handelLook(messageId) {
}

4、boostrapTable中的一些常用方法
(1)、获取复选框选中的数据

var rows = $("#mytable").bootstrapTable('getSelections');