300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > bootstrap-table表格导出

bootstrap-table表格导出

时间:2024-03-05 23:17:32

相关推荐

bootstrap-table表格导出

web前端|Bootstrap教程

bootstrap table

web前端-Bootstrap教程

不倒翁 源码,ubuntu使用qq等,爬虫灯装哪里,php中findone,东莞优化seolzw

在bootstrap-table官网-》拓展模块中有导出模块的详细介绍。网址:http://bootstrap-.cn/zh-cn/extensions/

帝国仿短文学网源码,idea vscode主题,ubuntu uc,tomcat断言失败,sqlite 数据表删除,dz附近人插件,今日头条前端用什么框架,爬虫形成的表格在哪里,js转换php,湖北seo推广渠道,国外儿童社区网站模板下载,html5网页代码动画,美拍那个模板在哪里设置lzw

点击home按钮进入github官方文档,会看到导出使用的插件是bootstrap-table-export.js ,而这个插件中使用的是tableExport.jquery.plugin插件。后者是一个独立的表格导出插件。而前者是经过bootstrap官方将后者与bootstrap表格进行了完美的整合之后的插件。所以我们只需要使用前者即可。

linux socks5 源码,获取ubuntu权限命令,爬虫类英文,奶粉 php,域名注册seolzw

文档参数说明:

Table Export

Use Plugin: tableExport.jquery.plugin

Usage

Options

showExport //是否显示到处按钮

type: Boolean

description: set true to show export button.

default: false

exportDataType //导出表格方式(默认basic:只导出当前页的表格数据;all:导出所有数据;selected:导出选中的数据)

type: String

description: export data type, support: ‘basic’, ‘all’, ‘selected’.

default: basic

exportTypes //导出文件类型 ,支持多种类型文件导出

type: Array

description: export types, support types: ‘json’, ‘xml’, ‘png’, ‘csv’, ‘txt’, ‘sql’, ‘doc’, ‘excel’, ‘xlsx’, ‘pdf’.

default: [‘json’, ‘xml’, ‘csv’, ‘txt’, ‘sql’, ‘excel’]

exportOptions //导出的表格参数设置,这里参照tableExport.jquery.plugin插件中的参数进行设置,点击官网文档中的option蓝色字体就可跳转到该插件的说明文档处,网址:/hhurz/tableExport.jquery.plugin#options。

type: Object

description: export options of tableExport.jquery.plugin

default: {}

Icons//导出按钮图标设置

export: ‘glyphicon-export icon-share’

下面直接贴代码:

//查询 function refresh(){ $("#datatable").bootstrapTable( efresh,{url:\__MODULE__/Statistics/listData}); } //查询条件 function queryParams(params){ params[project_id] = $("select[name=project_id]").find("option:selected").val(); params[ ime_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[ elephone] = $("input[name=telephone]").val(); params[ oom_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: [ackground-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[ efund_sum]); $(".refund_money_sum").html(row[group_back_sum]+"元"); $(".residue_money_sum").html(row[ esidue_sum]+"元"); var a = index+1; return a+""+row.id+""} },{field: project_name,align:"center",title: 项目 }, {field: user_name,align:"center",title: 姓名 }, {field: elephone,align:"center",title: 电话 },{field: id_card_number,align:"center",rowAttributes:"rowAttributes",title: 身份证号 },{field: elephone,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: ank_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: ack_pay_money,align:"center",title: 退款金额 },{field: efund_etime,align:"center",title: 退款时间 },{field: confirm_pay_money,align:"center",title: 认购金额 },{field: group_purchase_confirm_time,align:"center",title: 认购时间 },{field: oom_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使用

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。