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 分页 实现分页多选