在bootstrap-table官网-》拓展模块中有导出模块的详细介绍。
点击home按钮进入github官方文档,会看到导出使用的插件是bootstrap-table-export.js ,而这个插件中使用的是tableexport.jquery.plugin插件。后者是一个独立的表格导出插件。(推荐学习:bootstrap视频教程)
而前者是经过bootstrap官方将后者与bootstrap表格进行了完美的整合之后的插件。所以我们只需要使用前者即可。
<script src="extensions/export/bootstrap-table-export.js"></script>
下面直接贴代码:
//查询 function refresh(){ $(#datatable).bootstraptable('refresh',{url:'__module__/statistics/listdata'}); } //查询条件 function queryparams(params){ params['project_id'] = $(select[name=project_id]).find(option:selected).val(); params['time_field'] = $(select[name=time_field]).find(option:selected).val(); params['start_time'] = $(input[name=start_time]).val(); params['end_time'] = $(input[name=end_time]).val(); params['user_name'] = $(input[name=user_name]).val(); params['telephone'] = $(input[name=telephone]).val(); params['room_confirm_number'] = $(input[name=room_confirm_number]).val(); params['lineson'] = $(select[name=lineson]).val(); params['invoice'] = $(select[name=invoice]).val(); return params; } function doonmsonumberformat(cell, row, col) { var result = ; if (row > 0 && col == 0) result = \\@; return result; } var rowcount = 0; $(#datatable).bootstraptable({ height:500, url: '__module__/statistics/listdata', //表格数据请求地址 pagination:true, //是否分页 search: false, //是否显示查询框 sortname: id, //排序相关 sortorder: desc, queryparams:'queryparams', method:post, sortable:true, datatype:'json', toolbar: #exampletableeventstoolbar, icons: {refresh: glyphicon-repeat, toggle: glyphicon-list-alt, columns: glyphicon-list}, pagelist:[10, 25, 50, 100], clicktoselect:true, exportdatatype:'all', onloadsuccess:function(data){ //表格数据加载成功事件 rowcount = data.length-1; $(#datatable).bootstraptable('hiderow', {index:rowcount}); $(#datatable td).attr(data-tableexport-msonumberformat,\@); $(#datatable tr).attr(data-tableexport-display,always); }, onpagechange:function(number,size){ //表格翻页事件 $(#datatable).bootstraptable('hiderow', {index:rowcount}); $(#datatable td).attr(data-tableexport-msonumberformat,\@); $(#datatable tr).attr(data-tableexport-display,always); }, showexport: true, //是否显示导出按钮 buttonsalign:right, //按钮位置 exporttypes:['excel'], //导出文件类型 icons:'glyphicon-export', exportoptions:{ ignorecolumn: [0,1], //忽略某一列的索引 filename: '总台帐报表', //文件名称设置 worksheetname: 'sheet1', //表格工作区名称 tablename: '总台帐报表', excelstyles: ['background-color', 'color', 'font-size', 'font-weight'], onmsonumberformat: doonmsonumberformat }, columns: [ { checkbox:true, title: '选择' },{ title: '序号', formatter: function (value, row, index) { $(.group_sum).html(row['group_sum']); $(.group_money_sum).html(row['group_money_sum']+元); $(.confirm_sum).html(row['confirm_sum']); $(.confirm_money_sum).html(row['confirm_money_sum']+元); $(.refund_sum).html(row['refund_sum']); $(.refund_money_sum).html(row['group_back_sum']+元); $(.residue_money_sum).html(row['residue_sum']+元); var a = index+1; return a+<span style='display:none;'>+row.id+</span> } },{ field: 'project_name', align:center, title: '项目' }, { field: 'user_name', align:center, title: '姓名' }, { field: 'telephone', align:center, title: '电话' },{ field: 'id_card_number', align:center, rowattributes:rowattributes, title: '身份证号' },{ field: 'telephone', align:center, title: '手机号' },{ field: 'pos_r_n', align:center, title: 'pos机参考号' },{ field: 'pos_c_n', align:center, title: 'pos机终端号' },{ field: 'merchant_code', align:center, title: '商户编码' },{ field: 'bank_card_number', align:center, title: '银行卡号' },{ field: 'create_time', align:center, title: '领取优惠时间' },{ field: 'group_purchase_number', align:center, title: '优惠编码' },{ field: 'group_purchase_expenses', align:center, title: '会员费用' },{ field: 'back_pay_money', align:center, title: '退款金额' },{ field: 'refund_etime', align:center, title: '退款时间' },{ field: 'confirm_pay_money', align:center, title: '认购金额' },{ field: 'group_purchase_confirm_time', align:center, title: '认购时间' },{ field: 'room_confirm_number', align:center, title: '认购房号' },{ field: '', align:center, title: '账户余额' },{ field: 'invoice_status', align:center, title: '发票状态', formatter: 'invoice_status_formatter', events:'confirmevents' },{ field: 'lineson', align:center, title: '数据来源', formatter: 'lineson_status_formatter', events:'confirmevents' } ] });
更多bootstrap相关技术文章,请访问bootstrap教程栏目进行学习!
以上就是bootstrap表格导出怎么设置的详细内容。