BootstrapTable之四舍五入处理数据、列的折叠或显示
前言
随着工作和学习的积累,又学会了关于BootstrapTable的两个实用小功能,在此记录一下。
一、四舍五入处理数据
1、四舍五入处理数据和前面的添加千分位分隔符实现方式一样,只需将要处理的数据用Math.round()处理一下即可,具体代码如下:
//显示千分位分隔符
function showSeparator(value)
{
if (value == undefined)
{
return "";
}else{
value = Math.round(value);
return Number(value).toLocaleString();
}
}
2、接下来只需在对应的字段上调用次函数即可,具体代码如下:
{
field : 'SJ_MONTH12_FEE_TOTAL',
title : '实际',
sortable : true, //所在列是否排序
align : 'right',
//显示千分位分隔符及四舍五入显示
formatter: function (value) {
return showSeparator(value);
}
},
二、列的折叠或显示
1.正常情况下应该是通过表头点击事件,来隐藏或者显示,由于我的项目中表头的点击事件被占用了,因此通过别的方法实现,下面仍展示一下BootstrapTable的表头点击事件,具体代码如下:
$(document).on("click","th",function() {
var field = $(this).attr("data-field");// 获取表格标题的data-field属性
alert(field);
})
2.列的折叠或显示,通过BootstrapTable自带的配置即可实现,具体代码如下:
//隐藏(折叠)
$("#hide-column-button").click(function(){
$table.bootstrapTable('hideColumn', 'DEPARTMENT_MOTIVATE_SORT');
$table.bootstrapTable('hideColumn', 'DEPARTMENT_SORT');
})
// 显示
$("#show-column-button").click(function(){
$table.bootstrapTable('showColumn', 'DEPARTMENT_MOTIVATE_SORT');
$table.bootstrapTable('showColumn', 'DEPARTMENT_SORT');
})
总结
BootstrapTable 两个特别简单使用的功能,记录于此。