排序、单元格内容自定义、单元格内按钮事件、自定义行样式、单元格点击事件
<table id="my-bootstrap-table"></table>
页面初始化时对表格进行配置(angular--构造函数前、vue--data() {return {}中)
let tableData = [
{
field: 'executiondatenext',
title: "下次校验日期",
sortable: true, // 是否排序
},{
field: 'enclosure',
width: 200,
title: '附件',
// 自定义单元格内容
formatter: (value, row, index)=>{
let html = ``
if(value.length){
value.map((val,index)=>{
// 展示最后一条附件的内容
if(index==value.length-1){
html += `
<div style="display: flex;">
<input style='width:300px;' type="text" class="form-control input-sm" value="${val.name}" readonly />
<button id="instr-btn" class="glyphicon glyphicon-download-alt">
<a href="/api/stock/download?id=${val.code}">下载</a>
</button>`
}
})
}
// 附件数量大于1时,显示弹窗按钮
if(value.length>1){
html += `<button id='moreBtn'>更多下载</button>`
}
html += '</div>'
return html
},
// 按钮点击事件(通过按钮ID,为其添加点击事件)
events: {
'click #moreBtn': (e,value,row,index)=>{
// 弹窗事件
this.download(value)
}
}
}
]
对bootstrapTable进行配置
setTable(){
// 销毁后,表格才能重新加载
$('#my-bootstrap-table').bootstrapTable('destroy');
$('#my-bootstrap-table').bootstrapTable({
data: this.dataList,
columns: this.tableData,
// 表格固定高度(会使表头也固定)
// height: 530, // 固定高度会使排序时单元格无法对齐
// 自定义行样式
rowStyle: (row,index)=>{
return {
css: {
// 字体颜色
color: row.color
}
}
},
// 单击元点击事件
onClickCell: (field, value, row, $element)=>{
if(field=='enclosure'){
// console.log(field, value, row, $element);
}
},
});
}
问题①、bootstrapTable固定表格高度会使点击排序后单元格无法对齐
方法一:
解决BootstrapTable设置height属性后,表格不对齐的问题 - 百度文库https://wenku.baidu.com/view/00f667f430d4b14e852458fb770bf78a65293af4.html(采用该方法后表头不固定)
方法二:
$('#instr-bootstrap-table').bootstrapTable({
// 点击排序图标时触发( name: 字段名, order: 排序方式 )
onSort: (name, order)=>{
let dom = $('.sortable');
let lengths = dom.length/2;
// 获取点击的表头名称
let title = this.tableData.filter(val=>val.field==name)[0].title
for(var i=0; i<lengths; i++){
if(dom[i].innerText==title){
// 删除class
dom[i].removeAttribute('class')
// 重置class
dom[i].setAttribute('class', 'th-inner sortable '+ order)
}
else{
// 将其他可排序字段的排序图标重置
dom[i].removeAttribute('class')
dom[i].setAttribute('class', 'th-inner sortable both')
}
}
},
})
问题②、实现多层表头:( 示例 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ )
columns:[
[{ "title": "饮品", "align": 'center', "colspan": 5 } ],
[
{
field: 'name',
title: "类型",
align: 'center',
colspan: 1, // 跨列
rowspan: 2 // 跨行
},{
title: "娃哈哈",
align: 'center',
colspan: 2,
rowspan: 1
},{
title: "农夫山泉",
align: 'center',
colspan: 2,
rowspan: 1
}
],
[
{
field: 'salesVolume1',
align: 'center',
title: '销量',
},{
field: 'Proportion1',
align: 'center',
title: '占比',
},{
field: 'salesVolume2',
align: 'center',
title: '销量',
},{
field: 'Proportion2',
align: 'center',
title: '占比',
}
]
]
版权声明:本文为circles_Quan原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。