Fix ui bug (#4940)

* Fixed formatter docs typo

* Fixed events bug with detailViewIcon option

* Added on-all event for vue component

* Fixed treegrid destroy bug

* Fixed server side pagination sort bug

* Fixed export error with maintainMetaData and clientSidePagination options

site/docs/api/column-options.md

@@ -245,7 +245,7 @@ The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
 
   The context (this) is the column Object.
 
-  The cell formatter function, take three parameters:
+  The cell formatter function, take four parameters:
 
   * `value`: the field value.
   * `row`: the row record data.
@@ -504,4 +504,3 @@ The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
 - **Default:** `px`
 
 - **Example:** [Width Unit](https://examples.bootstrap-table.com/#column-options/width-unit.html)
-

src/bootstrap-table.js

@@ -225,7 +225,7 @@ class BootstrapTable {
     this.options.columns.forEach((columns, i) => {
       html.push('<tr>')
 
-      if (i === 0 && !this.options.cardView && this.options.detailView && this.options.detailViewIcon) {
+      if (i === 0 && Utils.hasDetailViewIcon(this.options)) {
         html.push(`<th class="detail" rowspan="${this.options.columns.length}">
           <div class="fht-cell"></div>
           </th>
@@ -921,9 +921,9 @@ class BootstrapTable {
         }
         return false
       }) : this.data
-    }
 
-    this.initSort()
+      this.initSort()
+    }
   }
 
   initPagination () {
@@ -1285,7 +1285,7 @@ class BootstrapTable {
       html.push(`<td colspan="${this.header.fields.length}"><div class="card-views">`)
     }
 
-    if (!this.options.cardView && this.options.detailView && this.options.detailViewIcon) {
+    if (Utils.hasDetailViewIcon(this.options)) {
       html.push('<td>')
 
       if (Utils.calculateObjectValue(null, this.options.detailFilter, [i, item])) {
@@ -1519,7 +1519,7 @@ class BootstrapTable {
       const item = this.data[rowIndex]
       const index = this.options.cardView ? $cardViewArr.index($cardViewTarget) : $td[0].cellIndex
       const fields = this.getVisibleFields()
-      const field = fields[this.options.detailView && this.options.detailViewIcon && !this.options.cardView ? index - 1 : index]
+      const field = fields[Utils.hasDetailViewIcon(this.options) ? index - 1 : index]
       const column = this.columns[this.fieldsColumnsIndex[field]]
       const value = Utils.getItemField(item, field, this.options.escape)
 
@@ -1583,7 +1583,7 @@ class BootstrapTable {
         return
       }
 
-      if (this.options.detailView && !this.options.cardView) {
+      if (Utils.hasDetailViewIcon(this.options)) {
         fieldIndex += 1
       }
 
@@ -1844,7 +1844,7 @@ class BootstrapTable {
       const $this = $(el)
       let index = i
 
-      if (this.options.detailView && this.options.detailViewIcon && !this.options.cardView) {
+      if (Utils.hasDetailViewIcon(this.options)) {
         if (i === 0) {
           const $thDetail = $ths.filter('.detail')
           const zoomWidth = $thDetail.innerWidth() - $thDetail.find('.fht-cell').width()
@@ -1878,7 +1878,7 @@ class BootstrapTable {
     const data = this.getData()
     const html = []
 
-    if (!this.options.cardView && this.options.detailView && this.options.detailViewIcon) {
+    if (Utils.hasDetailViewIcon(this.options)) {
       html.push('<th class="detail"><div class="th-inner"></div><div class="fht-cell"></div></th>')
     }
 
@@ -1963,7 +1963,7 @@ class BootstrapTable {
       const $this = $(el)
       let index = i
 
-      if (this.options.detailView && !this.options.cardView) {
+      if (Utils.hasDetailViewIcon(this.options)) {
         if (i === 0) {
           const $thDetail = $ths.filter('.detail')
           const zoomWidth = $thDetail.innerWidth() - $thDetail.find('.fht-cell').width()
@@ -2465,7 +2465,7 @@ class BootstrapTable {
     let j
     const $tr = this.$body.find('>tr')
 
-    if (this.options.detailView && !this.options.cardView) {
+    if (Utils.hasDetailViewIcon(this.options)) {
       col += 1
     }
 

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

@@ -257,6 +257,8 @@ $.BootstrapTable = class extends $.BootstrapTable {
     } else if (o.exportDataType === 'selected') {
       let data = this.getData()
       let selectedData = this.getSelections()
+      const pagination = o.pagination
+
       if (!selectedData.length) {
         return
       }
@@ -273,7 +275,13 @@ $.BootstrapTable = class extends $.BootstrapTable {
       }
 
       this.load(selectedData)
+      if (pagination) {
+        this.togglePagination()
+      }
       doExport(() => {
+        if (pagination) {
+          this.togglePagination()
+        }
         this.load(data)
       })
       this.trigger('export-saved', selectedData)

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

@@ -95,4 +95,9 @@ $.BootstrapTable = class extends $.BootstrapTable {
     }
     return super.initRow(item, idx, data, parentDom)
   }
+
+  destroy (...args) {
+    super.destroy(...args)
+    this.options.rowStyle = this._rowStyle
+  }
 }

src/utils/index.js

@@ -330,5 +330,9 @@ export default {
   getResizeEventName (id = '') {
     id = id || `${+new Date()}${~~(Math.random() * 1000000)}`
     return `resize.bootstrap-table-${id}`
+  },
+
+  hasDetailViewIcon (options) {
+    return options.detailView && options.detailViewIcon && !options.cardView
   }
 }

src/vue/BootstrapTable.vue

@@ -34,6 +34,7 @@ export default {
     this.$table.on('all.bs.table', (e, name, args) => {
       let eventName = $.fn.bootstrapTable.events[name]
       eventName = eventName.replace(/([A-Z])/g, '-$1').toLowerCase()
+      this.$emit('on-all', ...args)
       this.$emit(eventName, ...args)
     })