bootstrap table前端导出
1. 引入相关js包;
2. bootstrap table配置导出属性;
3. 实现效果;
上代码:
var queryParams = {}; $("#carPctTable").bootstrapTable('destroy').bootstrapTable({ method: 'post', // 服务器数据的请求方式 get or post url: prefix + "/getRunCarDay", // 服务器数据的加载地址 iconSize: 'outline', toolbar: '#exampleToolbar', striped: true, // 设置为true会有隔行变色效果 dataType: "json", // 服务器返回的数据类型 pagination: true, // 设置为true会在底部显示分页条 singleSelect: false, // 设置为true将禁止多选 pageSize: 7, // 如果设置了分页,每页数据条数 pageNumber: 1, // 如果设置了分布,首页页码 pageList: [7, 15, 30], showColumns: false, // 是否显示内容下拉框(选择显示的列) columns: getColumns(1), sidePagination: "client", // 设置在哪里进行分页,可选值为"client" paginationShowPageGo: true, smartDisplay: false, toolbarAlign: 'right', showExport: true, //是否显示导出 buttonsAlign: "right", //按钮位置 exportDataType: "all", //basic', 'all', 'selected' exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'],//导出格式 exportOptions: { fileName: '每天车辆运营占比',//下载文件名称 worksheetName: '每天车辆运营占比', //表格工作区名称 tableName: '每天车辆运营占比', }, onClickRow: function (row, $element) { $('.select-row').removeClass('select-row'); $($element).addClass('select-row'); }, queryParams: function (params) { queryParams.pageSize = params.limit; queryParams.offset = params.offset; //queryParams.sort = params.sort; // 排序列名 //queryParams.sortOrder = params.order; // 排位命令(desc,asc) return queryParams; }