关于bootstrap-table导出,自定义数据隐藏,当导出.xlsx文件时会把所有数据导出(包括自定义隐藏的列)

导出文件格式为.xls

隐藏列的js方法

	//隐藏列的方法,放在bootstrapTable的onLoadSuccess里
	//onLoadSuccess: function () {hide_column();}
    function hide_column() {
        let row_last;
        //获取id为BEmployeecarT 下的 tbody 下的 tr的最后行
        row_last = $('#table_id tbody tr:last');
        //所有行
        let rows_all = $('#table_id tbody >tr');
        //表头
        let rows_thead = $('#table_id thead >tr');
        //获取最后行的td元素
        let row_last_td = row_last.find('>td');
        //遍历列,数据为0或者为空时隐藏
        for (let i = 0; i < row_last_td.length; i++) {
            //当总计没有数据时,隐藏该列所有数据,   为转义字符
            if (row_last_td.eq(i).text() === 0 || row_last_td.eq(i).text() === ' ' || row_last_td.eq(i).text() === '' || row_last_td.eq(i).text() === '0') {
                //遍历获取所有列的td并根据判断,隐藏列数据
                for (let j = 0; j < rows_all.length; j++) {
                    rows_all.eq(j).find('>td').eq(i).hide();
                }
                rows_thead.find('>th').eq(i).hide();
            } else {
                for (let j = 0; j < rows_all.length; j++) {
                    rows_all.eq(j).find('>td').eq(i).show();
                }
                rows_thead.find('>th').eq(i).show();
            }
        }
    }

导出文件

	//导出方法
  function exportDataAll() {
        $('#table_id').tableExport({
            type: 'excel',
            exportDataType: "all",
            //表格工作区名称
            worksheetName: 'sheet1',
            ignoreColumn: [2],//忽略某一列的索引
            fileName: '文件名称' + Date.now(),//下载文件名称
            onCellHtmlData: function (cell, row, col, data) {
            	//处理导出内容,自定义某一行、某一列、某个单元格的内容
                return data;
            }
        });
    }

结果:导出文件不包含隐藏列,导出文件格式为.xls,但是当使用excel2007及以上版本打开时会出先"xxx.xls"的文件格式和扩展名不匹配。文件可能已损坏或不安全。除非您信任其来源,否则请勿打开。是否仍要打开它?的提示信息,但WPSExcel2007以下版本无提示。

解决方法:导出文件格式为.xlsx

    function exportDataAll() {
        $('#table_id').tableExport({
            type: 'excel',
            mso: {//格式转换,可以转换为excel与word
                fileFormat: 'xlsx', //转换为excel的.xlsx格式文档,适用于Excel2007及以上版本
            },
            exportDataType: "all",
            //表格工作区名称
            worksheetName: 'sheet1',
            ignoreColumn: [2],//忽略某一列的索引
            fileName: '文件名称' + Date.now(),//下载文件名称
            onCellHtmlData: function (cell, row, col, data) {
            //处理导出内容,自定义某一行、某一列、某个单元格的内容
                return data;
            }
        });
    }

问题:导出文件全部带两位有效数字。
解决方法:

    function exportDataAll() {
        $('#table_id').tableExport({
            type: 'excel',
            mso: {//格式转换,可以转换为excel与word
                fileFormat: 'xlsx', //转换为excel的.xlsx格式文档,适用于Excel2007及以上版本
                xlsx: {//配置.xlsx文件的单元格内容格式
                    formatId: {
                        numbers: 0 //保留小数点后的位数
                    }
                }
            },
            exportDataType: "all",
            //表格工作区名称
            worksheetName: 'sheet1',
            ignoreColumn: [2],//忽略某一列的索引
            fileName: '文件名称' + Date.now(),//下载文件名称
            onCellHtmlData: function (cell, row, col, data) {
            //处理导出内容,自定义某一行、某一列、某个单元格的内容
                return data;
            }
        });
    }

又会遇到问题:隐藏列会出来,怎么不导出隐藏列呐?
解决方法:
需要获取data-field属性的值,再使用$('table_id').bootstrapTable('hideColumn',data-field)去隐藏列数据。

需要获取data-field属性
js代码

	//隐藏列的方法,放在bootstrapTable的onLoadSuccess里
	//onLoadSuccess: function () {hide_column();}
    function hide_column() {
        let row_last;
        //获取id为BEmployeecarT 下的 tbody 下的 tr的最后行
        row_last = $('#table_id tbody tr:last');
        //所有行
        let rows_all = $('#table_id tbody >tr');
        //表头
        let rows_thead = $('#table_id thead >tr');
        //获取最后行的td元素
        let row_last_td = row_last.find('>td');
        //遍历列,数据为0或者为空时隐藏
        for (let i = 0; i < row_last_td.length; i++) {
            //获取data-field属性
            let data_field = rows_thead.find('>th').eq(i).attr('data-field');
            //当总计没有数据时,隐藏该列所有数据,   为转义字符
            if (row_last_td.eq(i).text() === 0 || row_last_td.eq(i).text() === ' ' || row_last_td.eq(i).text() === '' || row_last_td.eq(i).text() === '0') {
                $("#table_id").bootstrapTable('hideColumn',data_field);
            } else {
                $("#table_id").bootstrapTable('showColumn',data_field);
            }
        }
    }

效果:导出页面显示的excel表格,格式为.xlsx,不导出隐藏列;

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Bootstrap Table导出Excel,你可以使用一些插件或库来实现这个功能。以下是使用两个常用的库来导出Excel的方法: 1. 使用TableExport插件: - 首先,在你的HTML页面中引入TableExport插件和相应的依赖文件。 ```html <script src="https://cdn.jsdelivr.net/npm/table[email protected]/dist/js/tableexport.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script> ``` - 然后,在你的Bootstrap Table上添加一个导出按钮,并给它一个唯一的ID。 ```html <button id="export-btn" class="btn btn-primary">导出Excel</button> ``` - 最后,在JavaScript代码中使用TableExport来初始化并绑定导出按钮的点击事件。 ```javascript $(document).ready(function() { $('#export-btn').click(function() { $('#your-table-id').tableExport({ type: 'excel', escape: 'false' }); }); }); ``` 这里的`#your-table-id`是你的Bootstrap Table的ID,你需要将其替换为你实际使用的ID。 2. 使用SheetJS库: - 首先,在你的HTML页面中引入SheetJS库。 ```html <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script> ``` - 然后,在JavaScript代码中创建一个导出函数,并绑定到一个按钮的点击事件上。 ```javascript function exportToExcel() { var wb = XLSX.utils.table_to_book(document.getElementById('your-table-id')); XLSX.writeFile(wb, 'exported_data.xlsx'); } $(document).ready(function() { $('#export-btn').click(function() { exportToExcel(); }); }); ``` 这里的`#your-table-id`是你的Bootstrap Table的ID,你需要将其替换为你实际使用的ID。 通过以上两种方法之一,你可以将Bootstrap Table导出为Excel文件。记得将`#your-table-id`替换为你实际使用的ID,并根据需要修改导出文件的名称和格式

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值