documentated toggleDetailView and fixed expandAllRows and

collapseAllRows

site/docs/api/methods.md

@@ -475,6 +475,14 @@ The calling method syntax: `$('#table').bootstrapTable('method', parameter)`.
 
   Toggle the card/table view.
 
+## toggleDetailView
+
+- **Parameter:** `index`
+
+- **Detail:**
+
+  Toggle the row that has the `index` passed by parameter if the detail view option is set to `true`.
+
 ## expandRow
 
 - **Parameter:** `index`
@@ -493,16 +501,12 @@ The calling method syntax: `$('#table').bootstrapTable('method', parameter)`.
 
 ## expandAllRows
 
-- **Parameter:** `isSubTable`
-
 - **Detail:**
 
   Expand all rows if the detail view option is set to `true`.
 
 ## collapseAllRows
 
-- **Parameter:** `isSubTable`
-
 - **Detail:**
 
   Collapse all rows if the detail view option is set to `true`.

src/bootstrap-table.js

@@ -1864,6 +1864,7 @@
         Utils.sprintf(' class="%s"', style.classes || (Array.isArray(item) ? undefined : item._class)),
         ` data-index="${i}"`,
         Utils.sprintf(' data-uniqueid="%s"', item[this.options.uniqueId]),
+        Utils.sprintf(' data-has-detail-view="%s"', (!this.options.cardView && this.options.detailView && Utils.calculateObjectValue(null, this.options.detailFilter, [i, item])) ? 'true' : undefined),
         Utils.sprintf('%s', data_),
         '>'
       )
@@ -2065,9 +2066,10 @@
       this.$body.find('> tr[data-index] > td').off('click dblclick').on('click dblclick', e => {
         const $td = $(e.currentTarget)
         const $tr = $td.parent()
-        const $cardViewArr = $(e.target).parents('.card-views').children()
-        const $cardViewTarget = $(e.target).parents('.card-view')
-        const item = this.data[$tr.data('index')]
+        const $cardViewArr = $(target).parents('.card-views').children()
+        const $cardViewTarget = $(target).parents('.card-view')
+        const rowIndex = $tr.data('index')
+        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.cardView ? index - 1 : index]
@@ -2095,7 +2097,7 @@
         }
 
         if (e.type === 'click' && this.options.detailViewByClick) {
-          this.toggleDetailView($tr.find('.detail-icon'), this.header.detailFormatters[index - 1])
+          this.toggleDetailView(rowIndex)
         }
       }).off('mousedown').on('mousedown', e => {
         // https://github.com/jquery/jquery/issues/1741
@@ -2105,7 +2107,7 @@
 
       this.$body.find('> tr[data-index] > td > .detail-icon').off('click').on('click', e => {
         e.preventDefault()
-        this.toggleDetailView($(e.currentTarget))
+        this.toggleDetailView($(e.currentTarget).parent().parent().data('index'))
         return false
       })
 
@@ -2168,27 +2170,15 @@
       this.trigger('post-body', data)
     }
 
-    toggleDetailView ($iconElement, columnDetailFormatter) {
-      const $tr = $iconElement.parent().parent()
-      const index = $tr.data('index')
-      const row = this.data[index]
+    toggleDetailView (index) {
+      const $tr = this.$body.find(Utils.sprintf('> tr[data-index="%s"]', 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()
+        this.collapseRow(index)
       } 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.expandRow(index)
       }
+
       this.resetView()
     }
 
@@ -3313,66 +3303,56 @@
       this.onSearch({currentTarget: $search})
     }
 
-    expandRow_ (expand, index) {
-      const $tr = this.$body.find(Utils.sprintf('> tr[data-index="%s"]', index))
-      if ($tr.next().is('tr.detail-view') === (!expand)) {
-        $tr.find('> td > .detail-icon').click()
+    expandRow (index) {
+      const row = this.data[index]
+      const $tr = this.$body.find(Utils.sprintf('> tr[data-index="%s"][data-has-detail-view]', index))
+      if ($tr.next().is('tr.detail-view')) {
+        return
       }
-    }
 
-    expandRow (index) {
-      this.expandRow_(true, index)
+      if (this.options.showDetailView) {
+        $tr.find('a.detail-icon').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 = this.header.detailFormatters[index - 1] || 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)
     }
 
     collapseRow (index) {
-      this.expandRow_(false, index)
-    }
-
-    expandAllRows (isSubTable) {
-      if (isSubTable) {
-        const $tr = this.$body.find(Utils.sprintf('> tr[data-index="%s"]', 0))
-        let detailIcon = null
-        let executeInterval = false
-        let idInterval = -1
-
-        if (!$tr.next().is('tr.detail-view')) {
-          $tr.find('> td > .detail-icon').click()
-          executeInterval = true
-        } else if (!$tr.next().next().is('tr.detail-view')) {
-          $tr.next().find('.detail-icon').click()
-          executeInterval = true
-        }
-
-        if (executeInterval) {
-          try {
-            idInterval = setInterval(() => {
-              detailIcon = this.$body.find('tr.detail-view').last().find('.detail-icon')
-              if (detailIcon.length > 0) {
-                detailIcon.click()
-              } else {
-                clearInterval(idInterval)
-              }
-            }, 1)
-          } catch (ex) {
-            clearInterval(idInterval)
-          }
-        }
-      } else {
-        const trs = this.$body.children()
-        for (let i = 0; i < trs.length; i++) {
-          this.expandRow_(true, $(trs[i]).data('index'))
-        }
+      const row = this.data[index]
+      const $tr = this.$body.find(Utils.sprintf('> tr[data-index="%s"][data-has-detail-view]', index))
+      if (!$tr.next().is('tr.detail-view')) {
+        return
       }
+
+      if (this.options.showDetailView) {
+        $tr.find('a.detail-icon').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()
     }
 
-    collapseAllRows (isSubTable) {
-      if (isSubTable) {
-        this.expandRow_(false, 0)
-      } else {
-        const trs = this.$body.children()
-        for (let i = 0; i < trs.length; i++) {
-          this.expandRow_(false, $(trs[i]).data('index'))
-        }
+    expandAllRows () {
+      const trs = this.$body.find('> tr[data-index][data-has-detail-view]')
+      for (let i = 0; i < trs.length; i++) {
+        this.expandRow($(trs[i]).data('index'))
+      }
+    }
+
+    collapseAllRows () {
+      const trs = this.$body.find('> tr[data-index][data-has-detail-view]')
+      for (let i = 0; i < trs.length; i++) {
+        this.collapseRow($(trs[i]).data('index'))
       }
     }
 
@@ -3425,7 +3405,7 @@
     'toggleView',
     'refreshOptions',
     'resetSearch',
-    'expandRow', 'collapseRow',
+    'expandRow', 'collapseRow', 'toggleDetailView',
     'expandAllRows', 'collapseAllRows',
     'updateFormatText', 'updateCellById'
   ]