Adding sort class table option (#2272)

* Adding sort-class table option

* Multiple selection row - (develop version)

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

@@ -35,6 +35,13 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
         <td>The class name of table. By default, the table is bordered, you can add 'table-no-bordered' to remove table-bordered style.</td>
     </tr>
     <tr>
+        <td>sortClass</td>
+        <td>data-sort-class</td>
+        <td>String</td>
+        <td>undefined</td>
+        <td>The class name of the td elements which are sorted.</td>
+    </tr>
+    <tr>
         <td>height</td>
         <td>data-height</td>
         <td>Number</td>

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

@@ -35,6 +35,13 @@ Las opciones de la tabla están definidas en `jQuery.fn.bootstrapTable.defaults`
         <td>El nombre de la clase de la tabla.</td>
     </tr>
     <tr>
+        <td>sortClass</td>
+        <td>data-sort-class</td>
+        <td>String</td>
+        <td>undefined</td>
+        <td>El nombre de la clase de los elementos td que están ordenados.</td>
+    </tr>
+    <tr>
         <td>height</td>
         <td>data-height</td>
         <td>Number</td>

docs/_i18n/zh-cn/documentation/table-options.md

@@ -35,6 +35,13 @@
         <td>表格的类名称。默认情况下，表格是有边框的，你可以添加 'table-no-bordered' 来删除表格的边框样式。</td>
     </tr>
     <tr>
+        <td>sortClass</td>
+        <td>data-sort-class</td>
+        <td>String</td>
+        <td>undefined</td>
+        <td>The class name of the td elements which are sorted.</td>
+    </tr>
+    <tr>
         <td>height</td>
         <td>data-height</td>
         <td>Number</td>

src/bootstrap-table.js

@@ -287,6 +287,7 @@
 
     BootstrapTable.DEFAULTS = {
         classes: 'table table-hover',
+        sortClass: undefined,
         locale: undefined,
         height: undefined,
         undefinedText: '-',
@@ -933,7 +934,8 @@
         var that = this,
             name = this.options.sortName,
             order = this.options.sortOrder === 'desc' ? -1 : 1,
-            index = $.inArray(this.options.sortName, this.header.fields);
+            index = $.inArray(this.options.sortName, this.header.fields),
+            timeoutId = 0;
 
         if (this.options.customSort !== $.noop) {
             this.options.customSort.apply(this, [this.options.sortName, this.options.sortOrder]);
@@ -998,6 +1000,15 @@
 
                 return order;
             });
+
+            //$('table tr td:nth-child('+($this.index()+1)+')').css("background-color", "red")
+            if (this.options.sortClass !== undefined) {
+                clearTimeout(timeoutId);
+                timeoutId = setTimeout(function () {
+                  that.$el.removeClass(that.options.sortClass);
+                  that.$el.find('tr td:nth-child('+(that.$header.find("[data-field='" + that.options.sortName + "']").index()+1)+')').addClass(that.options.sortClass);
+                }, 250);
+            }
         }
     };
 

src/extensions/multiple-selection-row/README.md

@@ -0,0 +1,41 @@
+# Table Mobile
+
+Use Plugin: [bootstrap-table-multiple-selection-row](https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/multiple-selection-row)
+
+## Usage
+
+```html
+<script src="extensions/mobile/bootstrap-table-multiple-selection-row.js"></script>
+```
+
+## Options
+
+### multipleSelectRow
+
+* type: Boolean
+* description: Set true to enable the multiple selection row.
+* default: `false`
+
+### multipleSelectRowCssClass
+
+* type: String
+* description: The class that will be applied in the rows selected.
+* default: `multiple-select-row-selected`
+
+### 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: `undefined`
+
+### columnsHidden
+
+* type: String
+* description: Set the columns fields in this array in order to hide those columns in the cardView mode. Use this way in `data-*` configuration: ` data-columns-hidden="['name', 'description']"` or this way in javascript configuration: `columnsHidden = ['name', 'description']`. 
+* default: `undefined`

src/extensions/multiple-selection-row/bootstrap-table-multiple-selection-row.css

@@ -0,0 +1,17 @@
+.multiple-select-row-selected {
+    background: lightBlue
+}
+
+.table tbody tr:hover td,
+.table tbody tr:hover th {
+  background-color: transparent;
+}
+
+
+.table-striped tbody tr:nth-child(odd):hover td {
+   background-color: #F9F9F9;
+}
+
+.fixed-table-container tbody .selected td {
+    background: lightBlue;
+}

src/extensions/multiple-selection-row/bootstrap-table-multiple-selection-row.js

