|
|
@@ -1,149 +1,193 @@
|
|
|
-(function ($) {
|
|
|
- 'use strict'
|
|
|
+/**
|
|
|
+ * @update zhixin wen <wenzhixin2010@gmail.com>
|
|
|
+ */
|
|
|
|
|
|
- var sprintf = $.fn.bootstrapTable.utils.sprintf
|
|
|
+($ => {
|
|
|
+ const Utils = $.fn.bootstrapTable.utils
|
|
|
+
|
|
|
+ const bootstrap = {
|
|
|
+ 3: {
|
|
|
+ icons: {
|
|
|
+ print: 'glyphicon-print icon-share'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 4: {
|
|
|
+ icons: {
|
|
|
+ print: 'fa-print'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }[Utils.bootstrapVersion]
|
|
|
|
|
|
function printPageBuilderDefault (table) {
|
|
|
- return '<html><head>' +
|
|
|
- '<style type="text/css" media="print">' +
|
|
|
- ' @page { size: auto; margin: 25px 0 25px 0; }' +
|
|
|
- '</style>' +
|
|
|
- '<style type="text/css" media="all">' +
|
|
|
- 'table{border-collapse: collapse; font-size: 12px; }\n' +
|
|
|
- 'table, th, td {border: 1px solid grey}\n' +
|
|
|
- 'th, td {text-align: center; vertical-align: middle;}\n' +
|
|
|
- 'p {font-weight: bold; margin-left:20px }\n' +
|
|
|
- 'table { width:94%; margin-left:3%; margin-right:3%}\n' +
|
|
|
- 'div.bs-table-print { text-align:center;}\n' +
|
|
|
- '</style></head><title>Print Table</title><body>' +
|
|
|
- '<p>Printed on: ' + new Date + ' </p>' +
|
|
|
- '<div class="bs-table-print">' + table + '</div></body></html>'
|
|
|
+ return `
|
|
|
+ <html>
|
|
|
+ <head>
|
|
|
+ <style type="text/css" media="print">
|
|
|
+ @page {
|
|
|
+ size: auto;
|
|
|
+ margin: 25px 0 25px 0;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <style type="text/css" media="all">
|
|
|
+ table {
|
|
|
+ border-collapse: collapse;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ table, th, td {
|
|
|
+ border: 1px solid grey;
|
|
|
+ }
|
|
|
+ th, td {
|
|
|
+ text-align: center;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left:20px;
|
|
|
+ }
|
|
|
+ table {
|
|
|
+ width:94%;
|
|
|
+ margin-left:3%;
|
|
|
+ margin-right:3%;
|
|
|
+ }
|
|
|
+ div.bs-table-print {
|
|
|
+ text-align:center;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <title>Print Table</title>
|
|
|
+ <body>
|
|
|
+ <p>Printed on: ${new Date} </p>
|
|
|
+ <div class="bs-table-print">${table}</div>
|
|
|
+ </body>
|
|
|
+ </html>`
|
|
|
}
|
|
|
+
|
|
|
$.extend($.fn.bootstrapTable.defaults, {
|
|
|
showPrint: false,
|
|
|
- printAsFilteredAndSortedOnUI: true, // boolean, when true - print table as sorted and filtered on UI.
|
|
|
- // Please note that if true is set, along with explicit predefined print options for filtering and sorting (printFilter, printSortOrder, printSortColumn)- then they will be applied on data already filtered and sorted by UI controls.
|
|
|
- // For printing data as filtered and sorted on UI - do not set these 3 options:printFilter, printSortOrder, printSortColumn
|
|
|
-
|
|
|
- printSortColumn: undefined , // String, set column field name to be sorted by
|
|
|
- printSortOrder: 'asc', // String: 'asc' , 'desc' - relevant only if printSortColumn is set
|
|
|
- printPageBuilder: function (table) {return printPageBuilderDefault(table)} // function, receive html <table> element as string, returns html string for printing. by default delegates to function printPageBuilderDefault(table). used for styling and adding header or footer
|
|
|
+ printAsFilteredAndSortedOnUI: true,
|
|
|
+ printSortColumn: undefined,
|
|
|
+ printSortOrder: 'asc',
|
|
|
+ printPageBuilder (table) {
|
|
|
+ return printPageBuilderDefault(table)
|
|
|
+ }
|
|
|
})
|
|
|
- $.extend($.fn.bootstrapTable.COLUMN_DEFAULTS, {
|
|
|
- printFilter: undefined, // set value to filter by in print page
|
|
|
- printIgnore: false, // boolean, set true to ignore this column in the print page
|
|
|
- printFormatter: undefined // function(value, row, index), formats the cell value for this column in the printed table. Function behaviour is similar to the 'formatter' column option
|
|
|
|
|
|
+ $.extend($.fn.bootstrapTable.COLUMN_DEFAULTS, {
|
|
|
+ printFilter: undefined,
|
|
|
+ printIgnore: false,
|
|
|
+ printFormatter: undefined
|
|
|
})
|
|
|
+
|
|
|
$.extend($.fn.bootstrapTable.defaults.icons, {
|
|
|
- print: 'glyphicon-print icon-share'
|
|
|
+ print: bootstrap.icons.print
|
|
|
})
|
|
|
|
|
|
- var BootstrapTable = $.fn.bootstrapTable.Constructor
|
|
|
- var _initToolbar = BootstrapTable.prototype.initToolbar
|
|
|
+ $.BootstrapTable = class extends $.BootstrapTable {
|
|
|
+ initToolbar (...args) {
|
|
|
+ this.showToolbar = this.showToolbar || this.options.showPrint
|
|
|
|
|
|
- BootstrapTable.prototype.initToolbar = function () {
|
|
|
- this.showToolbar = this.showToolbar || this.options.showPrint
|
|
|
+ super.initToolbar(...args)
|
|
|
|
|
|
- _initToolbar.apply(this, Array.prototype.slice.apply(arguments))
|
|
|
+ if (!this.options.showPrint) {
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- if (this.options.showPrint) {
|
|
|
- var that = this
|
|
|
- var $btnGroup = this.$toolbar.find('>.btn-group')
|
|
|
- var $print = $btnGroup.find('button.bs-print')
|
|
|
+ const $btnGroup = this.$toolbar.find('>.btn-group')
|
|
|
+ let $print = $btnGroup.find('button.bs-print')
|
|
|
|
|
|
if (!$print.length) {
|
|
|
- $print = $([
|
|
|
- '<button class="bs-print btn btn-default' + sprintf(' btn-%s"', this.options.iconSize) + ' name="print" title="print" type="button">',
|
|
|
- sprintf('<i class="%s %s"></i> ', this.options.iconsPrefix, this.options.icons.print),
|
|
|
- '</button>'].join('')).appendTo($btnGroup)
|
|
|
-
|
|
|
- $print.click(function () {
|
|
|
- function formatValue (row, i, column ) {
|
|
|
- var value = row[column.field]
|
|
|
- if (typeof column.printFormatter === 'function') {
|
|
|
- return column.printFormatter.apply(column, [value, row, i])
|
|
|
- }
|
|
|
+ $print = $(`
|
|
|
+ <button class="${this.constants.buttonsClass} bs-print" type="button">
|
|
|
+ <i class="${this.options.iconsPrefix} ${this.options.icons.print}"></i>
|
|
|
+ </button>`
|
|
|
+ ).appendTo($btnGroup)
|
|
|
+ }
|
|
|
|
|
|
- return typeof value === 'undefined' ? '-' : value
|
|
|
+ $print.off('click').on('click', () => {
|
|
|
+ this.doPrint(this.options.printAsFilteredAndSortedOnUI ?
|
|
|
+ this.getData() : this.options.data.slice(0))
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ doPrint (data) {
|
|
|
+ const formatValue = (row, i, column ) => {
|
|
|
+ const value = row[column.field]
|
|
|
+ if (typeof column.printFormatter === 'function') {
|
|
|
+ return column.printFormatter(...[value, row, i])
|
|
|
+ }
|
|
|
+ return typeof value === 'undefined' ? '-' : value
|
|
|
+ }
|
|
|
|
|
|
- function buildTable (data, columnsArray) {
|
|
|
- var html = ['<table><thead>']
|
|
|
- for (var k = 0; k < columnsArray.length; k++) {
|
|
|
- var columns = columnsArray[k]
|
|
|
- html.push('<tr>')
|
|
|
- for (var h = 0; h < columns.length; h++) {
|
|
|
- if (!columns[h].printIgnore) {
|
|
|
- html.push(
|
|
|
- '<th',
|
|
|
- sprintf(' rowspan="%s"', columns[h].rowspan),
|
|
|
- sprintf(' colspan="%s"', columns[h].colspan),
|
|
|
- sprintf('>%s</th>', columns[h].title)
|
|
|
- )
|
|
|
- }
|
|
|
- }
|
|
|
- html.push('</tr>')
|
|
|
- }
|
|
|
- html.push('</thead><tbody>')
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
- html.push('<tr>')
|
|
|
- for (var l = 0; l < columnsArray.length; l++) {
|
|
|
- columns = columnsArray[l]
|
|
|
- for (var j = 0; j < columns.length; j++) {
|
|
|
- if (!columns[j].printIgnore && columns[j].field) {
|
|
|
- html.push('<td>', formatValue(data[i], i, columns[j]), '</td>')
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- html.push('</tr>')
|
|
|
- }
|
|
|
- html.push('</tbody></table>')
|
|
|
- return html.join('')
|
|
|
- }
|
|
|
- function sortRows (data,colName,sortOrder) {
|
|
|
- if (!colName) {
|
|
|
- return data
|
|
|
+ const buildTable = (data, columnsArray) => {
|
|
|
+ const html = ['<table><thead>']
|
|
|
+ for (let k = 0; k < columnsArray.length; k++) {
|
|
|
+ const columns = columnsArray[k]
|
|
|
+ html.push('<tr>')
|
|
|
+ for (let h = 0; h < columns.length; h++) {
|
|
|
+ if (!columns[h].printIgnore) {
|
|
|
+ html.push(
|
|
|
+ `<th
|
|
|
+ ${Utils.sprintf(' rowspan="%s"', columns[h].rowspan)}
|
|
|
+ ${Utils.sprintf(' colspan="%s"', columns[h].colspan)}
|
|
|
+ >${columns[h].title}</th>`)
|
|
|
}
|
|
|
- var reverse = sortOrder !== 'asc'
|
|
|
- reverse = -((+reverse) || -1)
|
|
|
- return data.sort(function (a, b) {
|
|
|
- return reverse * (a[colName].localeCompare(b[colName]))
|
|
|
- })
|
|
|
}
|
|
|
- function filterRow (row,filters) {
|
|
|
- for (var index = 0; index < filters.length; ++index) {
|
|
|
- if (row[filters[index].colName] !== filters[index].value) {
|
|
|
- return false
|
|
|
+ html.push('</tr>')
|
|
|
+ }
|
|
|
+ html.push('</thead><tbody>')
|
|
|
+
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ html.push('<tr>')
|
|
|
+ for (let l = 0; l < columnsArray.length; l++) {
|
|
|
+ const columns = columnsArray[l]
|
|
|
+ for (let j = 0; j < columns.length; j++) {
|
|
|
+ if (!columns[j].printIgnore && columns[j].field) {
|
|
|
+ html.push('<td>', formatValue(data[i], i, columns[j]), '</td>')
|
|
|
}
|
|
|
}
|
|
|
- return true
|
|
|
- }
|
|
|
- function filterRows (data,filters) {
|
|
|
- return data.filter(function (row) {
|
|
|
- return filterRow(row,filters)
|
|
|
- })
|
|
|
}
|
|
|
- function getColumnFilters (columns) {
|
|
|
- return !columns || !columns[0] ? [] : columns[0].filter(function (col) {
|
|
|
- return col.printFilter
|
|
|
- }).map(function (col) {
|
|
|
- return {colName: col.field, value: col.printFilter}
|
|
|
- })
|
|
|
- }
|
|
|
- var doPrint = function (data) {
|
|
|
- data = filterRows(data,getColumnFilters(that.options.columns))
|
|
|
- data = sortRows(data,that.options.printSortColumn,that.options.printSortOrder)
|
|
|
- var table = buildTable(data,that.options.columns)
|
|
|
- var newWin = window.open('')
|
|
|
- newWin.document.write(that.options.printPageBuilder.call(this, table))
|
|
|
- newWin.print()
|
|
|
- newWin.close()
|
|
|
+ html.push('</tr>')
|
|
|
+ }
|
|
|
+ html.push('</tbody></table>')
|
|
|
+ return html.join('')
|
|
|
+ }
|
|
|
+
|
|
|
+ const sortRows = (data, colName, sortOrder) => {
|
|
|
+ if (!colName) {
|
|
|
+ return data
|
|
|
+ }
|
|
|
+ let reverse = sortOrder !== 'asc'
|
|
|
+ reverse = -((+reverse) || -1)
|
|
|
+ return data.sort((a, b) => reverse * (a[colName].localeCompare(b[colName])))
|
|
|
+ }
|
|
|
+
|
|
|
+ const filterRow = (row, filters) => {
|
|
|
+ for (let index = 0; index < filters.length; ++index) {
|
|
|
+ if (row[filters[index].colName] !== filters[index].value) {
|
|
|
+ return false
|
|
|
}
|
|
|
- doPrint(that.options.printAsFilteredAndSortedOnUI ? that.getData() : that.options.data.slice(0))
|
|
|
- })
|
|
|
+ }
|
|
|
+ return true
|
|
|
}
|
|
|
+
|
|
|
+ const filterRows = (data, filters) => {
|
|
|
+ return data.filter(row => filterRow(row,filters))
|
|
|
+ }
|
|
|
+
|
|
|
+ const getColumnFilters = columns => {
|
|
|
+ return !columns || !columns[0] ? [] : columns[0].filter(col => col.printFilter).map(col => ({
|
|
|
+ colName: col.field,
|
|
|
+ value: col.printFilter
|
|
|
+ }))
|
|
|
+ }
|
|
|
+
|
|
|
+ data = filterRows(data,getColumnFilters(this.options.columns))
|
|
|
+ data = sortRows(data, this.options.printSortColumn, this.options.printSortOrder)
|
|
|
+ const table = buildTable(data, this.options.columns)
|
|
|
+ const newWin = window.open('')
|
|
|
+ newWin.document.write(this.options.printPageBuilder.call(this, table))
|
|
|
+ newWin.print()
|
|
|
+ newWin.close()
|
|
|
}
|
|
|
}
|
|
|
})(jQuery)
|
zhixin