Merge pull request #971 from djhvscf/master

Added datepicker option to Filter Control

docs/_i18n/en/documentation/methods.md

@@ -226,6 +226,11 @@ The calling method syntax: `$('#table').bootstrapTable('method', parameter);`.
         <td>Hide the specified column.</td>
     </tr>
     <tr>
+        <td>getHiddenColumns</td>
+        <td>-</td>
+        <td>Get hidden columns.</td>
+    </tr>
+    <tr>
         <td>scrollTo</td>
         <td>value</td>
         <td>Scroll to the number value position, set 'bottom' means scroll to the bottom.</td>

docs/_i18n/es/documentation/methods.md

@@ -217,6 +217,11 @@ Sintaxis para llamar a un método: `$('#table').bootstrapTable('method', paramet
         <td>Oculta la columna especificada.</td>
     </tr>
     <tr>
+        <td>getHiddenColumns</td>
+        <td>-</td>
+        <td>Obtiene las columnas ocultas.</td>
+    </tr>
+    <tr>
         <td>scrollTo</td>
         <td>value</td>
         <td>Setea la posición del scroll, setear 'bottom' significa setear la posición del scroll al final de la tabla.</td>

docs/_i18n/zh-cn/documentation/methods.md

@@ -205,6 +205,11 @@ The calling method syntax: `$('#table').bootstrapTable('method', parameter);`.
         <td>Hide the specified column.</td>
     </tr>
     <tr>
+        <td>getHiddenColumns</td>
+        <td>-</td>
+        <td>Get hidden columns.</td>
+    </tr>
+    <tr>
         <td>scrollTo</td>
         <td>value</td>
         <td>Scroll to the number value position, set 'bottom' means scroll to the bottom.</td>

src/bootstrap-table.js

@@ -2194,6 +2194,12 @@
         this.toggleColumn(getFieldIndex(this.options.columns, field), false, true);
     };
 
+    BootstrapTable.prototype.getHiddenColumns = function () {
+        return $.grep(this.options.columns, function( column ) {
+            return !column.visible;
+        });
+    };
+
     BootstrapTable.prototype.filterBy = function (columns) {
         this.filterColumns = $.isEmptyObject(columns) ? {} : columns;
         this.options.pageNumber = 1;
@@ -2215,7 +2221,7 @@
 
     BootstrapTable.prototype.getScrollPosition = function () {
         return this.scrollTo();
-    }
+    };
 
     BootstrapTable.prototype.selectPage = function (page) {
         if (page > 0 && page <= this.options.totalPages) {
@@ -2276,7 +2282,7 @@
         'resetWidth',
         'destroy',
         'showLoading', 'hideLoading',
-        'showColumn', 'hideColumn',
+        'showColumn', 'hideColumn', 'getHiddenColumns',
         'filterBy',
         'scrollTo',
         'getScrollPosition',

src/extensions/filter-control/README.md

@@ -1,6 +1,7 @@
 # Table Filter Control
 
 Use Plugin: [bootstrap-table-filter-control](https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/filter-control)
+Dependence if you use the datepicker option: [bootstrap-datepicker](https://github.com/eternicode/bootstrap-datepicker) v1.4.0
 
 ## Usage
 
@@ -21,7 +22,12 @@ Use Plugin: [bootstrap-table-filter-control](https://github.com/wenzhixin/bootst
 ### filterControl
 
 * type: String
-* description: Set `input` or `select` to add one of those element into column.
+* description: Set `input`: show an input control, `select`: show a select control, 'datepicker': show a datepicker control.
+* default: `undefined`
+
+### filterDatepickerOptions
+* type: Object
+* description: If the datepicker option is set use this option to configure the datepicker with the native options. Use this way: `data-filter-datepicker-options='{"autoclose":true, "clearBtn": true, "todayHighlight": true}'`.
 * default: `undefined`
 
 ## Events

src/extensions/filter-control/bootstrap-table-filter-control.js

@@ -61,6 +61,31 @@
         return defaultValue;
     };
 
+    var addValueToSelectControl = function (selectControl, value, text) {
+        var isValidToAdd = existsValueInSelectControl(selectControl, value);
+
+        if (isValidToAdd) {
+            selectControl.append($("<option></option>")
+                .attr("value", value)
+                .text(text));
+        }
+    };
+
+    var existsValueInSelectControl = function (selectControl, value) {
+        var options = selectControl.get(0).options,
+            iOpt = 0;
+
+        for (; iOpt < options.length; iOpt++) {
+            if (options[iOpt].value === value) {
+                //The value is nor valid to add
+                return false;
+            }
+        }
+
+        //If we get here, the value is valid to add
+        return true;
+    };
+
     $.extend($.fn.bootstrapTable.defaults, {
         filterControl: false,
         onColumnSearch: function (field, text) {
@@ -70,7 +95,8 @@
 
     $.extend($.fn.bootstrapTable.COLUMN_DEFAULTS, {
         filterControl: undefined,
-        filterData: undefined
+        filterData: undefined,
+        filterDatepickerOptions: undefined
     });
 
     $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
@@ -120,6 +146,10 @@
                         html.push(sprintf('<select class="%s form-control" style="width: 100%; visibility: %s"></select>',
                             column.field, isVisible))
                         break;
+                    case 'datepicker':
+                        html.push(sprintf('<input type="text" class="date-filter-control %s form-control" style="width: 100%; visibility: %s">',
+                            column.field, isVisible));
+                        break;
                 }
             }
 
@@ -128,9 +158,8 @@
                 var filterDataType = column.filterData.substring(0, 3);
                 var filterDataSource = column.filterData.substring(4, column.filterData.length);
                 var selectControl = $('.' + column.field);
-                selectControl.append($("<option></option>")
-                    .attr("value", '')
-                    .text(''));
+                addValueToSelectControl(selectControl, '', '');
+
                 switch (filterDataType) {
                     case 'url':
                         $.ajax({
@@ -138,9 +167,7 @@
                             dataType: 'json',
                             success: function (data) {
                                 $.each(data, function (key, value) {
-                                    selectControl.append($("<option></option>")
-                                        .attr("value", key)
-                                        .text(value));
+                                    addValueToSelectControl(selectControl, key, value);
                                 });
                             }
                         });
@@ -148,10 +175,8 @@
                     case 'var':
                         var variableValues = window[filterDataSource];
                         for (var key in variableValues) {
-                            selectControl.append($("<option></option>")
-                                .attr("value", key)
-                                .text(variableValues[key]));
-                        };
+                            addValueToSelectControl(selectControl, key, variableValues[key]);
+                        }
                         break;
                 }
             }
@@ -171,6 +196,22 @@
                     that.onColumnSearch(event);
                 }, that.options.searchTimeOut);
             });
+
+            var datepickers = that.$header.find('.date-filter-control');
+            if (datepickers.length > 0) {
+                $.each(this.options.columns, function (i, column) {
+                    if (column.filterControl !== undefined && column.filterControl.toLowerCase() === 'datepicker') {
+                        column.filterDatepickerOptions = $.extend(column.filterDatepickerOptions, {
+                            calendarWeeks: true
+                        });
+
+                        that.$header.find('.date-filter-control.' + column.field).datepicker(column.filterDatepickerOptions)
+                            .on('changeDate', function (e) {
+                                $(e.currentTarget).keyup();
+                            });
+                    }
+                });
+            }
         } else {
             this.$header.find('.filterControl').hide();
         }
@@ -198,37 +239,15 @@
                             && column.searchable) {
 
                         if (column.filterData === undefined || column.filterData.toLowerCase() === 'column') {
-                            var selectControl = $('.' + column.field),
-                                    iOpt = 0,
-                                    exitsOpt = false,
-                                    options;
+                            var selectControl = $('.' + column.field);
                             if (selectControl !== undefined) {
-                                options = selectControl.get(0).options;
-
-                                if (options.length === 0) {
-
+                                if (selectControl.get(0).options.length === 0) {
                                     //Added the default option
-                                    selectControl.append($("<option></option>")
-                                        .attr("value", '')
-                                        .text(''));
-
-                                    selectControl.append($("<option></option>")
-                                        .attr("value", value)
-                                        .text(value));
-                                } else {
-                                    for (; iOpt < options.length; iOpt++) {
-                                        if (options[iOpt].value === value) {
-                                            exitsOpt = true;
-                                            break;
-                                        }
-                                    }
-
-                                    if (!exitsOpt) {
-                                        selectControl.append($("<option></option>")
-                                            .attr("value", value)
-                                            .text(value));
-                                    }
+                                    addValueToSelectControl(selectControl, '', '');
                                 }
+
+                                //Added a new value
+                                addValueToSelectControl(selectControl, value, value);
                             }
                         }
                     }