Feature/4606 (#5099)

* added the table footer to the print html

* Display merged Cells while printing

* check if there are mergedCells

* dont compare against undefined

* fixed issue with chrome

* Move to print extension

Co-authored-by: zhixin <wenzhixin2010@gmail.com>

src/extensions/print/bootstrap-table-print.js

@@ -72,6 +72,16 @@ $.extend($.fn.bootstrapTable.defaults.icons, {
 })
 
 $.BootstrapTable = class extends $.BootstrapTable {
+  init (...args) {
+    super.init(...args)
+
+    if (!this.options.showPrint) {
+      return
+    }
+
+    this.mergedCells = []
+  }
+
   initToolbar (...args) {
     this.showToolbar = this.showToolbar || this.options.showPrint
 
@@ -98,8 +108,29 @@ $.BootstrapTable = class extends $.BootstrapTable {
     })
   }
 
+  mergeCells (options) {
+    super.mergeCells(options)
+
+    if (!this.options.showPrint) {
+      return
+    }
+
+    let col = this.getVisibleFields().indexOf(options.field)
+
+    if (Utils.hasDetailViewIcon(this.options)) {
+      col += 1
+    }
+
+    this.mergedCells.push({
+      row: options.index,
+      col,
+      rowspan: options.rowspan || 1,
+      colspan: options.colspan || 1
+    })
+  }
+
   doPrint (data) {
-    const formatValue = (row, i, column ) => {
+    const formatValue = (row, i, column) => {
       const value = Utils.calculateObjectValue(column, column.printFormatter,
         [row[column.field], row, i], row[column.field])
 
@@ -127,20 +158,73 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
       html.push('</thead><tbody>')
 
+      const dontRender = []
+      if (this.mergedCells) {
+        for (let mc = 0; mc < this.mergedCells.length; mc++) {
+          const currentMergedCell = this.mergedCells[mc]
+          for (let rs = 0; rs < currentMergedCell.rowspan; rs++) {
+            const row = currentMergedCell.row + rs
+            for (let cs = 0; cs < currentMergedCell.colspan; cs++) {
+              const col = currentMergedCell.col + cs
+              dontRender.push(row + ',' + col)
+            }
+          }
+        }
+      }
+
       for (let i = 0; i < data.length; i++) {
         html.push('<tr>')
 
         for (const columns of columnsArray) {
           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>')
+            let rowspan = 0
+            let colspan = 0
+            if (this.mergedCells) {
+              for (let mc = 0; mc < this.mergedCells.length; mc++) {
+                const currentMergedCell = this.mergedCells[mc]
+                if (currentMergedCell.col === j && currentMergedCell.row === i) {
+                  rowspan = currentMergedCell.rowspan
+                  colspan = currentMergedCell.colspan
+                }
+              }
+            }
+
+            if (
+              !columns[j].printIgnore && columns[j].field
+              && (
+                !dontRender.includes(i + ',' + j)
+                || (rowspan > 0 && colspan > 0)
+              )
+            ) {
+              if (rowspan > 0 && colspan > 0) {
+                html.push(`<td ${Utils.sprintf(' rowspan="%s"', rowspan)} ${Utils.sprintf(' colspan="%s"', colspan)}>`, formatValue(data[i], i, columns[j]), '</td>')
+              } else {
+                html.push('<td>', formatValue(data[i], i, columns[j]), '</td>')
+              }
             }
           }
         }
 
         html.push('</tr>')
       }
-      html.push('</tbody></table>')
+
+      html.push('</tbody>')
+      if (this.options.showFooter) {
+        html.push('<footer><tr>')
+
+        for (const columns of columnsArray) {
+          for (let h = 0; h < columns.length; h++) {
+            if (!columns[h].printIgnore) {
+              const footerData = Utils.trToData(columns, this.$el.find('>tfoot>tr'))
+              const footerValue = Utils.calculateObjectValue(columns[h], columns[h].footerFormatter, [data], footerData[0] && footerData[0][columns[h].field] || '')
+              html.push(`<th>${footerValue}</th>`)
+            }
+          }
+        }
+
+        html.push('</tr></footer>')
+      }
+      html.push('</table>')
       return html.join('')
     }
 
@@ -162,14 +246,13 @@ $.BootstrapTable = class extends $.BootstrapTable {
       return true
     }
 
-    const filterRows = (data, filters) => data.filter(row => filterRow(row,filters))
-
+    const filterRows = (data, filters) => data.filter(row => filterRow(row, filters))
     const getColumnFilters = columns => !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 = 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('')