浏览代码

Added reorder extension

Dennis Hernández 10 年之前
父节点
当前提交
6b45676e75

+ 35 - 0
src/extensions/reorder/README.md

@@ -0,0 +1,35 @@
+# Table Reorder
+
+Use Plugin: [bootstrap-table-reorder](https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/reorder) </br>
+Dependence: [dragTable](https://github.com/akottr/dragtable/) v2.0.14 (must include the css file), </br>
+[jquery-ui](https://code.jquery.com/ui/) v1.11
+
+
+## Usage
+
+```html
+<link rel="stylesheet" href=".../dragtable.css">
+<script src=".../jquery-ui.js"></script>
+<script src=".../jquery.dragtable.js"></script>
+<script src="extensions/cookie/bootstrap-table-reorder.js"></script>
+```
+
+## Options
+
+### reorderable
+
+* type: Boolean
+* description: Set true to allow the reorder feature.
+* default: `false`
+
+### maxMovingRows
+
+* type: Integer
+* description: Moving only the header. Recommended for very large tables (cells > 1000)
+* default: `10`
+
+## Events
+
+### onReorder(reorder.bs.table)
+
+Fired when the column was dropped, receive as parameter the new header fields order

+ 54 - 0
src/extensions/reorder/bootstrap-table-reorder.js

@@ -0,0 +1,54 @@
+/**
+ * @author: Dennis Hernández
+ * @webSite: http://djhvscf.github.io/Blog
+ * @version: v1.0.0
+ */
+
+!function ($) {
+
+    'use strict';
+
+    $.extend($.fn.bootstrapTable.defaults, {
+        reorderable: false,
+        maxMovingRows: 10,
+        onReorder: function (headerFields) {
+            return false;
+        }
+    });
+
+    $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
+        'reorder.bs.table': 'onReorder'
+    });
+
+    var BootstrapTable = $.fn.bootstrapTable.Constructor,
+        _initHeader = BootstrapTable.prototype.initHeader;
+
+    BootstrapTable.prototype.initHeader = function () {
+        _initHeader.apply(this, Array.prototype.slice.apply(arguments));
+
+        if (!this.options.reorderable) {
+            return;
+        }
+
+        this.makeColumnsReorderable();
+    };
+
+    BootstrapTable.prototype.makeColumnsReorderable = function () {
+
+        var that = this;
+        $(this.$el).dragtable({
+            maxMovingRows: that.options.maxMovingRows,
+            clickDelay:200,
+            beforeStop: function() {
+                var ths = [];
+                that.$header.find('th').each(function (i) {
+                    ths.push($(this).data('field'));
+                });
+
+                that.header.fields = ths;
+                that.resetView();
+                that.trigger('reorder', ths);
+            }
+        });
+    };
+}(jQuery);

+ 10 - 1
src/extensions/resizable/bootstrap-table-resizable.js

@@ -45,7 +45,8 @@
     var BootstrapTable = $.fn.bootstrapTable.Constructor,
         _init = BootstrapTable.prototype.init,
         _toggleColumn = BootstrapTable.prototype.toggleColumn,
-        _toggleView = BootstrapTable.prototype.toggleView;
+        _toggleView = BootstrapTable.prototype.toggleView,
+        _resetView = BootstrapTable.prototype.resetView;
 
     BootstrapTable.prototype.init = function () {
         _init.apply(this, Array.prototype.slice.apply(arguments));
@@ -75,4 +76,12 @@
             initResizable(this);
         }
     };
+
+    BootstrapTable.prototype.resetView = function () {
+        _resetView.apply(this, Array.prototype.slice.apply(arguments));
+
+        if (this.options.resizable) {
+            initResizable(this);
+        }
+    };
 })(jQuery);