BootstrapTable实现ElementUI表格展开⾏效果在使⽤Bootstrap时候，有时候表格要显⽰的内容过多，如果都显⽰的话，表格就会显得太长
在ElementUI中可以设置展开⾏，这样部分数据可以隐藏，需要的时候显⽰出来。
ElementUI table 展开显⽰效果：
Bootstrap 实现过程
实现效果：
1. 表格数据加载
2. 在表格加载之后为表格添加展开事件
代码如下：
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#table').BootstrapTable({
url: '************',        //请求后台的URL（*）
method: 'post',                      //请求⽅式（*）
toolbar: '#toolbar',                //⼯具按钮⽤哪个容器
striped: false,                      //是否显⽰⾏间隔⾊
cache: false,                      //是否使⽤缓存，默认为true，所以⼀般情况下需要设置⼀下这个属性（*）
pagination: true,                  //是否显⽰分页（*）
sortable: false,                    //是否启⽤排序
sortOrder: "asc",                  //排序⽅式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server",          //分页⽅式：client客户端分页，server服务端分页（*）
pageNumber: 1,                      //初始化加载第⼀页，默认第⼀页
pageSize: 10,                      //每页的记录⾏数（*）
pageList: [10, 25, 50, 100],        //可供选择的每页的⾏数（*）
search: false,                      //是否显⽰表格搜索，此搜索是客户端搜索，不会进服务端，所以，个⼈感觉意义不⼤            strictSearch: true,
showColumns: false,                  //是否显⽰所有的列
showRefresh: false,                  //是否显⽰刷新按钮
minimumCountColumns: 2,            //最少允许的列数
clickToSelect: true,                //是否启⽤点击选中⾏
uniqueId: "ID",                    //每⼀⾏的唯⼀标识，⼀般为主键列
showToggle: false,                    //是否显⽰详细视图和列表视图的切换按钮
cardView: false,                    //是否显⽰详细视图
detailView: false,                  //是否显⽰⽗⼦表
columns: [{
checkbox: true
}, {
field: 'Expand',
name: 'Expand',
align: table_align,
title: ' ',
class: 'expand-column',
formatter: function (value, row, index) {
return '<i class="fa fa-chevron-right expand-row" aria-hidden="true" ></i> ';
}
}, {
field: 'Column1',
name: 'Column1',
align: table_align,
title: '列1',
class: 'expand-first-column',
events: detailOperateEvents
}, {
field: 'Column2',
name: 'Column2',
align: table_align,
title: '列2'
}, {
element表格横向滚动条field: 'Column3',
name: 'Column3',
align: table_align,
title: '列3'
}, {
field: 'Column4',
name: 'Column4',
align: table_align,
title: '列4'
}, {
field: 'Column5',
name: 'Column5',
align: table_align,
title: '列5'
}, {
field: 'Column6',
name: 'Column6',
align: table_align,
visible: false,
title: '列6'
}, {
field: 'Column7',
name: 'Column7',
align: table_align,
title: '列7'
}, {
field: 'operate',
title: '操作',
align: 'center',
events: operateEvents,
width: '10%',
formatter: operateFormatter
}],
onLoadSuccess: function () {
// 初始化展开按钮
expandRow();
}
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = {
pageSize: params.limit,  //页⾯⼤⼩
pageIndex: params.offset / params.limit + 1  //页码
};
return temp;
};
return oTableInit;
};
expandRow ⽅法
// 展开⾏
function expandRow() {
$('.expand-row').click(function (e) {
var row = e.target.parentElement.parentElement;
var id = row.dataset.uniqueid;
// 如果是展开操作
if (pand == undefined || pand == 'false') {
$(this).removeClass('fa-chevron-right');
$(this).addClass('fa-chevron-down');
pand = true;
/
/ 获取⾏信息
var rowInfo = $("#table").bootstrapTable('getRowByUniqueId', id);
// 创建⾏
var tr = '<tr>';
tr += '<td colspan="11">';
tr += '<div>';
tr += '<div class="table-item"><label>隐藏列1：</label><div class="table-item__content">' + rowInfo.CloumnA+ '</div></div>';            tr += '<div class="table-item"><label>隐藏列2：</label><div class="table-item__content">' + rowInfo.CloumnB+ '</div></div>';            tr += '</div>';
tr += '</td>';
tr += '</tr>';
$(row).after(tr);
} else {
// 如果是收缩操作
$(this).addClass('fa-chevron-right');
$(this).removeClass('fa-chevron-down');
pand = false;
var rowIndex = wIndex;
$('#tb_main')[0].deleteRow(rowIndex + 1);
}
});
}
  style 样式：
.
expand-column{
border-right:none !important;
}
.expand-first-column{
border-left:none !important;
}
.table-item{
display: flex;
margin-left:5%;
margin-bottom:5px;
}
.
table-item>label{
width:100px;
color: dimgrey;
}
.table-item__content {
font-size: 14px;
word-break: break-all;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。