Merge pull request #2061 from hopglascock/multi-column-toggle

feat(extension): add multi-column-toggle extension

docs/data/extensions.json

@@ -250,6 +250,23 @@
         }
     },
     {
+        "name": "Multi Column Toggle",
+        "version": "1.0.0",
+        "description": "Allows allows hiding and showing of multiple columns at once.",
+        "url": "https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/multi-column-toggle",
+        "example": "http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/multi-column-toggle.html",
+
+        "plugins": [{
+            "name": "multi-column-toggle",
+            "url": "https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/multi-column-toggle"
+        }],
+
+        "author": {
+            "name": "Homer Glascock",
+            "image": "https://avatars1.githubusercontent.com/u/5546710"
+        }
+    },
+    {
         "name": "Natural Sorting",
         "version": "1.0.0",
         "description": "Plugin to support the natural sorting.",

src/extensions/multi-column-toggle/README.md

@@ -0,0 +1,36 @@
+# Multi Column Toggle
+
+Use Plugin: [multi-column-toggle](https://github.com/wenzhixin/bootstrap-table/tree/develop/src/extensions/multi-column-toggle)
+
+Adds a button to the toolbar that hides and shows all columns that are 'switchable'.
+
+## Usage
+
+```html
+<script src="extensions/multi-column-toggle/bootstrap-table-multi-toggle.js"></script>
+```
+
+## Options
+
+### showToggleBtn
+
+* type: Boolean
+* description: Set true to show the toggle button. This button toggles hiding and showing of multiple columns at once.
+* default: `false`
+
+### multiToggleDefaults
+
+* type: Array of Strings
+* description: Defines 'default' columns that will never be hidden with this extension. These are different from 
+* default: `[]`
+* example html: `data-multi-toggle-defaults='["column1", "column2"]'`
+
+## Methods
+
+### copyColumnsToClipboard
+
+* copies the contents of the selected rows to the clipboard.
+
+### copyColumnsToClipboardWithHidden
+
+* copies the contents of the selected rows to the clipboard, *including hidden rows*.

src/extensions/multi-column-toggle/bootstrap-table-multi-toggle.js

@@ -0,0 +1,88 @@
+/**
+ * @author Homer Glascock <HopGlascock@gmail.com>
+ * @version: v1.0.0
+ */
+
+ !function ($) {
+    "use strict";
+
+    var sprintf = $.fn.bootstrapTable.utils.sprintf;
+
+    var reInit = function (self) {
+        self.initHeader();
+        self.initSearch();
+        self.initPagination();
+        self.initBody();
+    };
+
+    $.extend($.fn.bootstrapTable.defaults, {
+        showToggleBtn: false,
+        multiToggleDefaults: [], //column names go here
+    });
+
+    $.fn.bootstrapTable.methods.push('hideAllColumns', 'showAllColumns');
+
+    var BootstrapTable = $.fn.bootstrapTable.Constructor,
+        _initToolbar = BootstrapTable.prototype.initToolbar;
+
+    BootstrapTable.prototype.initToolbar = function () {
+
+        _initToolbar.apply(this, Array.prototype.slice.apply(arguments));
+
+        var that = this,
+            $btnGroup = this.$toolbar.find('>.btn-group');
+
+        if (typeof this.options.multiToggleDefaults === 'string') {
+            this.options.multiToggleDefaults = JSON.parse(this.options.multiToggleDefaults);
+        }
+
+        if (this.options.showToggleBtn && this.options.showColumns) {
+            var showbtn = "<button class='btn btn-default hidden' id='showAllBtn'><span class='glyphicon glyphicon-resize-full icon-zoom-in'></span></button>",
+                hidebtn = "<button class='btn btn-default' id='hideAllBtn'><span class='glyphicon glyphicon-resize-small icon-zoom-out'></span></button>";
+
+            $btnGroup.append(showbtn + hidebtn);
+
+            $btnGroup.find('#showAllBtn').click(function () { that.showAllColumns(); 
+                $btnGroup.find('#hideAllBtn').toggleClass('hidden');
+                $btnGroup.find('#showAllBtn').toggleClass('hidden');  
+            });
+            $btnGroup.find('#hideAllBtn').click(function () { that.hideAllColumns(); 
+                $btnGroup.find('#hideAllBtn').toggleClass('hidden');
+                $btnGroup.find('#showAllBtn').toggleClass('hidden');  
+            });
+        }
+    };
+
+    BootstrapTable.prototype.hideAllColumns = function () {
+        var that = this,
+            defaults = that.options.multiToggleDefaults;
+
+        $.each(this.columns, function (index, column) {
+            //if its one of the defaults dont touch it
+            if (defaults.indexOf(column.field) == -1 && column.switchable) {
+                column.visible = false;
+                var $items = that.$toolbar.find('.keep-open input').prop('disabled', false);
+                $items.filter(sprintf('[value="%s"]', index)).prop('checked', false);
+            }
+        });
+
+        reInit(that);
+    };
+
+    BootstrapTable.prototype.showAllColumns = function () {
+        var that = this;
+        $.each(this.columns, function (index, column) {
+            if (column.switchable) {
+                column.visible = true;
+            }
+
+            var $items = that.$toolbar.find('.keep-open input').prop('disabled', false);
+            $items.filter(sprintf('[value="%s"]', index)).prop('checked', true);
+        });
+
+        reInit(that);
+
+        that.toggleColumn(0, that.columns[0].visible, false);
+    };
+    
+}(jQuery);

src/extensions/multi-column-toggle/extension.json

@@ -0,0 +1,17 @@
+{
+  "name": "Multi Column Toggle",
+  "version": "1.0.0",
+  "description": "Allows hiding and showing of multiple columns at once.",
+  "url": "https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/multi-column-toggle",
+  "example": "http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/multi-column-toggle.html",
+
+  "plugins": [{
+    "name": "multi-column-toggle",
+    "url": "https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/multi-column-toggle"
+  }],
+
+  "author": {
+    "name": "Homer Glascock",
+    "image": "https://avatars1.githubusercontent.com/u/5546710"
+  }
+}