new version of bootstrap-table-resizable v2.0.0. (#3973)

src/extensions/resizable/README.md

@@ -1,7 +1,7 @@
 # Table Resizable
 
 Use Plugin: [bootstrap-table-resizable](https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/resizable) </br>
-Dependence: [colResizable](https://github.com/alvaro-prieto/colResizable) v1.6
+Dependence: [jquery-resizable-columns](https://github.com/dobtco/jquery-resizable-columns) v0.2.3
 
 ## Usage
 
@@ -17,55 +17,7 @@ Dependence: [colResizable](https://github.com/alvaro-prieto/colResizable) v1.6
 * description: Set true to allow the resize in each column.
 * default: `false`
 
-### liveDrag
+## Known issues
 
-* type: Boolean
-* description: When set to true the table layout is updated while dragging column anchors. liveDrag enabled is more CPU consuming so it is not recommended for slow computers, specially when dealing with huge or extremely complicated tables.
-* default: `false`
-
-### headerOnly
-
-* type: Boolean
-* description: This attribute can be used to prevent vertical expansion of the column anchors to fit the table height. If it is set to true, column handler's size will be bounded to the first row's vertical size.
-* default: `false`
-
-### minWidth
-
-* type: Integer
-* description: This value specifies the minimum width (measured in pixels) that is allowed for the columns.
-* default: `15`
-
-### hoverCursor
-
-* type: String
-* description: This attribute can be used to customize the cursor that will be displayed when the user is positioned on the column anchors.
-* default: `e-resize`
-
-### dragCursor
-
-* type: String
-* description: Defines the cursor that will be used while the user is resizing a column.
-* default: `e-resize`
-
-### onResizableResize
-
-* type: Function
-* description: If a callback function is supplied it will be fired when the user has ended dragging a column anchor altering the previous table layout. The callback function can obtain a reference to the updated table through the currentTarget attribute of the event retrieved by parameters.
-* default: `empty function`
-
-### onResizableDrag
-
-* type: Function
-* description: This event is fired while dragging a column anchor if liveDrag is enabled. It can be useful if the table is being used as a multiple range slider. The callback function can obtain a reference to the updated table through the currentTarget attribute of the event retrieved by parameters
-* default: `empty function`
-
-
-### resizeMode
-
-* type: String
-* description: It is used to set how the resize method works. Those are the possible values:
-  * 'fit': this is default resizing model, in which resizing a column does not alter table width, which means that when a column is expanded the next one shrinks.
-  * 'flex': in this mode the table can change its width and each column can shrink or expand independently if there is enough space in the parent container. If there is not enough space, columns will share its width as they are resized. Table will never get bigger than its parent.
-  * 'overflow': allows to resize columns with overflow of parent container.
-* default: `fit`
+### This plugin does not work when data-height is set.
 

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

@@ -1,73 +1,72 @@
 /**
  * @author: Dennis Hernández
  * @webSite: http://djhvscf.github.io/Blog
- * @version: v1.1.1
+ * @version: v2.0.0
  */
 
-(function ($) {
-    'use strict';
+(function($) {
+  "use strict";
 
-    var initResizable = function (that) {
-        //Deletes the plugin to re-create it
-        that.$el.colResizable({disable: true});
+  var initResizable = function(that) {
+    if (that.options.resizable && !that.options.cardView && !isInit(that)) {
+      that.$el.resizableColumns();
+    }
+  };
+
+  var reInitResizable = function(that) {
+    destroy(that);
+    initResizable(that);
+  };
+
+  var destroy = function(that) {
+    if (isInit(that)) {
+      that.$el.data("resizableColumns").destroy();
+    }
+  };
+
+  var isInit = function(that) {
+    return that.$el.data("resizableColumns") !== undefined;
+  };
 
-        //Creates the plugin
-        that.$el.colResizable({
-            liveDrag: that.options.liveDrag,
-            headerOnly: that.options.headerOnly,
-            minWidth: that.options.minWidth,
-            hoverCursor: that.options.hoverCursor,
-            dragCursor: that.options.dragCursor,
-            onResize: that.onResize,
-            onDrag: that.options.onResizableDrag,
-            resizeMode: that.options.resizeMode
-        });
-    };
+  $.extend($.fn.bootstrapTable.defaults, {
+    resizable: false
+  });
 
-    $.extend($.fn.bootstrapTable.defaults, {
-        resizable: false,
-        liveDrag: false,
-        headerOnly: false,
-        minWidth: 15,
-        hoverCursor: 'e-resize',
-        dragCursor: 'e-resize',
-        onResizableResize: function (e) {
-            return false;
-        },
-        onResizableDrag: function (e) {
-            return false;
-        }
-    });
+  var BootstrapTable = $.fn.bootstrapTable.Constructor,
+    _initBody = BootstrapTable.prototype.initBody,
+    _toggleView = BootstrapTable.prototype.toggleView,
+    _resetView = BootstrapTable.prototype.resetView;
 
-    var BootstrapTable = $.fn.bootstrapTable.Constructor,
-        _toggleView = BootstrapTable.prototype.toggleView,
-        _resetView = BootstrapTable.prototype.resetView;
+  BootstrapTable.prototype.initBody = function() {
+    var that = this;
+    _initBody.apply(this, Array.prototype.slice.apply(arguments));
 
-    BootstrapTable.prototype.toggleView = function () {
-        _toggleView.apply(this, Array.prototype.slice.apply(arguments));
+    that.$el
+      .off("column-switch.bs.table, page-change.bs.table")
+      .on("column-switch.bs.table, page-change.bs.table", function() {
+        reInitResizable(that);
+      });
+  };
 
-        if (this.options.resizable && this.options.cardView) {
-            //Deletes the plugin
-            $(this.$el).colResizable({disable: true});
-        }
-    };
+  BootstrapTable.prototype.toggleView = function() {
+    _toggleView.apply(this, Array.prototype.slice.apply(arguments));
 
-    BootstrapTable.prototype.resetView = function () {
-        var that = this;
+    if (this.options.resizable && this.options.cardView) {
+      //Destroy the plugin
+      destroy(this);
+    }
+  };
 
-        _resetView.apply(this, Array.prototype.slice.apply(arguments));
+  BootstrapTable.prototype.resetView = function() {
+    var that = this;
 
-        if (this.options.resizable) {
-            // because in fitHeader function, we use setTimeout(func, 100);
-            setTimeout(function () {
-                initResizable(that);
-            }, 100);
-        }
-    };
+    _resetView.apply(this, Array.prototype.slice.apply(arguments));
 
-    BootstrapTable.prototype.onResize = function (e) {
-        var that = $(e.currentTarget);
-        that.bootstrapTable('resetView');
-        that.data('bootstrap.table').options.onResizableResize.apply(e);
+    if (this.options.resizable) {
+      // because in fitHeader function, we use setTimeout(func, 100);
+      setTimeout(function() {
+        initResizable(that);
+      }, 100);
     }
+  };
 })(jQuery);