Added custom view extension

site/docs/extensions/custom-view.md

@@ -0,0 +1,93 @@
+---
+layout: docs
+title: Custom View
+description: Custom View extension of Bootstrap Table.
+group: extensions
+toc: true
+---
+
+## Description
+This extension adds the ability to create a custom view to display the data.
+
+## Usage
+
+{% highlight html %}
+<script src="extensions/custom-view/bootstrap-table-custom-view.js"></script>
+{% endhighlight %}
+
+## Example
+
+[Custom View](https://examples.bootstrap-table.com/#extensions/custom-view.html)
+
+## Options
+
+### customView
+
+- **Attribute:** `data-custom-view`
+
+- **Type:** `Function|Boolean`
+
+- **Detail:**
+
+  Set to `false` to disable this extension.  
+  Set to `function` to format your custom view.
+
+- **Default:** `false`
+
+### showCustomView
+
+- **Attribute:** `data-show-custom-view`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  Set to `true` to show the custom view as default view.
+
+- **Default:** `false`
+
+### showCustomViewButton
+
+- **Attribute:** `data-show-custom-view-button`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  Set to `true` to show the custom view toggle button.
+
+- **Default:** `false`
+
+### Icons
+
+- Toggle custom view:
+    * Bootstrap3: `glyphicon glyphicon-eye-open`
+    * Bootstrap4: `fa fa-eye`
+    * Semantic: `fa fa-eye`
+    * Foundation: `fa fa-eye`
+    * Bulma: `fa fa-eye`
+    * Materialize: `remove_red_eye`
+
+## Methods
+
+### toggleCustomView
+
+* Toggles the view between the table and the custom view.
+
+## Events
+
+### onCustomViewPostBody(custom-view-post-body.bs.table)
+
+* Fires before the custom view was rendered.
+
+### onCustomViewPreBody(custom-view-pre-body.bs.table)
+
+* Fires after the custom view was rendered.
+
+## Localizations
+
+### formatToggleCustomView
+
+- **type:** `Function`
+
+- **Default:** `function () { return "Toggle custom view;}`

site/docs/extensions/filter-control.md

@@ -66,7 +66,7 @@ Dependence if you use the datepicker option: [bootstrap-datepicker](https://gith
 - **Detail:**
 
    Set to e.g. `#filter` to allow custom input filter in a element with the id `filter`.
-   Each filter element (input or select) must have the following id `bootstrap-table-filter-control-<Fieldname>` (<Fieldname> must be replaced with the defined [Field](https://bootstrap-table.com/docs/api/column-options/#field) name).
+   Each filter element (input or select) must have the following class `bootstrap-table-filter-control-<Fieldname>` (<Fieldname> must be replaced with the defined [Field](https://bootstrap-table.com/docs/api/column-options/#field) name).
 
 - **Default:** `false`
 
@@ -254,7 +254,7 @@ Dependence if you use the datepicker option: [bootstrap-datepicker](https://gith
 
 * Clear all the controls added by this plugin (similar to showSearchClearButton option).
 
-## Locale
+## Localizations
 
 ### formatClearFilters
 

site/docs/extensions/multiple-sort.md

@@ -104,7 +104,7 @@ toc: true
   ]
   ```
 
-## Locales
+## Localizations
 
 ### formatAddLevel
 

site/docs/extensions/toolbar.md

@@ -72,7 +72,7 @@ toc: true
 
 * Fired when we are searching into the advanced search form.
 
-## Locales
+## Localizations
 
 ### formatAdvancedCloseButton
 

src/extensions/custom-view/bootstrap-table-custom-view.js

@@ -0,0 +1,110 @@
+/**
+ * @author: Dustin Utecht
+ * @github: https://github.com/UtechtDustin
+ */
+
+const Utils = $.fn.bootstrapTable.utils
+
+$.extend($.fn.bootstrapTable.defaults, {
+  customView: false,
+  showCustomView: false,
+  showCustomViewButton: false
+})
+
+$.extend($.fn.bootstrapTable.defaults.icons, {
+  customView: {
+    bootstrap3: 'glyphicon glyphicon-eye-open',
+    bootstrap4: 'fa fa-eye',
+    semantic: 'fa fa-eye',
+    foundation: 'fa fa-eye',
+    bulma: 'fa fa-eye',
+    materialize: 'remove_red_eye'
+  }[$.fn.bootstrapTable.theme] || 'fa-eye'
+})
+
+$.extend($.fn.bootstrapTable.defaults, {
+  onCustomViewPostBody () {
+    return false
+  },
+  onCustomViewPreBody () {
+    return false
+  }
+})
+
+$.extend($.fn.bootstrapTable.locales, {
+  formatToggleCustomView () {
+    return 'Toggle custom view'
+  }
+})
+$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales)
+
+$.fn.bootstrapTable.methods.push('toggleCustomView')
+
+$.extend($.fn.bootstrapTable.Constructor.EVENTS, {
+  'custom-view-post-body.bs.table': 'onCustomViewPostBody',
+  'custom-view-pre-body.bs.table': 'onCustomViewPreBody'
+})
+
+$.BootstrapTable = class extends $.BootstrapTable {
+
+  init () {
+    this.showCustomView = this.options.showCustomView
+
+    super.init()
+  }
+
+  initToolbar (...args) {
+    super.initToolbar(...args)
+
+    if (this.options.customView && this.options.showCustomViewButton) {
+      const $btnGroup = this.$toolbar.find('>.' + this.constants.classes.buttonsGroup.split(' ').join('.')).first()
+      let $btnToggleCustomView = $btnGroup.find('.toggle-custom-view')
+
+      if (!$btnToggleCustomView.length) {
+        $btnToggleCustomView = $(`
+          <button class="toggle-custom-view ${this.constants.buttonsClass}"
+          type="button" title="${this.options.formatToggleCustomView()}">
+          ${this.options.showButtonIcons ? Utils.sprintf(this.constants.html.icon, this.options.iconsPrefix, this.options.icons.customView) : ''}
+          ${this.options.showButtonText ? this.options.formatToggleCustomView() : ''}
+          </button>
+        `).appendTo($btnGroup)
+
+        $btnToggleCustomView.on('click', $.proxy(this.toggleCustomView, this))
+      }
+    }
+  }
+
+  initBody () {
+    super.initBody()
+
+    if (!this.options.customView) {
+      return
+    }
+
+    const $table = this.$el
+    const $customViewContainer = this.$container.find('.fixed-table-custom-view')
+
+    $table.hide()
+    $customViewContainer.hide()
+    if (!this.options.customView || !this.showCustomView) {
+      $table.show()
+      return
+    }
+
+    const data = this.getData().slice(this.pageFrom - 1, this.pageTo)
+    const value = Utils.calculateObjectValue(this, this.options.customView, [data], '')
+    this.trigger('custom-view-pre-body', data, value)
+    if ($customViewContainer.length === 1) {
+      $customViewContainer.show().html(value)
+    } else {
+      this.$tableBody.after(`<div class="fixed-table-custom-view">${value}</div>`)
+    }
+
+    this.trigger('custom-view-post-body', data, value)
+  }
+
+  toggleCustomView () {
+    this.showCustomView = !this.showCustomView
+    this.initBody()
+  }
+}