bootstarap table 分页导出 vue版

Posted vv-lilu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了bootstarap table 分页导出 vue版相关的知识,希望对你有一定的参考价值。

有全部导出与部分选择导出

1           <button type="button" class="btn btn-default" @click="exportExcel(‘all‘)">
2                   <span class="fa fa-sign-out" aria-hidden="true"></span>全部导出
3           </button>
4           <button type="button" class="btn btn-default" @click="exportExcel">
5                   <span class="fa fa-sign-out" aria-hidden="true"></span>导出
6           </button>

定义全局数组,记录每次点的复选框

var overAllIds = new Array();

bootstrap table 的复选框列

columns: [{
                    checkbox:true,
                    formatter: function (i,row) {// 每次加载 checkbox 时判断当前 row 的 id 是否已经选择
                        if($.inArray(row.id,overAllIds)!=-1){// 因为 判断数组里有没有这个 id 
                            return {
                                checked : true               // 存在则选中
                            }
                        }
                    } 
                },{
                    field: ‘id‘,
                    visible:false
                },

于table绑定数据处绑定复选框方法

var that = this;
                $(‘#hbTable‘).on(‘uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table‘,function(e,rows){
                        var datas = $.isArray(rows) ? rows : [rows];        // 点击时获取选中的行或取消选中的行
                        that.examine(e.type,datas);                         // 保存到全局 Array() 里
                   });
examine: function(type,datas){
                if(type.indexOf(‘uncheck‘)==-1){    
                    $.each(datas,function(i,v){
                       // 添加时,判断一行或多行的 id 是否已经在数组里 不存则添加 
                  overAllIds.indexOf(v.id) == -1 ? overAllIds.push(v.id) : -1;
                });
                }else{
                    $.each(datas,function(i,v){
                        if(overAllIds.indexOf(v.id)>-1){
                            overAllIds.splice(overAllIds.indexOf(v.id),1);    //删除取消选中行
                        }                      
                    });
                }
        },

最后js方法

exportExcel: function(type) {
            if(type=="all"){
                window.location.href = this.baseUrl+‘/danger/dangeraccount/exportHiDangerAccount?ids=1‘;
            }else{
                if(overAllIds.length>0){
                    window.location.href = this.baseUrl+‘/danger/dangeraccount/exportHiDangerAccount?ids=‘+overAllIds;
                }else{
                    this.$layer.msg(‘请选择导出数据!‘);
                }              
            }
            
          },

附上java代码(没有工具类)

try{
            String title = "台账";
            String[] rowName = {"隐患编号","检查时间","检查类别","隐患描述","隐患分类","隐患级别","整改目标或方案","整改基金(万元)","整改责任人","计划完成时间","当前控制措施","是否制定应急预案","实际完成时间","验收人","验收时间","验收意见"};
            List<Object[]> dataList = new ArrayList<Object[]>();
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
            HiddendangerQueryDao commond = new HiddendangerQueryDao();
            if(ids.length>0&&!"1".equals(ids[0])){
                commond.setIds(ids);
            }
            List<HiddendangerQueryDao> list = dangerinfoservice.getHidangerPagination(commond);
            for(HiddendangerQueryDao hd : list) {
                Object[] data = new Object[16];
                data[0] = hd.getDangerName();//隐患编号
                if(hd.getFindtime()!=null){ //检查时间
                    data[1] = sdf.format(hd.getFindtime());
                }else{
                    data[1]="";
                }
                data[2] = hd.getChecktypename();//检查类别
                data[3] = hd.getDescription();//隐患描述
                data[4] = hd.getDangertypename();//隐患分类
                data[5] = hd.getDangerlevelname();//隐患等级
                data[6] = hd.getReformgoal();//整改目标或方案
                data[7] = hd.getReformcost();//资金
                data[8] = hd.getReformresponsiblename();//责任人
                if(hd.getReformplantime()!=null){
                    data[9] = sdf.format(hd.getReformplantime());//计划完成时间
                }else{
                    data[9]="";
                }
                data[10] = hd.getCurrentMeasures();//当前措施
                if(hd.getIsEmergencyplan()!=null){
                    if(hd.getIsEmergencyplan()==1){
                        data[11] = "是";//是否制定应急预案
                    }else{
                        data[11] = "否";//是否制定应急预案
                    }
                }
                if(hd.getReformcomtime()!=null){ //实际完成时间
                    data[12] = sdf.format(hd.getReformcomtime());
                }else{
                    data[12]= "";
                }
                data[13] = hd.getCheckusername();//验收人
                if(hd.getAccepttime()!=null){ // 验收时间
                    data[14] = sdf.format(hd.getAccepttime());
                }else{
                    data[14] ="";
                }
                data[15] = hd.getChecksituation();//验收意见
                dataList.add(data);
            }
            ExportExcelUtil export = new ExportExcelUtil(title, rowName, dataList, response);
            String time = sdf.format(new Date());
            String fileName = "台账"+time+".xls";
            export.exportRisk(fileName);
            return new RestMessage();
        }catch (Exception ex){
            ex.printStackTrace();
            return new RestMessage(RespCodeAndMsg.FAIL);
        }

 

以上是关于bootstarap table 分页导出 vue版的主要内容,如果未能解决你的问题,请参考以下文章

elementUi Table Pagination 分页 实现分页多选

vue+iview tables多个分页实现

vue分页组件table-pagebar

Vue + element-ui 前端项目一Table 表格并实现分页 2

vue b-table 自定义分页显示所有行

ant-design-vue a-table的分页