Merge pull request #1 from wenzhixin/develop

update

package.json

@@ -28,7 +28,7 @@
   "scripts": {
     "grunt": "grunt",
     "postinstall": "opencollective postinstall || exit 0",
-    "lint": "eslint src/bootstrap-table.js src/extensions/export/bootstrap-table-export.js"
+    "lint": "eslint src/bootstrap-table.js src/extensions/export/bootstrap-table-export.js src/extensions/toolbar/bootstrap-table-toolbar.js"
   },
   "repository": {
     "type": "git",

src/bootstrap-table.css

@@ -198,7 +198,6 @@
     position: relative;
     margin-top: 10px;
     margin-bottom: 10px;
-    line-height: 34px;
 }
 
 .fixed-table-pagination li.disabled a {
@@ -308,7 +307,7 @@ div.fixed-table-scroll-outer {
     clear: both;
 }
 
-.fullscreen {
+.bootstrap-table.fullscreen {
     position: fixed;
     top: 0;
     left: 0;

src/bootstrap-table.js

@@ -242,10 +242,8 @@
       }
 
       const props = field.split('.')
-      for (const p in props) {
-        if (props.hasOwnProperty(p)) {
-          value = value && value[props[p]]
-        }
+      for (const p of props) {
+        value = value && value[p]
       }
       return escape ? this.escapeHTML(value) : value
     },
@@ -1239,7 +1237,9 @@
       this.searchText = text
       this.options.searchText = text
 
-      this.options.pageNumber = 1
+      if (!firedByInitSearchText) {
+        this.options.pageNumber = 1
+      }
       this.initSearch()
       if (firedByInitSearchText) {
         if (this.options.sidePagination === 'client') {
@@ -1776,6 +1776,9 @@
           type = column.radio ? 'radio' : type
 
           const c = column['class'] || ''
+          const isChecked = value === true || (value_ || value && value.checked)
+          const isDisabled = !column.checkboxEnabled || (value && value.disabled)
+
           text = [
             this.options.cardView
               ? `<div class="card-view ${c}">`
@@ -1784,9 +1787,9 @@
               data-index="${i}"
               name="${this.options.selectItemName}"
               type="${type}"
-              value="${item[this.options.idField]}"
-              ${value === true || (value_ || (value && value.checked)) ? 'checked="checked"' : ''}
-              ${!column.checkboxEnabled || (value && value.disabled) ? 'disabled="disabled"' : ''} />`,
+              ${Utils.sprintf('value="%s"', item[this.options.idField])}
+              ${Utils.sprintf('checked="%s"', isChecked ? 'checked' : undefined)}
+              ${Utils.sprintf('disabled="%s"', isDisabled ? 'disabled' : undefined)} />`,
             this.header.formatters[j] && typeof value === 'string' ? value : '',
             this.options.cardView ? '</div>' : '</td>'
           ].join('')
@@ -1878,7 +1881,7 @@
           e.type === 'click' &&
           this.options.clickToSelect &&
           column.clickToSelect &&
-          this.options.ignoreClickToSelectOn(e.target)
+          !this.options.ignoreClickToSelectOn(e.target)
         ) {
           const $selectItem = $tr.find(Utils.sprintf('[name="%s"]', this.options.selectItemName))
           if ($selectItem.length) {
@@ -1919,26 +1922,7 @@
         e.stopImmediatePropagation()
 
         const $this = $(e.currentTarget)
-        const checked = $this.prop('checked')
-        const row = this.data[$this.data('index')]
-
-        if ($(e.currentTarget).is(':radio') || this.options.singleSelect) {
-          for (let row of this.options.data) {
-            row[this.header.stateField] = false
-          }
-        }
-
-        row[this.header.stateField] = checked
-
-        if (this.options.singleSelect) {
-          this.$selectItem.not(this).each((i, el) => {
-            this.data[$(el).data('index')][this.header.stateField] = false
-          })
-          this.$selectItem.filter(':checked').not(this).prop('checked', false)
-        }
-
-        this.updateSelected()
-        this.trigger(checked ? 'check' : 'uncheck', row, $this)
+        this.check_($this.prop('checked'), $this.data('index'))
       })
 
       this.header.events.forEach((events, i) => {
@@ -2765,7 +2749,8 @@
     }
 
     getSelections () {
-      return (this.options.data, row => // fix #2424: from html with checkbox
+      // fix #2424: from html with checkbox
+      return this.options.data.filter(row =>
         row[this.header.stateField] === true)
     }
 
@@ -2817,8 +2802,18 @@
     }
 
     check_ (checked, index) {
-      const $el = this.$selectItem.filter(Utils.sprintf('[data-index="%s"]', index)).prop('checked', checked)
-      this.data[index][this.header.stateField] = checked
+      const $el = this.$selectItem.filter(`[data-index="${index}"]`)
+      const row = this.data[index]
+
+      if ($el.is(':radio') || this.options.singleSelect) {
+        for (let r of this.options.data) {
+          r[this.header.stateField] = false
+        }
+        this.$selectItem.filter(':checked').not($this).prop('checked', false)
+      }
+
+      row[this.header.stateField] = checked
+      $el.prop('checked', checked)
       this.updateSelected()
       this.trigger(checked ? 'check' : 'uncheck', this.data[index], $el)
     }

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

@@ -69,7 +69,7 @@
             };
             column._formatter = column._formatter ? column._formatter : column.formatter;
             column.formatter = function(value, row, index) {
-                var result = column._formatter ? column._formatter(value, row, index) : value;
+                var result = $.fn.bootstrapTable.utils.calculateObjectValue(column, column._formatter, [value, row, index], value);
 
                 $.each(column, processDataOptions);
 

src/extensions/filter-control/README.md

@@ -59,7 +59,7 @@ Dependence if you use the datepicker option: [bootstrap-datepicker](https://gith
 ### filterData
 
 * type: String
-* description: Set custom select filter values, use `var:variable` to load from a variable or `url:http://www.example.com/data.json` to load from a remote json file or `jso:{key:data}` to load from a json string.
+* description: Set custom select filter values, use `var:variable` to load from a variable or `url:http://www.example.com/data.json` to load from a remote json file or `json:{key:data}` to load from a json string.
 * default: `undefined`
 
 ### filterDatepickerOptions

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

@@ -3,209 +3,222 @@
  * @version: v2.0.0
  *
  * @update Dennis Hernández <http://djhvscf.github.io/Blog>
+ * @update zhixin wen <wenzhixin2010@gmail.com>
  */
 
-!function($) {
-    'use strict';
-
-    var firstLoad = false;
-
-    var sprintf = $.fn.bootstrapTable.utils.sprintf;
-
-    var showAvdSearch = function(pColumns, searchTitle, searchText, that) {
-        if (!$("#avdSearchModal" + "_" + that.options.idTable).hasClass("modal")) {
-            var vModal = sprintf("<div id=\"avdSearchModal%s\"  class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"mySmallModalLabel\" aria-hidden=\"true\">", "_" + that.options.idTable);
-            vModal += "<div class=\"modal-dialog modal-xs\">";
-            vModal += " <div class=\"modal-content\">";
-            vModal += "  <div class=\"modal-header\">";
-            vModal += "   <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\" >&times;</button>";
-            vModal += sprintf("   <h4 class=\"modal-title\">%s</h4>", searchTitle);
-            vModal += "  </div>";
-            vModal += "  <div class=\"modal-body modal-body-custom\">";
-            vModal += sprintf("   <div class=\"container-fluid\" id=\"avdSearchModalContent%s\" style=\"padding-right: 0px;padding-left: 0px;\" >", "_" + that.options.idTable);
-            vModal += "   </div>";
-            vModal += "  </div>";
-            vModal += "  </div>";
-            vModal += " </div>";
-            vModal += "</div>";
-
-            $("body").append($(vModal));
-
-            var vFormAvd = createFormAvd(pColumns, searchText, that),
-                timeoutId = 0;;
-
-            $('#avdSearchModalContent' + "_" + that.options.idTable).append(vFormAvd.join(''));
-
-            $('#' + that.options.idForm).off('keyup blur', 'input').on('keyup blur', 'input', function (event) {
-                clearTimeout(timeoutId);
-                timeoutId = setTimeout(function () {
-                    that.onColumnAdvancedSearch(event);
-                }, that.options.searchTimeOut);
-            });
-
-            $("#btnCloseAvd" + "_" + that.options.idTable).click(function() {
-                $("#avdSearchModal" + "_" + that.options.idTable).modal('hide');
-            });
-
-            $("#avdSearchModal" + "_" + that.options.idTable).modal();
-        } else {
-            $("#avdSearchModal" + "_" + that.options.idTable).modal();
-        }
-    };
-
-    var createFormAvd = function(pColumns, searchText, that) {
-        var htmlForm = [];
-        htmlForm.push(sprintf('<form class="form-horizontal" id="%s" action="%s" >', that.options.idForm, that.options.actionForm));
-        for (var i in pColumns) {
-            var vObjCol = pColumns[i];
-            if (!vObjCol.checkbox && vObjCol.visible && vObjCol.searchable) {
-                htmlForm.push('<div class="form-group">');
-                htmlForm.push(sprintf('<label class="col-sm-4 control-label">%s</label>', vObjCol.title));
-                htmlForm.push('<div class="col-sm-6">');
-                htmlForm.push(sprintf('<input type="text" class="form-control input-md" name="%s" placeholder="%s" id="%s">', vObjCol.field, vObjCol.title, vObjCol.field));
-                htmlForm.push('</div>');
-                htmlForm.push('</div>');
-            }
-        }
-
-        htmlForm.push('<div class="form-group">');
-        htmlForm.push('<div class="col-sm-offset-9 col-sm-3">');
-        htmlForm.push(sprintf('<button type="button" id="btnCloseAvd%s" class="btn btn-default" >%s</button>', "_" + that.options.idTable, searchText));
-        htmlForm.push('</div>');
-        htmlForm.push('</div>');
-        htmlForm.push('</form>');
-
-        return htmlForm;
-    };
-
-    $.extend($.fn.bootstrapTable.defaults, {
-        advancedSearch: false,
-        idForm: 'advancedSearch',
-        actionForm: '',
-        idTable: undefined,
-        onColumnAdvancedSearch: function (field, text) {
-            return false;
-        }
-    });
+($ => {
+  const Utils = $.fn.bootstrapTable.utils
 
-    $.extend($.fn.bootstrapTable.defaults.icons, {
+  const bootstrap = {
+    3: {
+      icons: {
         advancedSearchIcon: 'glyphicon-chevron-down'
-    });
-
-    $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
-        'column-advanced-search.bs.table': 'onColumnAdvancedSearch'
-    });
-
-    $.extend($.fn.bootstrapTable.locales, {
-        formatAdvancedSearch: function() {
-            return 'Advanced search';
-        },
-        formatAdvancedCloseButton: function() {
-            return "Close";
+      },
+      html: {
+        modalHeader: `
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+            <h4 class="modal-title">%s</h4>
+          </div>
+        `
+      }
+    },
+    4: {
+      icons: {
+        advancedSearchIcon: 'fa-chevron-down'
+      },
+      html: {
+        modalHeader: `
+          <div class="modal-header">
+            <h4 class="modal-title">%s</h4>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+        `
+      }
+    }
+  }[Utils.bootstrapVersion]
+
+  $.extend($.fn.bootstrapTable.defaults, {
+    advancedSearch: false,
+    idForm: 'advancedSearch',
+    actionForm: '',
+    idTable: undefined,
+    onColumnAdvancedSearch (field, text) {
+      return false
+    }
+  })
+
+  $.extend($.fn.bootstrapTable.defaults.icons, {
+    advancedSearchIcon: bootstrap.icons.advancedSearchIcon
+  })
+
+  $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
+    'column-advanced-search.bs.table': 'onColumnAdvancedSearch'
+  })
+
+  $.extend($.fn.bootstrapTable.locales, {
+    formatAdvancedSearch () {
+      return 'Advanced search'
+    },
+    formatAdvancedCloseButton () {
+      return 'Close'
+    }
+  })
+
+  $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales)
+
+  $.BootstrapTable = class extends $.BootstrapTable {
+    initToolbar () {
+      const o = this.options
+
+      this.showToolbar = this.showToolbar || o.search && o.advancedSearch && o.idTable
+
+      super.initToolbar()
+
+      if (!o.search || !o.advancedSearch || !o.idTable) {
+        return
+      }
+
+      this.$toolbar.find('>.btn-group').append(`
+        <button class="btn btn-default${Utils.sprintf(' btn-%s', o.buttonsClass)}${Utils.sprintf(' btn-%s', o.iconSize)}"
+          type="button"
+          name="advancedSearch"
+          aria-label="advanced search"
+          title="${o.formatAdvancedSearch()}">
+        <i class="${o.iconsPrefix} ${o.icons.advancedSearchIcon}"></i>
+        </button>
+      `)
+
+      this.$toolbar.find('button[name="advancedSearch"]').off('click').on('click', () => this.showAvdSearch())
+    }
+
+    showAvdSearch () {
+      const o = this.options
+
+      if (!$(`#avdSearchModal_${o.idTable}`).hasClass('modal')) {
+        $('body').append(`
+          <div id="avdSearchModal_${o.idTable}"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-xs">
+              <div class="modal-content">
+                ${Utils.sprintf(bootstrap.html.modalHeader, o.formatAdvancedSearch())}
+                <div class="modal-body modal-body-custom">
+                  <div class="container-fluid" id="avdSearchModalContent_${o.idTable}"
+                    style="padding-right: 0px; padding-left: 0px;" >
+                  </div>
+                </div>
+                <div class="modal-footer">
+                  <button type="button" id="btnCloseAvd_${o.idTable}" class="btn btn-${o.buttonsClass}">
+                    ${o.formatAdvancedCloseButton()}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        `)
+
+        let timeoutId = 0
+
+        $(`#avdSearchModalContent_${o.idTable}`).append(this.createFormAvd().join(''))
+
+        $(`#${o.idForm}`).off('keyup blur', 'input').on('keyup blur', 'input', e => {
+          if (o.sidePagination === 'server') {
+            this.onColumnAdvancedSearch(e)
+          } else {
+            clearTimeout(timeoutId)
+            timeoutId = setTimeout(() => {
+              this.onColumnAdvancedSearch(e)
+            }, o.searchTimeOut)
+          }
+        })
+
+        $(`#btnCloseAvd_${o.idTable}`).click(() => {
+          $(`#avdSearchModal_${o.idTable}`).modal('hide')
+          if (o.sidePagination === 'server') {
+            this.options.pageNumber = 1
+            this.updatePagination()
+            this.trigger('column-advanced-search', this.filterColumnsPartial)
+          }
+        })
+
+        $(`#avdSearchModal_${o.idTable}`).modal()
+      } else {
+        $(`#avdSearchModal_${o.idTable}`).modal()
+      }
+    }
+
+    createFormAvd () {
+      const o = this.options
+      const html = [`<form class="form-horizontal" id="${o.idForm}" action="${o.actionForm}">`]
+
+      for (let column of this.columns) {
+        if (!column.checkbox && column.visible && column.searchable) {
+          html.push(`
+            <div class="form-group row">
+              <label class="col-sm-4 control-label">${column.title}</label>
+              <div class="col-sm-6">
+                <input type="text" class="form-control input-md" name="${column.field}" placeholder="${column.title}" id="${column.field}">
+              </div>
+            </div>
+          `)
         }
-    });
-
-    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);
-
-    var BootstrapTable = $.fn.bootstrapTable.Constructor,
-        _initToolbar = BootstrapTable.prototype.initToolbar,
-        _load = BootstrapTable.prototype.load,
-        _initSearch = BootstrapTable.prototype.initSearch;
+      }
 
-    BootstrapTable.prototype.initToolbar = function() {
-        _initToolbar.apply(this, Array.prototype.slice.apply(arguments));
+      html.push('</form>')
 
-        if (!this.options.search) {
-            return;
-        }
-
-        if (!this.options.advancedSearch) {
-            return;
-        }
-
-        if (!this.options.idTable) {
-            return;
-        }
+      return html
+    }
 
-        var that = this,
-            html = [];
+    initSearch () {
+      super.initSearch()
 
-        html.push(sprintf('<div class="columns columns-%s btn-group pull-%s" role="group">', this.options.buttonsAlign, this.options.buttonsAlign));
-        html.push(sprintf('<button class="btn btn-default%s' + '" type="button" name="advancedSearch" aria-label="advanced search" title="%s">', that.options.iconSize === undefined ? '' : ' btn-' + that.options.iconSize, that.options.formatAdvancedSearch()));
-        html.push(sprintf('<i class="%s %s"></i>', that.options.iconsPrefix, that.options.icons.advancedSearchIcon))
-        html.push('</button></div>');
+      if (!this.options.advancedSearch || this.options.sidePagination === 'server') {
+        return
+      }
 
-        that.$toolbar.prepend(html.join(''));
+      const fp = $.isEmptyObject(this.filterColumnsPartial) ? null : this.filterColumnsPartial
 
-        that.$toolbar.find('button[name="advancedSearch"]')
-            .off('click').on('click', function() {
-                showAvdSearch(that.columns, that.options.formatAdvancedSearch(), that.options.formatAdvancedCloseButton(), that);
-            });
-    };
+      this.data = fp ? $.grep(this.data, function (item, i) {
+        for (const key in fp) {
+          const fval = fp[key].toLowerCase()
+          let value = item[key]
+          const index = this.header.fields.indexOf(key)
+          value = Utils.calculateObjectValue(this.header, this.header.formatters[index], [value, item, i], value)
 
-    BootstrapTable.prototype.load = function(data) {
-        _load.apply(this, Array.prototype.slice.apply(arguments));
-
-        if (!this.options.advancedSearch) {
-            return;
-        }
-
-        if (typeof this.options.idTable === 'undefined') {
-            return;
-        } else {
-            if (!firstLoad) {
-                var height = parseInt($(".bootstrap-table").height());
-                height += 10;
-                $("#" + this.options.idTable).bootstrapTable("resetView", {height: height});
-                firstLoad = true;
-            }
-        }
-    };
-
-    BootstrapTable.prototype.initSearch = function () {
-        _initSearch.apply(this, Array.prototype.slice.apply(arguments));
-
-        if (!this.options.advancedSearch) {
-            return;
-        }
-
-        var that = this;
-        var fp = $.isEmptyObject(this.filterColumnsPartial) ? null : this.filterColumnsPartial;
-
-        this.data = fp ? $.grep(this.data, function (item, i) {
-            for (var key in fp) {
-                var fval = fp[key].toLowerCase();
-                var value = item[key];
-                value = $.fn.bootstrapTable.utils.calculateObjectValue(that.header,
-                    that.header.formatters[$.inArray(key, that.header.fields)],
-                    [value, item, i], value);
-
-                if (!($.inArray(key, that.header.fields) !== -1 &&
-                    (typeof value === 'string' || typeof value === 'number') &&
-                    (value + '').toLowerCase().indexOf(fval) !== -1)) {
-                    return false;
-                }
-            }
-            return true;
-        }) : this.data;
-    };
-
-    BootstrapTable.prototype.onColumnAdvancedSearch = function (event) {
-        var text = $.trim($(event.currentTarget).val());
-        var $field = $(event.currentTarget)[0].id;
-
-        if ($.isEmptyObject(this.filterColumnsPartial)) {
-            this.filterColumnsPartial = {};
+          if (
+            !(index !== -1 &&
+            (typeof value === 'string' || typeof value === 'number') &&
+            (`${value}`).toLowerCase().includes(fval))
+          ) {
+            return false
+          }
         }
-        if (text) {
-            this.filterColumnsPartial[$field] = text;
-        } else {
-            delete this.filterColumnsPartial[$field];
-        }
-
-        this.options.pageNumber = 1;
-        this.onSearch(event);
-        this.updatePagination();
-        this.trigger('column-advanced-search', $field, text);
-    };
-}(jQuery);
+        return true
+      }) : this.data
+    }
+
+    onColumnAdvancedSearch (e) {
+      const text = $.trim($(e.currentTarget).val())
+      const $field = $(e.currentTarget)[0].id
+
+      if ($.isEmptyObject(this.filterColumnsPartial)) {
+        this.filterColumnsPartial = {}
+      }
+      if (text) {
+        this.filterColumnsPartial[$field] = text
+      } else {
+        delete this.filterColumnsPartial[$field]
+      }
+
+      if (this.options.sidePagination !== 'server') {
+        this.options.pageNumber = 1
+        this.onSearch(e)
+        this.updatePagination()
+        this.trigger('column-advanced-search', $field, text)
+      }
+    }
+  }
+})(jQuery)