You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
192 lines
6.4 KiB
192 lines
6.4 KiB
2 years ago
|
/**
|
||
|
* @author zhixin wen <wenzhixin2010@gmail.com>
|
||
|
* extensions: https://github.com/kayalshri/tableExport.jquery.plugin
|
||
|
*/
|
||
|
|
||
|
($ => {
|
||
|
const Utils = $.fn.bootstrapTable.utils
|
||
|
|
||
|
const bootstrap = {
|
||
|
3: {
|
||
|
icons: {
|
||
|
export: 'glyphicon-export icon-share'
|
||
|
},
|
||
|
html: {
|
||
|
dropmenu: '<ul class="dropdown-menu" role="menu"></ul>',
|
||
|
dropitem: '<li role="menuitem" data-type="%s"><a href="javascript:">%s</a></li>'
|
||
|
}
|
||
|
},
|
||
|
4: {
|
||
|
icons: {
|
||
|
export: 'fa-download'
|
||
|
},
|
||
|
html: {
|
||
|
dropmenu: '<div class="dropdown-menu dropdown-menu-right"></div>',
|
||
|
dropitem: '<a class="dropdown-item" data-type="%s" href="javascript:">%s</a>'
|
||
|
}
|
||
|
}
|
||
|
}[Utils.bootstrapVersion]
|
||
|
|
||
|
const TYPE_NAME = {
|
||
|
json: 'JSON',
|
||
|
xml: 'XML',
|
||
|
png: 'PNG',
|
||
|
csv: 'CSV',
|
||
|
txt: 'TXT',
|
||
|
sql: 'SQL',
|
||
|
doc: 'MS-Word',
|
||
|
excel: 'MS-Excel',
|
||
|
xlsx: 'MS-Excel (OpenXML)',
|
||
|
powerpoint: 'MS-Powerpoint',
|
||
|
pdf: 'PDF'
|
||
|
}
|
||
|
|
||
|
$.extend($.fn.bootstrapTable.defaults, {
|
||
|
showExport: false,
|
||
|
exportDataType: 'basic', // basic, all, selected
|
||
|
exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'],
|
||
|
exportOptions: {},
|
||
|
exportFooter: false
|
||
|
})
|
||
|
|
||
|
$.extend($.fn.bootstrapTable.defaults.icons, {
|
||
|
export: bootstrap.icons.export
|
||
|
})
|
||
|
|
||
|
$.extend($.fn.bootstrapTable.locales, {
|
||
|
formatExport() {
|
||
|
return 'Export data'
|
||
|
}
|
||
|
})
|
||
|
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales)
|
||
|
|
||
|
$.BootstrapTable = class extends $.BootstrapTable {
|
||
|
initToolbar() {
|
||
|
const o = this.options
|
||
|
|
||
|
this.showToolbar = this.showToolbar || o.showExport
|
||
|
|
||
|
super.initToolbar()
|
||
|
|
||
|
if (!this.options.showExport) {
|
||
|
return
|
||
|
}
|
||
|
const $btnGroup = this.$toolbar.find('>.btn-group')
|
||
|
let $export = $btnGroup.find('div.export')
|
||
|
|
||
|
if ($export.length) {
|
||
|
return
|
||
|
}
|
||
|
$export = $(`
|
||
|
<div class="export btn-group">
|
||
|
<button class="btn btn-${o.buttonsClass} btn-${o.iconSize} dropdown-toggle"
|
||
|
aria-label="export type"
|
||
|
title="${o.formatExport()}"
|
||
|
data-toggle="dropdown"
|
||
|
type="button">
|
||
|
<i class="${o.iconsPrefix} ${o.icons.export}"></i>
|
||
|
<span class="caret"></span>
|
||
|
</button>
|
||
|
${bootstrap.html.dropmenu}
|
||
|
</div>
|
||
|
`).appendTo($btnGroup)
|
||
|
|
||
|
const $menu = $export.find('.dropdown-menu')
|
||
|
let exportTypes = o.exportTypes
|
||
|
|
||
|
if (typeof exportTypes === 'string') {
|
||
|
const types = exportTypes.slice(1, -1).replace(/ /g, '').split(',')
|
||
|
exportTypes = types.map(t => t.slice(1, -1))
|
||
|
}
|
||
|
for (let type of exportTypes) {
|
||
|
if (TYPE_NAME.hasOwnProperty(type)) {
|
||
|
$menu.append(Utils.sprintf(bootstrap.html.dropitem, type, TYPE_NAME[type]))
|
||
|
}
|
||
|
}
|
||
|
|
||
|
$menu.find('>li, >a').click(e => {
|
||
|
const type = $(e.currentTarget).data('type')
|
||
|
const doExport = () => {
|
||
|
const data = this.getData()
|
||
|
if (o.exportFooter) {
|
||
|
const $footerRow = this.$tableFooter.find('tr').first()
|
||
|
const footerData = {}
|
||
|
const footerHtml = []
|
||
|
|
||
|
$.each($footerRow.children(), function (index, footerCell) {
|
||
|
var footerCellHtml = $(footerCell).children('.th-inner').first().html()
|
||
|
footerData[this.columns[index].field] = footerCellHtml === ' ' ? null : footerCellHtml
|
||
|
|
||
|
// grab footer cell text into cell index-based array
|
||
|
footerHtml.push(footerCellHtml)
|
||
|
})
|
||
|
|
||
|
this.append(footerData)
|
||
|
|
||
|
var $lastTableRow = this.$body.children().last()
|
||
|
|
||
|
$.each($lastTableRow.children(), function (index, lastTableRowCell) {
|
||
|
$(lastTableRowCell).html(footerHtml[index])
|
||
|
})
|
||
|
}
|
||
|
|
||
|
this.$el.tableExport($.extend({}, o.exportOptions, {
|
||
|
type: type,
|
||
|
escape: false
|
||
|
}))
|
||
|
|
||
|
if (o.exportFooter) {
|
||
|
this.load(data)
|
||
|
}
|
||
|
}
|
||
|
|
||
|
const stateField = this.header.stateField
|
||
|
|
||
|
if (o.exportDataType === 'all' && o.pagination) {
|
||
|
const eventName = o.sidePagination === 'server'
|
||
|
? 'post-body.bs.table' : 'page-change.bs.table'
|
||
|
this.$el.one(eventName, () => {
|
||
|
if (stateField) {
|
||
|
this.hideColumn(stateField)
|
||
|
}
|
||
|
doExport()
|
||
|
this.togglePagination()
|
||
|
})
|
||
|
this.togglePagination()
|
||
|
} else if (o.exportDataType === 'selected') {
|
||
|
let data = this.getData()
|
||
|
let selectedData = this.getSelections()
|
||
|
if (!selectedData.length) {
|
||
|
return
|
||
|
}
|
||
|
|
||
|
if (o.sidePagination === 'server') {
|
||
|
data = {
|
||
|
total: o.totalRows,
|
||
|
[this.options.dataField]: data
|
||
|
}
|
||
|
selectedData = {
|
||
|
total: selectedData.length,
|
||
|
[this.options.dataField]: selectedData
|
||
|
}
|
||
|
}
|
||
|
|
||
|
this.load(selectedData)
|
||
|
if (stateField) {
|
||
|
this.hideColumn(stateField)
|
||
|
}
|
||
|
doExport()
|
||
|
this.load(data)
|
||
|
} else {
|
||
|
if (stateField) {
|
||
|
this.hideColumn(stateField)
|
||
|
}
|
||
|
doExport()
|
||
|
}
|
||
|
if (stateField) {
|
||
|
this.showColumn(stateField)
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
})(jQuery)
|