Merge pull request #4259 from wenzhixin/feature/2628

Added option to hide the show/hide icons for the detail view

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`.

site/docs/api/table-options.md

@@ -1184,6 +1184,18 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Detail View](https://examples.bootstrap-table.com/#options/detail-view.html)
 
+## detailViewIcon
+
+- **Attribute:** `data-detail-view-icon`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  Set `true` to show the detail view column (plus/minus icon).
+
+- **Default:** `true`
+
 ## detailFormatter
 
 - **Attribute:** `data-detail-formatter`

src/bootstrap-table.js

@@ -451,6 +451,7 @@
     uniqueId: undefined,
     cardView: false,
     detailView: false,
+    detailViewIcon: true,
     detailViewByClick: false,
     detailFormatter (index, row) {
       return ''
@@ -877,7 +878,7 @@
       this.options.columns.forEach((columns, i) => {
         html.push('<tr>')
 
-        if (i === 0 && !this.options.cardView && this.options.detailView) {
+        if (i === 0 && !this.options.cardView && this.options.detailView && this.options.detailViewIcon) {
           html.push(`<th class="detail" rowspan="${this.options.columns.length}">
             <div class="fht-cell"></div>
             </th>
@@ -1394,9 +1395,9 @@
               for (const key in f) {
                 if (
                   (Array.isArray(f[key]) &&
-                        !f[key].includes(item[key])) ||
-                    (!Array.isArray(f[key]) &&
-                        item[key] !== f[key])
+                    !f[key].includes(item[key])) ||
+                  (!Array.isArray(f[key]) &&
+                    item[key] !== f[key])
                 ) {
                   return false
                 }
@@ -1406,9 +1407,9 @@
               for (const key in f) {
                 if (
                   (Array.isArray(f[key]) &&
-                        f[key].includes(item[key])) ||
-                    (!Array.isArray(f[key]) &&
-                        item[key] === f[key])
+                    f[key].includes(item[key])) ||
+                  (!Array.isArray(f[key]) &&
+                    item[key] === f[key])
                 ) {
                   match = true
                 }
@@ -1594,7 +1595,7 @@
           for (const value of list) {
             pageList.push(
               (value.toLowerCase() === o.formatAllRows().toLowerCase() ||
-              ['all', 'unlimited'].includes(value.toLowerCase()))
+                ['all', 'unlimited'].includes(value.toLowerCase()))
                 ? o.formatAllRows() : +value)
           }
         }
@@ -1863,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_),
         '>'
       )
@@ -1871,7 +1873,7 @@
         html.push(`<td colspan="${this.header.fields.length}"><div class="card-views">`)
       }
 
-      if (!this.options.cardView && this.options.detailView) {
+      if (!this.options.cardView && this.options.detailView && this.options.detailViewIcon) {
         html.push('<td>')
 
         if (Utils.calculateObjectValue(null, this.options.detailFilter, [i, item])) {
@@ -2064,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]
@@ -2094,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
@@ -2104,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
       })
 
@@ -2167,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()
     }
 
@@ -2364,7 +2355,7 @@
 
       const fixedBody = this.$tableBody.get(0)
       const scrollWidth = fixedBody.scrollWidth > fixedBody.clientWidth &&
-        fixedBody.scrollHeight > fixedBody.clientHeight + this.$header.outerHeight()
+      fixedBody.scrollHeight > fixedBody.clientHeight + this.$header.outerHeight()
         ? Utils.getScrollBarWidth() : 0
 
       this.$el.css('margin-top', -this.$header.outerHeight())
@@ -2450,7 +2441,7 @@
       const data = this.getData()
       const html = []
 
-      if (!this.options.cardView && this.options.detailView) {
+      if (!this.options.cardView && this.options.detailView && this.options.detailViewIcon) {
         html.push('<th class="detail"><div class="th-inner"></div><div class="fht-cell"></div></th>')
       }
 
@@ -2510,7 +2501,7 @@
 
       const fixedBody = this.$tableBody.get(0)
       const scrollWidth = fixedBody.scrollWidth > fixedBody.clientWidth &&
-        fixedBody.scrollHeight > fixedBody.clientHeight + this.$header.outerHeight()
+      fixedBody.scrollHeight > fixedBody.clientHeight + this.$header.outerHeight()
         ? Utils.getScrollBarWidth() : 0
 
       this.$tableFooter
@@ -3312,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.detailViewIcon) {
+        $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.detailViewIcon) {
+        $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'))
       }
     }
 
@@ -3424,7 +3405,7 @@
     'toggleView',
     'refreshOptions',
     'resetSearch',
-    'expandRow', 'collapseRow',
+    'expandRow', 'collapseRow', 'toggleDetailView',
     'expandAllRows', 'collapseAllRows',
     'updateFormatText', 'updateCellById'
   ]