BootstrapTable之前端导出、字段排序、表头固定
BootstrapTable是一个高效的表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。
前言
本文章记录的是利用BootstrapTable实现数据展示、数据导出(前端导出)、字段排序、表头固定(设置height属性即可)
提示:以下是本篇文章正文内容,下面案例可供参考
一、BootstrapTable实现数据展示
直接上代码:
<div class="col-md-12">
<iframe id="frameForExport" src="" style="visibility: hidden;width: 0;height: 0;padding: 0;margin: 0;border: 0" ></iframe><!-- excel导出功能使用 -->
<div class="portlet light container-ridius">
<div class="panel-body">
<%-- <button type="button" onclick="exportData()" class='btn btn-mini btn-info'>导出</button>--%>
<table data-toggle="table" id="table"
data-classes="table table-hover" data-striped="true"
data-pagination="true" data-side-pagination="server"
data-toolbar="#toolbar" class="text-nowrap">
</table>
</div>
</div>
</div>
function renderTable() {
$("#table").bootstrapTable(
{
url : "<%=request.getContextPath()%>/rest/feeReport/getRollDepartmentList", //后端请求地址
clickToSelect : true,
//showToggle : true,
dataType : "json",
pageNumber : 1,
pagination: false, //是否显示分页(*)
height:590, //加入height属性即可对表头进行固定
sortable : true, //所在列是否排序
showExport: true, //是否显示导出
buttonsAlign: "left", //按钮位置
// exportOptions: {
// fileName: '',//下载文件名称
// },
//pageSize : 20,
//pageList : [ 5, 10, 20 ],
//sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*),
contentType : "application/x-www-form-urlencoded;charset=utf-8",
method : 'post',
cache :false,
//dataField : "data",
//是否显示详细视图和列表视图的切换按钮
queryParams : function(params) {//自定义参数,这里的参数是传给后台的,我这是分页用的
return {
//这里的params是table提供的
//offset : params.offset,//从数据库第几条记录开始
//limit : params.limit,//找多少条
year:$('#s_year').val(),
yearMonth:$('#s_yearMonth').val(),
property:$('#s_property').val(),
SBU:$('#s_SBU').val(),
project:$('#s_project').val(),
subjectLevel:$('#s_subjectLevel').val(),
versionCode1:$('#s_versionCode1').val(),
versionCode2:$('#s_versionCode2').val(),
'sortName': this.sortName, //排序使用
'sortOrder': this.sortOrder, //排序使用
};
},
columns : [
[
{
field : 'FIELD',
title : 'TITLE',
align : 'center',
rowspan:2
},
{
field : 'FIELD',
title : 'TITLE',
align : 'center',
rowspan:2
},
{
field : 'FIELD',
title : 'TITLE',
align : 'center',
rowspan:2
},
{
field : 'FIELD',
title : 'TITLE',
align : 'center',
rowspan:2
},
field : 'FIELD',
title : 'TITLE',
align : 'center',
colspan:6
},
{
field : 'FIELD',
title : 'TITLE',
align : 'center',
colspan:6
}
],
[
{
field : 'FIELD',
title : 'TITLE',
sortable : true, //所在列是否排序
align : 'center'
},
{
field : 'FIELD',
title : 'TITLE',
sortable : true, //所在列是否排序
align : 'center'
},
{
field : 'FIELD',
title : 'TITLE',
sortable : true, //所在列是否排序
align : 'center'
},
{
field : 'FIELD',
title : 'TITLE',
sortable : true, //所在列是否排序
align : 'center'
},
{
field : 'FIELD',
title : 'TITLE',
sortable : true, //所在列是否排序
align : 'center'
},
{
field : 'FIELD',
title : 'TITLE',
sortable : true, //所在列是否排序
align : 'center'
},
{
field : 'FIELD',
title : 'TITLE',
sortable : true, //所在列是否排序
align : 'center'
},
{
field : 'FIELD',
title : 'TITLE',
sortable : true, //所在列是否排序
align : 'center'
},
{
field : 'FIELD',
title : 'TITLE',
sortable : true, //所在列是否排序
align : 'center'
},
{
field : 'FIELD',
title : 'TITLE',
sortable : true, //所在列是否排序
align : 'center'
},
{
field : 'FIELD',
title : 'TITLE',
sortable : true, //所在列是否排序
align : 'center'
},
{
field : 'FIELD',
title : 'TITLE',
sortable : true, //所在列是否排序
align : 'center'
},
]
],
onLoadSuccess: function () {
//alert("数据加载成功!");
},
onLoadError: function () {
//alert("数据加载失败!");
},
});
如图所示:
二、字段排序
即上述代码的sortable : true属性;上图中字段上会出现上下的箭头
'sortName': this.sortName, //排序使用
'sortOrder': this.sortOrder, //排序使用
将字段回传后台在sql中按需排序即可:
<if test="input.sortName != null and input.sortName != '' and input.sortOrder != null and input.sortOrder != ''">
ORDER BY ${input.sortName} ${input.sortOrder}
</if>
二、数据导出(使用BootstrapTable可实现前端导出,即前端表中是数据显示什么,导出的就是什么)
即上述代码的 showExport: true, buttonsAlign: “left”, 两个属性可实现导出,但是BootstrapTable自定义的按钮很难看,可通过下述代码实现自定义按钮:
自定义按钮导出数据
function exportData(){
$('#table').tableExport({
type: 'excel',
exportDataType: "all",
//ignoreColumn: [0],//忽略某一列的索引
fileName: '',//下载文件名称
onCellHtmlData: function (cell, row, col, data){//处理导出内容,自定义某一行、某一列、某个单元格的内容
console.info(data);
return data;
},
});
}
总结
BootstrapTable是一个很好用的表格插件,但是在使用中遇到了表头固定,表中数据和表头对不齐的问题,至今也没有解决吗,如有解决的大佬请指导我。