最终解决:bootstrapTable 导出全部数据。

原文地址:

http://www.5ixiudou.com/portal/detailInfo/1000000005/228

受备案影响,原网页可先访问:http://106.12.198.137:8080/portal-web/portal/detailInfo/1000000005/228

一、问题描述:
    1.在工作中,人们比较喜欢用 bootstrapTable 进行数据的展示,而且有导出数据到excel中的需求。
    2.bootstrapTable导出数据可以使用 Table Export 插件。https://www.cnblogs.com/evilliu/articles/6424237.html,主要引入两个文件:bootstrap-table-export.js 和 tableExport.js。但是这个导出是有问题的,只能导出当前页的数据,不能导出查询出来的数据的全部页的数据。关于这个问题,网上有一些解决方案,比如设置 exportDataType:'all',也是不能导出全部数据的。

二、方案选择
    对于 bootstrapTable,如果想要导出全部数据的话,有两种方案:
    1.前台分页过程中,添加"ALL"的分页,然后前台加载全部数据到当前页中,然后导出当前页的数据。
    2.将导出的过程放到后台去执行,前台只用传递查询条件、excel 表头信息到后台,由后台去查询、拼装、导出即可。
    对于方案1,首先前台加载大量数据的话,渲染会非常慢,甚至僵死超时,更不用说导出还要消耗更长的时间,所以该方案不合适。
    对于方案2,前台不用做特殊操作,将导出的业务过程放到后台,不会对前台的信息展示产生任何影响,可行性高。
    最终选择方案2.
    
三、方案执行过程(亲测可用)
    1.所需资源文件:

资源文件下载:

  http://www.5ixiudou.com/portal/detailInfo/1000000005/228

 注意:要使用新版本的bootstrap-table.js文件。


    2.核心代码:
    
    js 部分:
    //导出全部查询数据
    function exportExcelForAll(){
        var formData = {
            startDateStr:$("#startDate").val(),
            endDateStr:$("#endDate").val(),
        };

        //导出所有数据
        $.exportAllData4BootstrapTable({
            tableId: "ivrRecord_table",
            fileName: "全部数据导出",
            sheetName: "全部数据导出",
            url: $.basePath + "/demo/exportAllData.htm",
            queryParam: formData
        });
    }
    
    
    //初始化 bootstrapTable
    $('#demo_table').bootstrapTable({
            toolbar: "#u_tableToolbar",
            url:'${basePath}/demo/getDemoDataJson.json',
            queryParams:function (params) {
                var searchText=params.search;
                if(searchText==undefined){
                    searchText="";
                }
                return {
                    limit: params.limit,
                    offset: params.offset,
                    startDateStr:$("#startDate").val(),
                    endDateStr:$("#endDate").val(),
                };
            },
            contentType:"application/x-www-form-urlencoded; charset=UTF-8",
            sortable: false,
            search: true,              //是否显示表格搜索,此搜索是客户端搜索,不会进服务端
           // searchOnEnterKey: true, //回车查询
            strictSearch: true,         //设置为 true启用 全匹配搜索,否则为模糊搜索
            showColumns: true,          //是否显示所有的列
            showRefresh: true,          //是否显示刷新按钮
            method: 'POST',
            striped: true,
            sidePagination: "server",
            pagination:true,
            pageNumber:1,
            pageSize: 10,

            pageList: [10, 25, 50, 100,200,500,1000,2000,3000, 'ALL'],
            columns: [
                {title: '${getCodeDesc('VIEWS.IVR','CALL_SERIAL_LOCAL','标志号')}', field: 'pid', align: 'center', valign: 'middle',sortable: true,width:'170px'},
                {title: '${getCodeDesc('VIEWS.MODEL','START_DATE_LOCAL','接入时间')}', field: 'beginTime', align: 'center', valign: 'middle', sortable: true,width:'140px',formatter:formatDate},
                {title: '${getCodeDesc('VIEWS.MODEL','END_DATE_LOCAL','挂断时间')}', field: 'endTime', align: 'center', valign: 'middle', sortable: true,width:'140px',visible:false,formatter:formatDate},
            ]
        });

    html部分:
    


    后台部分:
    /**
     * 导出全部查询数据
     */
    @RequestMapping(value = "/exportAllData.htm", method = {RequestMethod.POST})
    public void exportAllData(String startDateStr ,String endDateStr, HttpServletRequest request, HttpServletResponse response,String cols, String fileName, String sheetName) throws Exception {

        //防止中文乱码问题
        cols = URLDecoder.decode(cols, "utf-8");
        fileName = URLDecoder.decode(fileName, "utf-8");
        sheetName = URLDecoder.decode(sheetName, "utf-8");

        //根据前台传递过来的查询条件查询所有的数据
        //根据自己的业务需要进行查询,只要获取最后的数list
        DataDemoModel model = new DataDemoModel();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        List list = null;
        if(!StringUtil.isEmpty(startDateStr)){
            model.setStartDate(sdf.parse(startDateStr));
        }
        if(!StringUtil.isEmpty(endDateStr)){
            model.setEndDate(sdf.parse(endDateStr));
        }
        list = demoService.findAllDataByCondition(model);

        //根据获取的数据导出到文件中
        ExcelTemplate excel = new ExcelTemplate();
        excel.setFileName(fileName).createNewSheet(sheetName);
        //设置标题数据和表格数据
        excel.addTitleList(new ColumnData(cols)).addGridList(list);
        excel.writeExcel(response);

    }
    
    3.关键部分:
    用到了后台导出excel模板插件 ExcelTemplate,需要向模板中传递文件名称 fileName ,sheet页名称 sheetName,excel标题信息 cols,数据list。
    

更多内容请关注我的个人网站:http://www.5ixiudou.com,大家共同学习,共同进步。

你可能感兴趣的:(前端,bootstrapTable,导出,全部数据,excel)