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');