BootstrapTable之四舍五入处理数据、列的折叠或显示

最新推荐文章于 2024-10-22 17:49:07 发布

qzz12345

最新推荐文章于 2024-10-22 17:49:07 发布

阅读量1k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qzz12345/article/details/124595484

版权

本文介绍了如何在BootstrapTable中进行数据四舍五入处理和列的折叠显示。通过使用Math.round()函数结合toLocaleString()方法，可以实现数值的四舍五入并添加千分位分隔符。同时，通过调用BootstrapTable的API，可以方便地控制列的隐藏与显示，如`hideColumn`和`showColumn`方法。这些技巧有助于提升表格的易读性和用户体验。

摘要由CSDN通过智能技术生成

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');
        
        })