iview admin+bootstrap-table+tableexportフロントエンドエクスポートexcelを実現
19325 ワード
1.端末実行
npm install bootstrap@3 --save--dev
npm install [email protected] --save--dev
npm install --save popper.js
npm install tableexport.jquery.plugin --save--dev
main.js次のコードを追加
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap-table/dist/bootstrap-table.min.css'
import 'bootstrap-table/dist/bootstrap-table.min.js'
import 'bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js'
import 'tableexport.jquery.plugin/tableExport.min.js'
// To export the table in XLSX (Excel 2007+ XML Format) format, you need to include additionally
import 'tableexport.jquery.plugin/libs/js-xlsx/xlsx.core.min.js'
(bootstrapはjqueryに依存する:jqueryを導入する方法)
2.ページ
<table id="mytab" class="table table-hover"></table>
表の初期化
initTable() {
let that = this;
$("#mytab").bootstrapTable("destroy");
$("#mytab").bootstrapTable({
data: that.data,//
showColumns: true,
smartDisplay: false,
columns: [{
title: " ",
field: "name"
}]
});
}
データ変更時にテーブルをリフレッシュする(ページング操作はpageNumber,pageSize)
$("#mytab").bootstrapTable("refresh", this.data);
$("#mytab").bootstrapTable("refreshOptions", {
pageNumber: this.current,
pageSize: this.pageSize
});
3.excelのエクスポート
$("#mytab").tableExport({
type: "excel",
exportDataType: "all",
ignoreColumn: [3],//
fileName: "excel ", //
onCellHtmlData: function(cell, row, col, data) {
return data;
}
});
4.エクスポートしたexcelに枠線を付ける
tableexportを変更します.jquery.plugin/libs/js-xlsx/xlsx.core.min.jsファイル
H += ""; u = y(b); c(u).each(function (){
H += "
"; u = y(b); c(u).each(function () {
***その ノート
（ columns field name ）
$("#mytab").bootstrapTable("hideColumn", "name");
columns
{
field: "SerialNumber",
title: " ",
formatter: function(value, row, index) {
return index + 1;
}
}
columns
{
title: " ",
field: "gender",
formatter: function(value, row, index) {
if (gender == 1) {
return " ";
} else {
return " ";
}
}
},
{
title: " ",
field: "time",
formatter: function(value, row, index) {
return formatDate(
new Date(row.time),
"yyyy-MM-dd"
);
}
},
columns
{
field: "oper",
title: " ",
formatter: function(value, row, index) {
return '';
},
events: {
"click .info": function(ev, value, row, index) {
console.log(ev, value, row, index);
}
}
}