@@ -0,0 +1,109 @@
+/**
+ * @author: Dennis Hernández
+ * @webSite: http://djhvscf.github.io/Blog
+ * @version: v1.0.0
+ */
+
+!function ($) {
+
+    'use strict';
+
+    // disable text selection
+    document.onselectstart = function() {
+        return false;
+    };
+
+    var toggleRow = function (row, that, clearAll, useShift) {
+        if (clearAll) {
+            row = $(row);
+            that.options.multipleSelectRowLastSelectedRow = undefined;
+            row.removeClass(that.options.multipleSelectRowCssClass);
+            that.uncheck(row.data("index"));    
+        } else {
+            that.options.multipleSelectRowLastSelectedRow = row;
+            row = $(row);
+            if (useShift) {
+                    row.addClass(that.options.multipleSelectRowCssClass);
+                    that.check(row.data("index"));
+            } else {
+                if(row.hasClass(that.options.multipleSelectRowCssClass)) {
+                    row.removeClass(that.options.multipleSelectRowCssClass)
+                    that.uncheck(row.data("index"));
+                } else {
+                    row.addClass(that.options.multipleSelectRowCssClass);
+                    that.check(row.data("index"));
+                }
+            }
+        }
+    };
+
+    var selectRowsBetweenIndexes = function (indexes, that) {
+        indexes.sort(function(a, b) {
+            return a - b;
+        });
+
+        for (var i = indexes[0]; i <= indexes[1]; i++) {
+            toggleRow(that.options.multipleSelectRowRows[i-1], that, false, true);
+        }
+    };
+
+    var clearAll = function (that) {
+        for (var i = 0; i < that.options.multipleSelectRowRows.length; i++) {
+            toggleRow(that.options.multipleSelectRowRows[i], that, true, false);
+        }
+    };
+    
+    $.extend($.fn.bootstrapTable.defaults, {
+        multipleSelectRow: false,
+        multipleSelectRowCssClass: 'multiple-select-row-selected',
+        //internal variables used by the extension
+        multipleSelectRowLastSelectedRow: undefined,
+        multipleSelectRowRows: []
+    });
+
+    var BootstrapTable = $.fn.bootstrapTable.Constructor,
+        _init = BootstrapTable.prototype.init,
+        _initBody = BootstrapTable.prototype.initBody;
+
+    BootstrapTable.prototype.init = function () {
+        if (this.options.multipleSelectRow) {
+            var that = this;
+
+            //Make sure that the internal variables have the correct value
+            this.options.multipleSelectRowLastSelectedRow = undefined;
+            this.options.multipleSelectRowRows = [];
+
+            var onPostBody = this.options.onPostBody;
+            this.options.onPostBody = function () {
+                setTimeout(function () {
+                    that.options.multipleSelectRowRows = that.$body.children();
+                    that.options.multipleSelectRowRows.mousedown(function (e) {
+                        if (window.event.ctrlKey) {
+                            toggleRow(e.currentTarget, that, false, false);
+                        }
+
+                        if (window.event.button === 0) {
+                            if (!window.event.ctrlKey && !window.event.shiftKey) {
+                                clearAll(that);
+                                toggleRow(e.currentTarget, that, false, false);
+                            }
+
+                            if (window.event.shiftKey) {
+                                selectRowsBetweenIndexes([that.options.multipleSelectRowLastSelectedRow.rowIndex, e.currentTarget.rowIndex], that)
+                            }
+                        }
+                    });
+                    onPostBody.apply();
+                }, 1);
+            };
+        }
+
+        _init.apply(this, Array.prototype.slice.apply(arguments));
+    };
+
+    BootstrapTable.prototype.clearAllMultipleSelectionRow = function () {
+        clearAll(this);
+    };
+
+    $.fn.bootstrapTable.methods.push('clearAllMultipleSelectionRow');
+}(jQuery);

src/extensions/multiple-selection-row/extension.json

@@ -0,0 +1,17 @@
+{
+  "name": "Multiple Selection Row",
+  "version": "1.0.0",
+  "description": "Plugin to enable the multiple selection row. You can use the ctrl+click to select one row or use ctrl+shift+click to select a range of rows.",
+  "url": "https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/multiple-selection-row",
+  "example": "",
+
+  "plugins": [{
+    "name": "bootstrap-table-multiple-selection-row",
+    "url": "https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/multiple-selection-row"
+  }],
+
+  "author": {
+    "name": "djhvscf",
+    "image": "https://avatars1.githubusercontent.com/u/4496763"
+  }
+}