Improved export to support all themes

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

@@ -5,27 +5,6 @@
 
 const Utils = $.fn.bootstrapTable.utils
 
-const bootstrap = {
-  3: {
-    icons: {
-      export: 'glyphicon-export icon-share'
-    },
-    html: {
-      dropmenu: '<ul class="dropdown-menu" role="menu"></ul>',
-      dropitem: '<li role="menuitem" data-type="%s"><a href="javascript:">%s</a></li>'
-    }
-  },
-  4: {
-    icons: {
-      export: 'fa-download'
-    },
-    html: {
-      dropmenu: '<div class="dropdown-menu dropdown-menu-right"></div>',
-      dropitem: '<a class="dropdown-item" data-type="%s" href="javascript:">%s</a>'
-    }
-  }
-}[Utils.bootstrapVersion]
-
 const TYPE_NAME = {
   json: 'JSON',
   xml: 'XML',
@@ -57,7 +36,10 @@ $.extend($.fn.bootstrapTable.defaults, {
 })
 
 $.extend($.fn.bootstrapTable.defaults.icons, {
-  export: bootstrap.icons.export
+  export: {
+    bootstrap3: 'glyphicon-export icon-share',
+    materialize: 'file_download'
+  }[$.fn.bootstrapTable.theme] || 'fa-download'
 })
 
 $.extend($.fn.bootstrapTable.locales, {
@@ -90,44 +72,56 @@ $.BootstrapTable = class extends $.BootstrapTable {
     if (!this.options.showExport) {
       return
     }
-    const $btnGroup = this.$toolbar.find('>.btn-group')
+    const $btnGroup = this.$toolbar.find('>.columns')
     this.$export = $btnGroup.find('div.export')
 
     if (this.$export.length) {
       this.updateExportButton()
       return
     }
+
+    let $menu = $(this.constants.html.pageDropdown.join(''))
+
     this.$export = $(`
-      <div class="export btn-group">
+      <div class="export ${this.constants.classes.buttonsDropdown}">
       <button class="${this.constants.buttonsClass} dropdown-toggle"
-        aria-label="export type"
-        title="${o.formatExport()}"
-        data-toggle="dropdown"
-        type="button">
-        <i class="${o.iconsPrefix} ${o.icons.export}"></i>
-        <span class="caret"></span>
+      aria-label="Export"
+      data-toggle="dropdown"
+      type="button"
+      title="${o.formatExport()}">
+      ${Utils.sprintf(this.constants.html.icon, o.iconsPrefix, o.icons.export)}
+      ${this.constants.html.dropdownCaret}
       </button>
-      ${bootstrap.html.dropmenu}
       </div>
     `).appendTo($btnGroup)
+    this.$export.append($menu)
 
     this.updateExportButton()
 
-    const $menu = this.$export.find('.dropdown-menu')
     let exportTypes = o.exportTypes
 
     if (typeof exportTypes === 'string') {
       const types = exportTypes.slice(1, -1).replace(/ /g, '').split(',')
       exportTypes = types.map(t => t.slice(1, -1))
     }
+
+    // themes support
+    if ($menu.children().length) {
+      $menu = $menu.children().eq(0)
+    }
     for (const type of exportTypes) {
       if (TYPE_NAME.hasOwnProperty(type)) {
-        $menu.append(Utils.sprintf(bootstrap.html.dropitem, type, TYPE_NAME[type]))
+        const $item = $(Utils.sprintf(this.constants.html.pageDropdownItem,
+          '', TYPE_NAME[type]))
+        $item.attr('data-type', type)
+        $menu.append($item)
       }
     }
 
-    $menu.find('>li, >a').click(({currentTarget}) => {
-      const type = $(currentTarget).data('type')
+    $menu.children().click(e => {
+      e.preventDefault()
+
+      const type = $(e.currentTarget).data('type')
       const exportOptions = {
         type,
         escape: false
@@ -135,6 +129,21 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
       this.exportTable(exportOptions)
     })
+    this.handleToolbar()
+  }
+
+  handleToolbar () {
+    if (!this.$export) {
+      return
+    }
+
+    if ($.fn.bootstrapTable.theme === 'foundation') {
+      this.$export.find('.dropdown-pane').attr('id', 'toolbar-export-id')
+    } else if ($.fn.bootstrapTable.theme === 'materialize') {
+      this.$export.find('.dropdown-content').attr('id', 'toolbar-export-id')
+    }
+
+    super.handleToolbar()
   }
 
   exportTable (options) {
@@ -186,7 +195,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
             this.toggleView()
           }
 
-          callback()
+          if (callback) callback()
         }
       }, o.exportOptions, options))
     }

src/themes/bulma/bootstrap-table-bulma.js

@@ -36,7 +36,11 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
   initToolbar () {
     super.initToolbar()
-    if (this.options.showColumns) {
+    this.handleToolbar()
+  }
+
+  handleToolbar () {
+    if (this.$toolbar.find('.dropdown').length) {
       this._initDropdown()
     }
   }
@@ -48,12 +52,14 @@ $.BootstrapTable = class extends $.BootstrapTable {
     }
   }
 
-  _initDropdown ($el) {
+  _initDropdown () {
     const $dropdowns = this.$container.find('.dropdown:not(.is-hoverable)')
 
     $dropdowns.off('click').on('click', e => {
+      const $this = $(e.currentTarget)
       e.stopPropagation()
-      $(e.currentTarget).toggleClass('is-active')
+      $dropdowns.not($this).removeClass('is-active')
+      $this.toggleClass('is-active')
     })
 
     $(document).off('click.bs.dropdown.bulma').on('click.bs.dropdown.bulma', () => {

src/themes/foundation/bootstrap-table-foundation.js

@@ -23,9 +23,9 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.paginationActive = 'current'
     this.constants.classes.buttonActive = 'success'
 
-    this.constants.html.toobarDropdow = ['<ul class="dropdown-pane" id="toolbar-dropdown" data-dropdown><ul class="vertical menu">', '</ul></div>']
+    this.constants.html.toobarDropdow = ['<ul class="dropdown-pane" id="toolbar-columns-id" data-dropdown><ul class="vertical menu">', '</ul></div>']
     this.constants.html.toobarDropdowItem = '<li><label class="dropdown-item">%s</label></li>'
-    this.constants.html.pageDropdown = ['<ul class="dropdown-pane" id="page-list-dropdown" data-dropdown><ul class="vertical menu">', '</ul></ul>']
+    this.constants.html.pageDropdown = ['<div class="dropdown-pane" id="pagination-list-id" data-dropdown><ul class="vertical menu">', '</ul></div>']
     this.constants.html.pageDropdownItem = '<li class="dropdown-item %s"><a href="#">%s</a></li>'
     this.constants.html.dropdownCaret = '<i class="fa fa-angle-down"></i>'
     this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>'],
@@ -34,14 +34,19 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
   initToolbar () {
     super.initToolbar()
+    this.handleToolbar()
+  }
+
+  handleToolbar () {
+    if (this.$toolbar.find('.dropdown-toggle').length) {
+      this.$toolbar.find('.dropdown-toggle').each((i, el) => {
+        $(el).attr('data-toggle', $(el).next().attr('id'))
+        const $pane = $(el).next()
+          .attr('data-position', 'bottom')
+          .attr('data-alignment', 'right')
+        new window.Foundation.Dropdown($pane)
+      })
 
-    if (this.options.showColumns) {
-      this.$toolbar.find('.keep-open')
-        .attr('data-toggle', 'toolbar-dropdown')
-      const $pane = this.$toolbar.find('.dropdown-pane')
-        .attr('data-position', 'bottom')
-        .attr('data-alignment', 'right')
-      new window.Foundation.Dropdown($pane)
       this._initDropdown()
     }
   }
@@ -50,25 +55,30 @@ $.BootstrapTable = class extends $.BootstrapTable {
     super.initPagination()
 
     if (this.options.pagination && !this.options.onlyInfoPagination) {
-      this.$pagination.find('.dropdown-toggle')
-        .attr('data-toggle', 'page-list-dropdown')
+      const $el = this.$pagination.find('.dropdown-toggle')
+      $el.attr('data-toggle', $el.next().attr('id'))
+
       const $pane = this.$pagination.find('.dropdown-pane')
         .attr('data-position', 'top')
         .attr('data-alignment', 'left')
       new window.Foundation.Dropdown($pane)
+
+      this._initDropdown()
     }
   }
 
-  _initDropdown ($el) {
-    const $dropdowns = this.$container.find('.dropdown-container')
+  _initDropdown () {
+    const $dropdowns = this.$container.find('.dropdown-toggle')
 
     $dropdowns.off('click').on('click', e => {
+      const $this = $(e.currentTarget)
       e.stopPropagation()
-      $dropdowns.find('.dropdown-pane').foundation('toggle')
+      $dropdowns.not($this).next().foundation('close')
+      $this.next().foundation('toggle')
     })
 
     $(document).off('click.bs.dropdown.foundation').on('click.bs.dropdown.foundation', () => {
-      $dropdowns.find('.dropdown-pane').foundation('close')
+      $dropdowns.next().foundation('close')
     })
   }
 }

src/themes/foundation/bootstrap-table-foundation.scss

@@ -21,20 +21,22 @@
       height: 2.5293rem;
     }
 
-    .dropdown-container {
-      .button {
-        &:hover .menu {
-          background: #fff;
+    .keep-open {
+      .dropdown-container {
+        .button {
+          &:hover .menu {
+            background: #fff;
+          }
         }
-      }
 
-      .menu {
-        li {
-          padding: 5px 0;
+        .menu {
+          li {
+            padding: 5px 0;
 
-          label {
-            white-space: nowrap;
-            text-align: left;
+            label {
+              white-space: nowrap;
+              text-align: left;
+            }
           }
         }
       }

src/themes/materialize/bootstrap-table-materialize.js

@@ -35,9 +35,9 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.paginationDropdown = ''
     this.constants.classes.buttonActive = 'green'
 
-    this.constants.html.toobarDropdow = ['<ul id="toolbar-dropdown" class="dropdown-content">', '</ul>']
+    this.constants.html.toobarDropdow = ['<ul id="toolbar-columns-id" class="dropdown-content">', '</ul>']
     this.constants.html.toobarDropdowItem = '<li><label>%s</label></li>'
-    this.constants.html.pageDropdown = ['<ul id="page-list-dropdown" class="dropdown-content">', '</ul>']
+    this.constants.html.pageDropdown = ['<ul id="pagination-list-id" class="dropdown-content">', '</ul>']
     this.constants.html.pageDropdownItem = '<li><a class="%s" href="#">%s</a></li>'
     this.constants.html.dropdownCaret = '<i class="material-icons">arrow_drop_down</i>'
     this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>'],
@@ -47,15 +47,19 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
   initToolbar () {
     super.initToolbar()
+    this.handleToolbar()
+  }
 
-    if (this.options.showColumns) {
-      this.$toolbar.find('.dropdown-toggle')
-        .attr('data-target', 'toolbar-dropdown')
-        .dropdown({
-          alignment: 'right',
-          constrainWidth: false,
-          closeOnClick: false
-        })
+  handleToolbar () {
+    if (this.$toolbar.find('.dropdown-toggle').length) {
+      this.$toolbar.find('.dropdown-toggle').each((i, el) => {
+        $(el).attr('data-target', $(el).next().attr('id'))
+          .dropdown({
+            alignment: 'right',
+            constrainWidth: false,
+            closeOnClick: false
+          })
+      })
     }
   }
 
@@ -64,7 +68,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
     if (this.options.pagination && !this.options.onlyInfoPagination) {
       this.$pagination.find('.dropdown-toggle')
-        .attr('data-target', 'page-list-dropdown')
+        .attr('data-target', this.$pagination.find('.dropdown-content').attr('id'))
         .dropdown()
     }
   }

src/themes/materialize/bootstrap-table-materialize.scss

@@ -21,8 +21,11 @@
       margin-left: 3px;
     }
 
-    .keep-open {
+    .columns > div {
       display: inline;
+    }
+
+    .keep-open {
 
       li label {
         padding-top: 13px;

src/themes/semantic/bootstrap-table-semantic.js

@@ -32,9 +32,11 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
   initToolbar () {
     super.initToolbar()
-    if (this.options.showColumns) {
-      this.$toolbar.find('.button.dropdown').dropdown()
-    }
+    this.handleToolbar()
+  }
+
+  handleToolbar () {
+    this.$toolbar.find('.button.dropdown').dropdown()
   }
 
   initPagination () {

src/themes/semantic/bootstrap-table-semantic.scss

@@ -28,7 +28,7 @@
       padding-bottom: 0.60714286rem;
     }
 
-    .keep-open.button.dropdown {
+    .button.dropdown {
       padding: 0;
 
       .button {