Merge pull request #5177 from wenzhixin/feature/5007

 bootstrap-table-group-by-v2 collapse/expand

.gitignore

@@ -1,6 +1,9 @@
 node_modules
 bower_components
 
+# Tools
+tools/bootstrap-table-examples
+
 # docs site
 _gh_pages
 

site/docs/extensions/group-by-v2.md

@@ -60,3 +60,27 @@ toc: true
    * `data`: an array of rows in the group.
 
 - **Default:** `undefined`
+
+### groupByToggle
+
+- **attribute:** `data-group-by-toggle`
+
+- **type:** `Boolean`
+
+- **Detail:**
+
+   Set `true` to allow collapse/expand groups.
+
+- **Default:** `false`
+
+### groupByShowToggleIcon
+
+- **attribute:** `data-group-by-show-toggle-icon`
+
+- **type:** `Boolean`
+
+- **Detail:**
+
+   Set `true` to show icons if the group is collapsed or expanded (see groupByToggle).
+
+- **Default:** `false`

src/extensions/group-by-v2/bootstrap-table-group-by.js

@@ -5,24 +5,6 @@
 
 let initBodyCaller
 
-// it only does '%s', and return '' when arguments are undefined
-const sprintf = function (str) {
-  const args = arguments
-  let flag = true
-  let i = 1
-
-  str = str.replace(/%s/g, () => {
-    const arg = args[i++]
-
-    if (typeof arg === 'undefined') {
-      flag = false
-      return ''
-    }
-    return arg
-  })
-  return flag ? str : ''
-}
-
 const groupBy = (array, f) => {
   const tmpGroups = {}
   array.forEach(o => {
@@ -34,10 +16,23 @@ const groupBy = (array, f) => {
   return tmpGroups
 }
 
+$.extend($.fn.bootstrapTable.defaults.icons, {
+  collapseGroup: {
+    bootstrap3: 'glyphicon-chevron-up',
+    materialize: 'arrow_drop_down'
+  }[$.fn.bootstrapTable.theme] || 'fa-angle-up',
+  expandGroup: {
+    bootstrap3: 'glyphicon-chevron-down',
+    materialize: 'arrow_drop_up'
+  }[$.fn.bootstrapTable.theme] || 'fa-angle-down'
+})
+
 $.extend($.fn.bootstrapTable.defaults, {
   groupBy: false,
   groupByField: '',
-  groupByFormatter: undefined
+  groupByFormatter: undefined,
+  groupByToggle: false,
+  groupByShowToggleIcon: false
 })
 
 const Utils = $.fn.bootstrapTable.utils
@@ -53,7 +48,6 @@ BootstrapTable.prototype.initSort = function (...args) {
   this.tableGroups = []
 
   if ((this.options.groupBy) && (this.options.groupByField !== '')) {
-
     if ((this.options.sortName !== this.options.groupByField)) {
       if (this.options.customSort) {
         Utils.calculateObjectValue(this.options, this.options.customSort, [
@@ -112,7 +106,6 @@ BootstrapTable.prototype.initSort = function (...args) {
 
 BootstrapTable.prototype.initBody = function (...args) {
   initBodyCaller = true
-
   _initBody.apply(this, Array.prototype.slice.apply(args))
 
   if ((this.options.groupBy) && (this.options.groupByField !== '')) {
@@ -137,8 +130,7 @@ BootstrapTable.prototype.initBody = function (...args) {
     this.tableGroups.forEach(item => {
       const html = []
 
-      html.push(sprintf('<tr class="info groupBy expanded" data-group-index="%s">', item.id))
-
+      html.push(Utils.sprintf('<tr class="info groupBy %s" data-group-index="%s">', this.options.groupByToggle ? 'expanded' : '', item.id))
       if (that.options.detailView && !that.options.cardView) {
         html.push('<td class="detail"></td>')
       }
@@ -149,17 +141,21 @@ BootstrapTable.prototype.initBody = function (...args) {
           '</td>'
         )
       }
+
       let formattedValue = item.name
       if (typeof (that.options.groupByFormatter) === 'function') {
         formattedValue = that.options.groupByFormatter(item.name, item.id, item.data)
       }
       html.push('<td',
-        sprintf(' colspan="%s"', visibleColumns),
-        '>', formattedValue, '</td>'
+        Utils.sprintf(' colspan="%s"', visibleColumns),
+        '>', formattedValue
       )
 
-      html.push('</tr>')
+      if (this.options.groupByToggle && this.options.groupByShowToggleIcon) {
+        html.push(`<span class="float-right ${this.options.iconsPrefix} ${this.options.icons.collapseGroup}"></span>`)
+      }
 
+      html.push('</td></tr>')
       that.$body.find(`tr[data-parent-index=${item.id}]:first`).before($(html.join('')))
     })
 
@@ -176,11 +172,14 @@ BootstrapTable.prototype.initBody = function (...args) {
       })
     })
 
-    this.$container.off('click', '.groupBy')
-      .on('click', '.groupBy', function () {
-        $(this).toggleClass('expanded')
-        that.$body.find(`tr[data-parent-index=${$(this).closest('tr').data('group-index')}]`).toggleClass('hidden')
-      })
+    if (this.options.groupByToggle) {
+      this.$container.off('click', '.groupBy')
+        .on('click', '.groupBy', function () {
+          $(this).toggleClass('expanded collapsed')
+          $(this).find('span').toggleClass(`${that.options.icons.collapseGroup} ${that.options.icons.expandGroup}`)
+          that.$body.find(`tr[data-parent-index=${$(this).closest('tr').data('group-index')}]`).toggleClass('hidden')
+        })
+    }
 
     this.$container.off('click', '[name="btSelectGroup"]')
       .on('click', '[name="btSelectGroup"]', function (event) {

src/extensions/group-by-v2/bootstrap-table-group-by.scss

@@ -1,7 +1,8 @@
-.bootstrap-table .table > tbody > tr.groupBy {
+.bootstrap-table .table > tbody > tr.groupBy.expanded,
+.bootstrap-table .table > tbody > tr.groupBy.collapsed {
   cursor: pointer;
 }
 
-.bootstrap-table .table > tbody > tr.hidden + tr.detail-view {
+.bootstrap-table .table > tbody > tr.hidden {
   display: none;
 }