Bootstrap-table表格插件的使⽤⽅法前⾔
上次写了⼀个，但除了这个特点没什么优点了，接下写的是我们常⽤的Bootstrap-table表格插件
正⽂
官⽹：
有两个翻译API的⽹址：
在使⽤时需要引⼊如下⼏个⽂件：
bootstrap.min.css
bootstrap-table.css
jquery.js
bootstrap.js
bootstrap-table.js
bootstrap-table-zh-CN.js（中⽂插件）
客户端分页例如下：
// ⾸先销毁表格
$('#fwfx_tb').bootstrapTable('destroy');
// 初始化表格，动态从服务器加载数据
$('#fwfx_tb').bootstrapTable({
pagination: true, //启动分页
striped: true, //设置为 true 会有隔⾏变⾊效果
cache: fal, //是否使⽤缓存，默认为true，所以⼀般情况下需要设置⼀下这个属性（*）
pageSize: 20,//初始页记录数
sortable: true, //排序
pageList: [10，20], //记录数可选列表
smartDisplay: fal, //程序⾃动判断显⽰分页信息
columns: [{
title: '序号',
align: 'center',
halign: 'center',
formatter: function (value, row, index) {
return index + 1;
}
}, {
field: 'name',
title: '服务名',
align: 'center',
sortable:true//排序
}, {
field: 'sum',
title: '⾦额',
align: 'center'
}, {
field: 'PV',
title: '访问量',
align: 'center'
}
data: tableData
});
服务器端分页例如下：
$('#ur_content_tab').bootstrapTable('destroy');
// 初始化表格，动态从服务器加载数据
$('#ur_content_tab').bootstrapTable({
url: "admin/query",
method: 'post',
sidePagination: 'rver', //表⽰服务端请求
queryParams:logUl,//请求服务器时所传的参数
ajaxOptions:{ //提交ajax请求时的附加参数
headers: {
'token': '94564375541867846'//这⾥传的token是根据你的前后台交互情况
}
},
toolbar : '#toolbar', // ⼯具按钮⽤哪个容器
pagination: true, //默认为fal，表格的底部⼯具栏不会显⽰分页条
queryParamsType:'',//查询参数组织⽅式，必须设置为空，否则没有页码params.pageNumber
striped: true, //设置为 true 会有隔⾏变⾊效果
pageSize: 20, //每页显⽰⾏数
pageList:[10,20,50],
maintainSelected: true, //在点击分页按钮或搜索按钮时，将记住checkbox的选择项
smartDisplay: fal, //程序⾃动判断显⽰分页信息
clickToSelect: true, //是否启⽤点击选中⾏
toolbarAlign: 'right', //指定 toolbar ⽔平⽅向的位置
uniqueId: 'urId', //为每⼀⾏指定唯⼀标识符
idField: 'urId', //指定主键列
paginationDetailHAlign:'right',//指定分页详细信息在⽔平⽅向的位置
columns: [{
title: '序号',
align: 'center',
halign: 'center',
formatter: function (value, row, index) {
var options = $table.bootstrapTable('getOptions');
return options.pageSize * (options.pageNumber - 1) + index + 1;
}
},{
field: 'urId',
title: '⽤户ID',
align: 'center',
},
{
field: 'urname',
title: '⽤户名称',
align: 'center'
},
{
field: 'roleName',
title: '⾓⾊',
align: 'center'
},
{
field: 'createTime',
title: '创建时间',
align: 'center',
formatter : function(value, row, index) {
return fmtDate(value)
}
},
{
field: 'status',
title: '账户状态',
align: 'center'
},
{
field: 'urId',
title: '操作',
align: 'center',
width: 350,
formatter: operateFormatter//在这⾥我的⽬的是添加按钮
}],
formatNoMatches: function(){
return "没有相关的匹配结果";
},
formatLoadingMessage: function(){
return "请稍等，正在加载中。。。";
},
responHandler:function(res){ //加载服务器数据之前的处理程序，可以⽤来格式化数据，服务器返回的数据要在这⾥使⽤
sCode == "403"){
localStorage.clear();
parent.location.href = location403;
} el sStatus == 0) {
for(var i = 0; i < ws.length; i++) {
ws[i].status) {
} el {
}
}
var cusData = {//这⾥的处理数据是根据你前后台交互的数据情况来的
"rows": ws,
"total": al
}
return cusData;
} el {
toastr.sMsg);
return;
}
}
});
function logUl(params){
pageNumbers = params.pageNumber;
pageSizes = params.pageSize;
return {
"pageNo": params.pageNumber,
"pageSize": params.pageSize,
"urname": queryVal
}
}
function operateFormatter(value, row, index){ //添加按钮
var rows = JSON.stringify(row);
// 根据传过来的参数添加不同的class
var classED = 'enabledE';
var classEDVal;
if(row.status == '启⽤') {
classED = 'enabledD';
classEDVal = '禁⽤';
} el {
classED = 'enabledE';
classEDVal = '启⽤';
}
// onclick=modif(' + value + "," + rows + "," + index + ')
return [
'<div class="modify operationBtn" title="重置密码" table-data=' + rows + '><i class="glyphicon glyphicon-pencil"></i>重置密码</div>',
'<div class="enabled operationBtn '+ classED + '" title="禁⽤/启⽤" table-data=' + rows + '><i class="glyphicon glyphicon-ur"></i>' + classEDVal + '</div>', '<div class="del operationBtn" title="删除" table-data=' + rows + '><i class="glyphicon glyphicon-trash"></i>删除</div>'
].join("")
}
拖动列来控制列宽的插件：
引⼊bootstrap-table-resizable.js和colResizable-1.6.min.js
$("#exampleTable").colResizable({
liveDrag: true,//实时显⽰滑动位置
gripInnerHtml: "<div class='grip'></div>",
//draggingClass: "dragging",
postbackSafe: true,//刷新后保留之前的拖拽宽度
headerOnly:true,
resizeMode:"overflow",
//onResize: onSampleResized
});
⼀些功能实现的样例：
1.选中
$('#generateClueObjectTable').bootstrapTable('checkBy', { field:"这⾥是选中⾏列字段", values:[这⾥选中⾏是列字段内的值，可多个]});
只可选中⼀⾏，使⽤check.bs.table事件（当⽤户选中⼀⾏时触发的事件）
$('#generateClueObjectTable').on('check.bs.table', function (row,element,input) {
if (_this.addRearchReportTransObjectJudge) {
let lections = $("#generateClueObjectTable").bootstrapTable('getSelections');
if (lections.length > 1) {
$('#generateClueObjectTable').bootstrapTable('uncheck',input[0].datat.index);
_this.$('只能选择⼀个对象');
}
}
});
2.禁⽌全选操作，例：
check-all.bs.table 全选事件
$('#generateClueObjectTable').on('check-all.bs.table', function (row,element,input) {
if(_this.addRearchReportTransObjectJudge) {
$("#generateClueObjectTable").bootstrapTable('uncheckAll');//阻⽌全选
}
});
3.为复选框(checkbox)禁⽤或选中，例：
在复选框(checkbox)列中使⽤formatter
formatter: function (value, row, index) {
return {
disabled : true//设置是否可⽤
checked : true//设置选中
}
}
4.在表格中嵌套表格，例：
columns:[{
title: '部门',
align: 'left',
sortable: fal,
formatter: function (value, row, index) {
return row.deptName;
}
},{
field: '',
title: "<table id=\"statisticTable\" class=\"tables\" style='border:1px solid #bdd5dd;'>" +
"<thead><tr>" +
"<th style=\"width:9%;padding-left: 10px;\" class=\"statisticTableTD\">状态</th>" +
"<th style=\"width:9%;padding-left: 10px;\" class=\"statisticTableTD\">数量</th>" +
"<th style=\"width:9%;padding-left: 10px;\" class=\"statisticTableTD\">⾃主调研</th>" +
"<th style=\"width:9%;padding-left: 10px;\" class=\"statisticTableTD\">上级交办</th>" +
"</tr></thead>" +
"</table>",
align: 'left',
sortable: fal,
formatter: function (value, row, index) {
var table = "<table class='table-keyValue' style='border:1px solid #d0e3e9;'>";
$.each(row.stats, function (i, item) {
table += "<tr><td style=\"width:9%;\" class='statisticTableTD '>" + (item.statusCn == null ? 0 : item.statusCn) + "</td>"
+ "<td style=\"width:9%;\" class='statisticTableTD'>" + (item.number == null ? 0 : item.number) + "</td>"
+ "<td style=\"width:9%;\" class='statisticTableTD'>" + (item.source1 == null ? 0 : item.source1) + "</td>"
+ "<td style=\"width:9%;\" class='statisticTableTD'>" + (item.source0 == null ? 0 : item.source0) + "</td>" + "</tr>";
});
table += "</table>";
return table;
}
}]
5.实现多层表头
colspan 每格所占的列数
rowspan 每格所占的⾏数
columns: [
[{
title: '这是标题',
field: '',
align: 'center',
valign: 'middle',
colspan: 10
}],
[{
title: '这是标题1',
field: '',
align: 'center',
valign: 'middle',
colspan: 1,
rowspan: 2
}, {
title: '这是标题2',
field: '',
align: 'center',
valign: 'middle',
colspan: 4,
rowsapn: 1
}, {
title: '这是标题3',
field: '',
align: 'center',
valign: 'middle',
colspan: 5,
rowsapn: 1
}],
[{
field: 'title1', //列ID同时也是指定要显⽰的数据的ID
title: '标题',
width: 100,
align: 'center',
valign: 'middle',
sortable: true
},
......
]
]
下⾯是遇到的问题：
问题1.在设置为服务器端分页时，获取页码的params.pageNumber会返回undefined
这是因为queryParamsType的默认参数是limit，在官⽅说明中这样解释:
"如果 queryParamsType = 'limit' ，返回参数必须包含limit, offt, arch, sort, order 否则, 需要包含: pageSize, pageNumber, archText, sortName, sortOrder. 返回fal 将会终⽌请求"
有两种解决⽅法:
1.为queryParamsType传空参数，即queryParamsType : ""，这时没有params.limit，但可⽤params.pageSize来代替
2.修改源码
⾸先在bootstrap-table.min.js中搜索 "limit"===this.options.queryParamsType&& （完全复制过去搜索，当然因为版本的原因，⼀些版本代码细微处可能不太⼀样，但是
肯定跟limit有关）找到下⾯的代码⽚段：
"limit"===this.options.queryParamsType&&(i={arch:i.archText,sort:i.sortName,order:i.sortOrder},this.options.pagination&&(i.offt=this.options.pageSize===this.options.formatAllRows()?0:this.options.pageSize*(this.options.pageNumber-1),i 可以看到在this.options.pagination&&后⾯的括号中有i.offt=...和i.limit=...的代码，
在i.limit=this.options.pageSize===this.options.formatAllRows()?alRows:this.options.pageSize后⾯加上,i.pageNumber=this.options.pageNumber（记得
⼀定要英⽂逗号分隔）
最终修改后结果如下：
"limit"===this.options.queryParamsType&&(i={arch:i.archText,sort:i.sortName,order:i.sortOrder},this.options.pagination&&(i.offt=this.options.pageSize===this.options.formatAllRows()?0:this.options.pageSize*(this.options.pageNumber-1),i 这样就可以通过params.pageNumber取到页码
问题2：在向表格内写⼊⾃定义元素时在列中使⽤formatter⽅法，但在元素中不可直接添加事件，否则⽆效，只可使⽤js获取元素后添加事件.
问题3：在向表格内写⼊⾃定义元素时在列中使⽤formatter⽅法，但在元素中添加⾏数据row时，必须先将json数据转为字符串才可使⽤，如：
var rows = JSON.stringify(row);
且在添加元素内时必须使⽤单引号('')包含，如：
"<span class='classDataTable transRelateName' table-data='" + JSON.stringify(row) + "'>" + lateName + "</span>"
问题4：当表格中有点击事件的⾃定义元素时，换页会导致⽆法点击?
⽅法⼀(推荐，如果在vue等框架内要保证类名和事件函数内调⽤的函数是唯⼀的)：在写点击事件时需要按如下⽅法书写：
$(document).on('click', '.rearchName', function () {}
⽅法⼆：把事件单独写⼀个函数，在表格中添加换页事件onPageChange，事件调⽤函数就⾏
问题5：设置列宽问题
⾸先要给table加个下⾯的样式:
table-layout: fixed;
然后给列设置属性:
width: 300
