Merge pull request #683 from djhvscf/master

Added mobile extension

docs/_i18n/en/documentation/column-options.md

@@ -113,7 +113,7 @@ The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
         <td>False to hide the columns item.</td>
     </tr>
     <tr>
-        <td>card view visible</td>
+        <td>cardViewVisible</td>
         <td>data-card-visible</td>
         <td>Boolean</td>
         <td>true</td>

docs/_i18n/en/documentation/events.md

@@ -113,6 +113,12 @@
         <td>Fires when switch the column visible.</td>
     </tr>
     <tr>
+        <td>onColumnSearch</td>
+        <td>column-search.bs.table</td>
+        <td>field, text</td>
+        <td>Fires when search by column.</td>
+    </tr>
+    <tr>
         <td>onPageChange</td>
         <td>page-change.bs.table</td>
         <td>number, size</td>

docs/_i18n/en/documentation/methods.md

@@ -194,6 +194,11 @@ The calling method syntax: `$('#table').bootstrapTable('method', parameter);`.
         <td>Scroll to the number value position, set 'bottom' means scroll to the bottom.</td>
     </tr>
     <tr>
+        <td>getScrollPosition</td>
+        <td>none</td>
+        <td>Get the current scroll position.</td>
+    </tr>
+    <tr>
         <td>filterBy</td>
         <td>params</td>
         <td>(Can use only in client-side)Filter data in table, eg. you can filter <code>{age: 10}</code> to show the data only age is equal to 10.</td>

docs/_i18n/es/documentation/column-options.md

@@ -112,7 +112,7 @@ Las propiedades de la columna están definidas en `jQuery.fn.bootstrapTable.colu
         <td>False para ocultar el item de la columna.</td>
     </tr>
 	<tr>
-        <td>card view visible</td>
+        <td>cardViewVisible</td>
         <td>data-card-visible</td>
         <td>Boolean</td>
         <td>true</td>

docs/_i18n/es/documentation/events.md

@@ -104,6 +104,12 @@
         <td>Se ejecuta cuando se cambia la visibilidad de una columna.</td>
     </tr>
     <tr>
+        <td>onColumnSearch</td>
+        <td>column-search.bs.table</td>
+        <td>field, text</td>
+        <td>Se ejecuta cuando se busca por columna.</td>
+    </tr>
+    <tr>
         <td>onPageChange</td>
         <td>page-change.bs.table</td>
         <td>number, size</td>

docs/_i18n/es/documentation/methods.md

@@ -189,6 +189,11 @@ Sintaxis para llamar a un método: `$('#table').bootstrapTable('method', paramet
         <td>Setea la posición del scroll, setear 'bottom' significa setear la posición del scroll al final de la tabla.</td>
     </tr>
     <tr>
+        <td>getScrollPosition</td>
+        <td>none</td>
+        <td>Obtiene la posición actual del scroll.</td>
+    </tr>
+    <tr>
         <td>filterBy</td>
         <td>params</td>
         <td>(Solo se puede usar en client-side)Filtra los datos en la tabla, ejm. se puede filtrar <code>{age: 10}</code> para mostrar los daros solo con la edad igual a 10.</td>

src/bootstrap-table.js

@@ -329,7 +329,7 @@
         cellStyle: undefined,
         searchable: true,
         cardVisible: true,
-        filterControl: undefined // edit, todo: select, todo: date
+        filterControl: undefined // edit, select, todo: date
     };
 
     BootstrapTable.EVENTS = {
@@ -661,10 +661,6 @@
                     return order * value;
                 }
 
