boostrapTable.js基本使用和里面常用的方法使用(学习篇)
boostrapTable.js基本使用和里面常用的方法使用(学习篇)
原创
已于 2022-03-18 11:26:33 修改
·
859 阅读
·
1
·
0
·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：
#前端
#bootstrap
于 2022-03-04 14:12:11 首次发布
web前端
专栏收录该内容
41 篇文章
订阅专栏
本文档详细介绍了如何在网页中使用BootstrapTable库来创建动态表格。首先，需要引入BootstrapTable的CSS和JS文件，以及jQuery库。然后，在HTML中定义一个表格并设置ID。接着，通过JavaScript在窗口加载完成后发送GET请求获取数据，并配置BootstrapTable参数，如分页、排序、查询参数和自定义列格式。此外，还展示了如何处理时间格式、添加操作按钮以及监听各种选中事件。最后，文中列举了BootstrapTable的一些常用方法，如获取选中行数据。
1、要使用，首先要引入相关的js文件，和css样式文件
//引入表格样式文件
//引入jquery，后面写js用这个方便
//引入表格js
//将表格翻译为中文的js
2、html中定义一个table标签，添加id
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 = "";
return htm;
}
// 5、点击查看按钮操作
function handelLook(messageId) {
}
4、boostrapTable中的一些常用方法 (1)、获取复选框选中的数据
var rows = $("#mytable").bootstrapTable('getSelections');
