Browse Source

Fix #209: Added keyevents extension.

zhixin 10 years ago
parent
commit
7d06d477e6

+ 8 - 0
CHANGELOG.md

@@ -1,5 +1,13 @@
 ## ChangeLog
 
+###
+
+- [bug] Fix #672: Column Fixed Width in Percentage bug.
+- [enh] Added state saving for visible columns and the ability to use extension with multiple simultaneous tables.
+- [enh] Added `ajax' option to replace jquery ajax method.
+- [enh] Added `resetWidth` method to reset header and footer width.
+- [enh] Added keyevents extension.
+
 ### 1.7.0
 
 - [enh] Add `showFooter`, `keyEvents`, `searchText` and `uniqueId` options.

+ 0 - 11
docs/_i18n/en/documentation/table-options.md

@@ -417,17 +417,6 @@ The table options is defined in `jQuery.fn.bootstrapTable.defaults`.
         <td>true</td>
         <td>False to disable sortable of all columns.</td>
     </tr>
-	<tr>
-        <td>keyEvents</td>
-        <td>data-key-events</td>
-        <td>Boolean</td>
-        <td>false</td>
-        <td>True to enable the key events. The key event list is:
-        S/s: It will be focused the search textbox if it is enabled
-        R/r: It will refresh the table if the showRefresh option is enabled
-        T/t: It will toggle the table view if the showToggle option is enabled
-        P/p: It will fires the pagination switch if the showPaginationSwitch is enabled.</td>
-    </tr>
     <tr>
         <td>rowStyle</td>
         <td>data-row-style</td>

+ 22 - 0
docs/_i18n/en/extensions/keyevents.md

@@ -0,0 +1,22 @@
+# Table Key Events
+
+Use Plugin: [bootstrap-table-keyevents](https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/keyevents)
+
+## Usage
+
+```html
+<script src="extensions/cookie/bootstrap-table-keyevents.js"></script>
+```
+
+## Options
+
+### keyEvents
+
+* type: Boolean
+* description:
+True to enable the key events. The key event list is:
+    * S/s: It will be focused the search textbox if it is enabled.
+    * R/r: It will refresh the table if the showRefresh option is enabled.
+    * T/t: It will toggle the table view if the showToggle option is enabled.
+    * P/p: It will fires the pagination switch if the showPaginationSwitch is enabled.
+* default: `true`

+ 0 - 11
docs/_i18n/es/documentation/table-options.md

@@ -397,17 +397,6 @@ Las opciones de la tabla están definidas en `jQuery.fn.bootstrapTable.defaults`
         <td>true</td>
         <td>False para deshabilitar el ordenamiento en todas las columnas.</td>
     </tr>
-	<tr>
-        <td>keyEvents</td>
-        <td>data-key-events</td>
-        <td>Boolean</td>
-        <td>false</td>
-        <td>True para habilitar los eventos del teclado. La lista es:
-        S/s: El textbox de búsqueda sera enfocado si la opción search está habilitada
-        R/r: Se refrescará la tabla si la opción showRefresh está habilitada
-        T/t: Se cambiará de vista si la opción showToggle está habilitada
-        P/p: Se ocultara/mostrará la paginación si la opción showPaginationSwitch está habilitada.</td>
-    </tr>
     <tr>
         <td>rowStyle</td>
         <td>data-row-style</td>

+ 22 - 0
docs/_i18n/es/extensions/keyevents.md

@@ -0,0 +1,22 @@
+# Table Key Events
+
+Use Plugin: [bootstrap-table-keyevents](https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/keyevents)
+
+## Usage
+
+```html
+<script src="extensions/cookie/bootstrap-table-keyevents.js"></script>
+```
+
+## Options
+
+### keyEvents
+
+* type: Boolean
+* description:
+True to enable the key events. The key event list is:
+    * S/s: It will be focused the search textbox if it is enabled.
+    * R/r: It will refresh the table if the showRefresh option is enabled.
+    * T/t: It will toggle the table view if the showToggle option is enabled.
+    * P/p: It will fires the pagination switch if the showPaginationSwitch is enabled.
+* default: `true`

+ 22 - 0
docs/_i18n/zh-cn/extensions/keyevents.md

@@ -0,0 +1,22 @@
+# Table Key Events
+
+Use Plugin: [bootstrap-table-keyevents](https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/keyevents)
+
+## Usage
+
+```html
+<script src="extensions/cookie/bootstrap-table-keyevents.js"></script>
+```
+
+## Options
+
+### keyEvents
+
+* type: Boolean
+* description:
+True to enable the key events. The key event list is:
+    * S/s: It will be focused the search textbox if it is enabled.
+    * R/r: It will refresh the table if the showRefresh option is enabled.
+    * T/t: It will toggle the table view if the showToggle option is enabled.
+    * P/p: It will fires the pagination switch if the showPaginationSwitch is enabled.
+* default: `true`

+ 5 - 1
docs/extensions.md

@@ -13,4 +13,8 @@ lead: pages.extensions.lead
 
 {% tf extensions/cookie.md %}
 
-{% tf extensions/resizable.md %}
+{% tf extensions/resizable.md %}
+
+{% tf extensions/filter.md %}
+
+{% tf extensions/keyevents.md %}

+ 0 - 63
src/bootstrap-table.js

@@ -182,7 +182,6 @@
         sortable: true,
         maintainSelected: false,
         searchTimeOut: 500,
-        keyEvents: false,
         searchText: '',
         iconSize: undefined,
         iconsPrefix: 'glyphicon', // glyphicon of fa (font awesome)
@@ -349,7 +348,6 @@
         this.initPagination();
         this.initBody();
         this.initServer();
-        this.initKeyEvents();
     };
 
     BootstrapTable.prototype.initContainer = function () {
@@ -1538,67 +1536,6 @@
         }
     };
 
-    BootstrapTable.prototype.initKeyEvents = function () {
-        if (this.options.keyEvents) {
-            var that = this;
-            $(document).off('keypress').on('keypress', function (e) {
-                var $search = that.$toolbar.find('.search input'),
-                    $refresh = that.$toolbar.find('button[name="refresh"]'),
-                    $toggle = that.$toolbar.find('button[name="toggle"]'),
-                    $paginationSwitch = that.$toolbar.find('button[name="paginationSwitch"]');
-                switch (e.keyCode) {
-                    case 115://s
-                    case 83://S
-                        if (!that.options.search) {
-                            return;
-                        }
-
-                        if (document.activeElement === $search.get(0)) {
-                            return true;
-                        }
-                        $search.focus();
-                        return false;
-                    case 114: //r
-                    case 82: //R
-                        if (!that.options.showRefresh) {
-                            return;
-                        }
-
-                        if (document.activeElement === $search.get(0)) {
-                            return true;
-                        }
-                        $refresh.click();
-                        return false;
-                    case 116: //t
-                    case 84: //T
-                        if (!that.options.showToggle) {
-                            return;
-                        }
-
-                        if (document.activeElement === $search.get(0)) {
-                            return true;
-                        }
-
-                        $toggle.click();
-                        return false;
-                    case 112: //p
-                    case 80: //p
-                        if (!that.options.showPaginationSwitch) {
-                            return;
-                        }
-
-                        if (document.activeElement === $search.get(0)) {
-                            return true;
-                        }
-
-                        $paginationSwitch.click();
-                        return false;
-
-                }
-            });
-        }
-    };
-
     BootstrapTable.prototype.getCaretHtml = function () {
         return ['<span class="order' + (this.options.sortOrder === 'desc' ? '' : ' dropup') + '">',
             '<span class="caret" style="margin: 10px 5px;"></span>',

+ 24 - 0
src/extensions/keyevents/README.md

@@ -0,0 +1,24 @@
+# Table Key Events
+
+Use Plugin: [bootstrap-table-keyevents](https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/keyevents)
+
+## Usage
+
+```html
+<script src="extensions/cookie/bootstrap-table-keyevents.js"></script>
+```
+
+## Options
+
+### keyEvents
+
+* type: Boolean
+* description:
+True to enable the key events. The key event list is:
+    * s: It will be focused the search textbox if it is enabled.
+    * r: It will refresh the table if the showRefresh option is enabled.
+    * t: It will toggle the table view if the showToggle option is enabled.
+    * p: It will fires the pagination switch if the showPaginationSwitch is enabled.
+    * left: It will go to prev page if the pagination is true.
+    * right: It will go to next page if the pagination is true.
+* default: `false`

+ 83 - 0
src/extensions/keyevents/bootstrap-table-keyevents.js

@@ -0,0 +1,83 @@
+/**
+ * @author: Dennis Hernández
+ * @webSite: http://djhvscf.github.io/Blog
+ * @version: v1.0.0
+ *
+ * @update zhixin wen <wenzhixin2010@gmail.com>
+ */
+
+!function ($) {
+
+    'use strict';
+
+    $.extend($.fn.bootstrapTable.defaults, {
+        keyEvents: false
+    });
+
+    var BootstrapTable = $.fn.bootstrapTable.Constructor,
+        _init = BootstrapTable.prototype.init;
+
+    BootstrapTable.prototype.init = function () {
+        _init.apply(this, Array.prototype.slice.apply(arguments));
+
+        this.initKeyEvents();
+    };
+
+
+    BootstrapTable.prototype.initKeyEvents = function () {
+        if (this.options.keyEvents) {
+            var that = this;
+
+            $(document).off('keydown').on('keydown', function (e) {
+                var $search = that.$toolbar.find('.search input'),
+                    $refresh = that.$toolbar.find('button[name="refresh"]'),
+                    $toggle = that.$toolbar.find('button[name="toggle"]'),
+                    $paginationSwitch = that.$toolbar.find('button[name="paginationSwitch"]');
+
+
+                if (document.activeElement === $search.get(0)) {
+                    return true;
+                }
+                switch (e.keyCode) {
+                    case 83: //s
+                        if (!that.options.search) {
+                            return;
+                        }
+                        $search.focus();
+                        return false;
+                    case 82: //r
+                        if (!that.options.showRefresh) {
+                            return;
+                        }
+                        $refresh.click();
+                        return false;
+                    case 84: //t
+                        if (!that.options.showToggle) {
+                            return;
+                        }
+                        $toggle.click();
+                        return false;
+                    case 80: //p
+                        if (!that.options.showPaginationSwitch) {
+                            return;
+                        }
+                        $paginationSwitch.click();
+                        return false;
+                    case 37: // left
+                        if (!that.options.pagination) {
+                            return;
+                        }
+                        that.prevPage();
+                        return false;
+                    case 39: // right
+                        if (!that.options.pagination) {
+                            return;
+                        }
+                        that.nextPage();
+                        return;
+                }
+            });
+        }
+    };
+
+}(jQuery);