Merge pull request #4219 from Falseee/Falseee/feature/issue-3375

Detailview per column

site/docs/api/column-options.md

@@ -406,3 +406,19 @@ The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
   Set `true` to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.
 
 - **Default:** `false`
+
+## detailFormatter
+
+- **Attribute:** `data-detail-formatter`
+
+- **Type:** `Function`
+
+- **Detail:**
+
+  Format your detail view when `detailView` and `detailViewByClick` is set to `true`. Return a `String` and it will be appended into the detail view cell, optionally render the element directly using the third parameter which is a jQuery element of the target cell.
+  
+  Fallback is the detail-formatter of the table.
+
+- **Default:** `function(index, row, element) { return '' }`
+
+- **Example:** [Detail View](https://examples.bootstrap-table.com/#options/detail-view.html)

site/docs/api/table-options.md

@@ -1173,6 +1173,18 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Detail Filter](https://examples.bootstrap-table.com/#options/detail-filter.html)
 
+## detailViewByClick
+
+- **Attribute:** `data-detail-view-by-click`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  Set `true` to toggle the detail view, when a cell is clicked.
+
+- **Example:** [Toggle detail view by click](https://examples.bootstrap-table.com/#options/detail-view-by-click.html)
+
 ## toolbar
 
 - **Attribute:** `data-toolbar`

src/bootstrap-table.js

@@ -444,6 +444,7 @@
     uniqueId: undefined,
     cardView: false,
     detailView: false,
+    detailViewByClick: false,
     detailFormatter (index, row) {
       return ''
     },
@@ -609,6 +610,7 @@
     footerFormatter: undefined,
     events: undefined,
     sorter: undefined,
+    detailFormatter: undefined,
     sortName: undefined,
     cellStyle: undefined,
     searchable: true,
@@ -851,6 +853,7 @@
         styles: [],
         classes: [],
         formatters: [],
+        detailFormatters: [],
         events: [],
         sorters: [],
         sortNames: [],
@@ -903,6 +906,7 @@
             this.header.styles[column.fieldIndex] = align + style
             this.header.classes[column.fieldIndex] = class_
             this.header.formatters[column.fieldIndex] = column.formatter
+            this.header.detailFormatters[column.fieldIndex] = column.detailFormatter
             this.header.events[column.fieldIndex] = column.events
             this.header.sorters[column.fieldIndex] = column.sorter
             this.header.sortNames[column.fieldIndex] = column.sortName
@@ -2046,32 +2050,15 @@
             $selectItem[0].click() // #144: .trigger('click') bug
           }
         }
+
+        if (type === 'click' && this.options.detailViewByClick) {
+          this.toggleDetailView($tr.find('.detail-icon'), this.header.detailFormatters[index - 1])
+        }
       })
 
       this.$body.find('> tr[data-index] > td > .detail-icon').off('click').on('click', e => {
         e.preventDefault()
-
-        const $this = $(e.currentTarget) // Fix #980 Detail view, when searching, returns wrong row
-        const $tr = $this.parent().parent()
-        const index = $tr.data('index')
-        const row = data[index]
-
-        // remove and update
-        if ($tr.next().is('tr.detail-view')) {
-          $this.html(Utils.sprintf(this.constants.html.icon, this.options.iconsPrefix, this.options.icons.detailOpen))
-          this.trigger('collapse-row', index, row, $tr.next())
-          $tr.next().remove()
-        } else {
-          $this.html(Utils.sprintf(this.constants.html.icon, this.options.iconsPrefix, this.options.icons.detailClose))
-          $tr.after(Utils.sprintf('<tr class="detail-view"><td colspan="%s"></td></tr>', $tr.children('td').length))
-          const $element = $tr.next().find('td')
-          const content = Utils.calculateObjectValue(this.options, this.options.detailFormatter, [index, row, $element], '')
-          if ($element.length === 1) {
-            $element.append(content)
-          }
-          this.trigger('expand-row', index, row, $element)
-        }
-        this.resetView()
+        this.toggleDetailView($(e.currentTarget))
         return false
       })
 
@@ -2135,6 +2122,30 @@
       this.initFooter()
     }
 
+    toggleDetailView ($iconElement, columnDetailFormatter) {
+      const $tr = $iconElement.parent().parent()
+      const index = $tr.data('index')
+      const row = this.data[index]
+
+      // remove and update
+      if ($tr.next().is('tr.detail-view')) {
+        $iconElement.html(Utils.sprintf(this.constants.html.icon, this.options.iconsPrefix, this.options.icons.detailOpen))
+        this.trigger('collapse-row', index, row, $tr.next())
+        $tr.next().remove()
+      } else {
+        $iconElement.html(Utils.sprintf(this.constants.html.icon, this.options.iconsPrefix, this.options.icons.detailClose))
+        $tr.after(Utils.sprintf('<tr class="detail-view"><td colspan="%s"></td></tr>', $tr.children('td').length))
+        const $element = $tr.next().find('td')
+        const detailFormatter = columnDetailFormatter || this.options.detailFormatter
+        const content = Utils.calculateObjectValue(this.options, detailFormatter, [index, row, $element], '')
+        if ($element.length === 1) {
+          $element.append(content)
+        }
+        this.trigger('expand-row', index, row, $element)
+      }
+      this.resetView()
+    }
+
     initServer (silent, query, url) {
       let data = {}
       const index = this.header.fields.indexOf(this.options.sortName)