-                if (value !== undefined) {
-                    return order * value;
-                }
-
                 // Fix #161: undefined or null string sort bug.
                 if (aa === undefined || aa === null) {
                     aa = '';
@@ -856,7 +852,7 @@
 
             this.$toolbar.append(html.join(''));
             $search = this.$toolbar.find('.search input');
-            $search.off('keyup').on('keyup', function (event) {
+            $search.off('keyup drop').on('keyup drop', function (event) {
                 clearTimeout(timeoutId); // doesn't matter if it's 0
                 timeoutId = setTimeout(function () {
                     that.onSearch(event);
@@ -896,9 +892,6 @@
         var text = $.trim($(event.currentTarget).val());
         var $field = $(event.currentTarget).parent().parent().data('field')
 
-        // trim search input
-        //$(event.currentTarget).val(text);
-
         if ($.isEmptyObject(this.filterColumnsPartial)) {
             this.filterColumnsPartial = {};
         }
@@ -909,9 +902,9 @@
         }
 
         this.options.pageNumber = 1;
-        this.initSearch();
+        this.onSearch(event);
         this.updatePagination();
-        /* this.trigger('column-search', $field, text); */
+        this.trigger('column-search', $field, text);
     };
 
     BootstrapTable.prototype.initSearch = function () {
@@ -2071,8 +2064,16 @@
         if (typeof value === 'number') {
             $tbody.scrollTop(value);
         }
+
+        if (typeof value === undefined) {
+            return $tbody.scrollTop();
+        }
     };
 
+    BootstrapTable.prototype.getScrollPosition = function () {
+        return this.scrollTo();
+    }
+
     BootstrapTable.prototype.selectPage = function (page) {
         if (page > 0 && page <= this.options.totalPages) {
             this.options.pageNumber = page;
@@ -2123,6 +2124,7 @@
         'showColumn', 'hideColumn',
         'filterBy',
         'scrollTo',
+        'getScrollPosition',
         'selectPage', 'prevPage', 'nextPage',
         'togglePagination',
         'toggleView'

src/extensions/mobile/README.md

@@ -0,0 +1,35 @@
+# Table Mobile
+
+Use Plugin: [bootstrap-table-mobile](https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/mobile)
+
+## Usage
+
+```html
+<script src="extensions/mobile/bootstrap-table-mobile.js"></script>
+```
+
+## Options
+
+### mobileResponsive
+
+* type: Boolean
+* description: Set true to change the view between card and table view depending on width and height given.
+* default: `false`
+
+### checkOnInit
+
+* type: Boolean
+* description: Set true to check the window size on init.
+* default: `false`
+
+### minWidth
+
+* type: Integer
+* description: Set the minimum width when the table will change the view.
+* default: `562`
+
+### minHeight
+
+* type: Integer
+* description: Set the minimum height when the table will change the view.
+* default: `562`

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

@@ -0,0 +1,61 @@
+/**
+ * @author: Dennis Hernández
+ * @webSite: http://djhvscf.github.io/Blog
+ * @version: v1.0.0
+ */
+
+!function ($) {
+
+    'use strict';
+
+    var toggled = false;
+
+    var resetView = function (el) {
+        if (el.options.height || el.options.showFooter) {
+            setTimeout(el.resetView(), 1);
+        }
+    }
+
+    var changeView = function (el, width, height) {
+        if(width <= el.options.minWidth && height <= el.options.minHeight){
+            if (!toggled) {
+                el.toggleView();
+                toggled = true;
+            }
+        } else if (width > el.options.minWidth && height > el.options.minHeight) {
+            if (toggled) {
+                el.toggleView()
+                toggled = false;
+            }
+        }
+
+        resetView(el);
+    }
+
+    $.extend($.fn.bootstrapTable.defaults, {
+        mobileResponsive: false,
+        minWidth: 562,
+        minHeight: 562,
+        checkOnInit: false
+    });
+
+    var BootstrapTable = $.fn.bootstrapTable.Constructor,
+        _init = BootstrapTable.prototype.init;
+
+    BootstrapTable.prototype.init = function () {
+        _init.apply(this, Array.prototype.slice.apply(arguments));
+
+        if (!this.options.mobileResponsive) {
+            return;
+        }
+
+        var that = this;
+        $(window).resize(function () {
+            changeView(that, $(this).width(), $(this).height())
+        });
+
+        if (this.options.checkOnInit) {
+            changeView(this, $(window).width(), $(window).height());
+        }
+    };
+}(jQuery);