From 075823c6c5d8028e3f11f91064533c55d4db390f Mon Sep 17 00:00:00 2001 From: zhixin Date: Sun, 1 Apr 2018 00:17:59 +0800 Subject: [PATCH 01/12] Refs #3720: rewrite toolbar to ES6 --- package.json | 2 +- .../toolbar/bootstrap-table-toolbar.js | 375 ++++++++---------- 2 files changed, 174 insertions(+), 203 deletions(-) diff --git a/package.json b/package.json index 77d1898453..36816ff240 100644 --- a/package.json +++ b/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", diff --git a/src/extensions/toolbar/bootstrap-table-toolbar.js b/src/extensions/toolbar/bootstrap-table-toolbar.js index 1058a8af8a..b4c9e5d31f 100644 --- a/src/extensions/toolbar/bootstrap-table-toolbar.js +++ b/src/extensions/toolbar/bootstrap-table-toolbar.js @@ -3,209 +3,180 @@ * @version: v2.0.0 * * @update Dennis Hernández + * @update zhixin wen */ -!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("
", "_" + that.options.idTable); - vModal += "
"; - vModal += "
"; - vModal += "
"; - vModal += " "; - vModal += sprintf("

%s

", searchTitle); - vModal += "
"; - vModal += "
"; - vModal += sprintf("
", "_" + that.options.idTable); - vModal += "
"; - vModal += "
"; - vModal += "
"; - vModal += "
"; - vModal += "
"; - - $("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(); +($ => { + const Utils = $.fn.bootstrapTable.utils + + $.extend($.fn.bootstrapTable.defaults, { + advancedSearch: false, + idForm: 'advancedSearch', + actionForm: '', + idTable: undefined, + onColumnAdvancedSearch (field, text) { + return false + } + }) + + $.extend($.fn.bootstrapTable.defaults.icons, { + advancedSearchIcon: 'glyphicon-chevron-down' + }) + + $.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 () { + super.initToolbar() + + const o = this.options + if (!o.search || !o.advancedSearch || !o.idTable) { + return + } + + this.$toolbar.prepend(` +
+
+ `) + + 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(` + + `) + + let timeoutId = 0 + + $(`#avdSearchModalContent_${o.idTable}`).append(this.createFormAvd().join('')) + + $(`#${o.idForm}`).off('keyup blur', 'input').on('keyup blur', 'input', e => { + clearTimeout(timeoutId) + timeoutId = setTimeout(() => { + this.onColumnAdvancedSearch(e) + }, o.searchTimeOut) + }) + + $(`#btnCloseAvd_${o.idTable}`).click(() => { + $(`#avdSearchModal_${o.idTable}`).modal('hide') + }) + + $(`#avdSearchModal_${o.idTable}`).modal() + } else { + $(`#avdSearchModal_${o.idTable}`).modal() + } + } + + createFormAvd () { + const o = this.options + const html = [`
`] + + for (let column of this.columns) { + if (!column.checkbox && column.visible && column.searchable) { + html.push(` +
+ +
+ +
+
+ `) } - }; - - var createFormAvd = function(pColumns, searchText, that) { - var htmlForm = []; - htmlForm.push(sprintf('', that.options.idForm, that.options.actionForm)); - for (var i in pColumns) { - var vObjCol = pColumns[i]; - if (!vObjCol.checkbox && vObjCol.visible && vObjCol.searchable) { - htmlForm.push('
'); - htmlForm.push(sprintf('', vObjCol.title)); - htmlForm.push('
'); - htmlForm.push(sprintf('', vObjCol.field, vObjCol.title, vObjCol.field)); - htmlForm.push('
'); - htmlForm.push('
'); - } + } + + html.push(` +
+
+ +
+
+ `) + html.push('
') + + return html + } + + initSearch () { + super.initSearch() + + if (!this.options.advancedSearch) { + return + } + + const fp = $.isEmptyObject(this.filterColumnsPartial) ? null : this.filterColumnsPartial + + 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) + + if ( + !(index !== -1 && + (typeof value === 'string' || typeof value === 'number') && + (`${value}`).toLowerCase().includes(fval)) + ) { + return false + } } - - htmlForm.push('
'); - htmlForm.push('
'); - htmlForm.push(sprintf('', "_" + that.options.idTable, searchText)); - htmlForm.push('
'); - htmlForm.push('
'); - htmlForm.push(''); - - return htmlForm; - }; - - $.extend($.fn.bootstrapTable.defaults, { - advancedSearch: false, - idForm: 'advancedSearch', - actionForm: '', - idTable: undefined, - onColumnAdvancedSearch: function (field, text) { - return false; - } - }); - - $.extend($.fn.bootstrapTable.defaults.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"; - } - }); - - $.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)); - - if (!this.options.search) { - return; - } - - if (!this.options.advancedSearch) { - return; - } - - if (!this.options.idTable) { - return; - } - - var that = this, - html = []; - - html.push(sprintf('
', this.options.buttonsAlign, this.options.buttonsAlign)); - html.push(sprintf('
'); - - that.$toolbar.prepend(html.join('')); - - that.$toolbar.find('button[name="advancedSearch"]') - .off('click').on('click', function() { - showAvdSearch(that.columns, that.options.formatAdvancedSearch(), that.options.formatAdvancedCloseButton(), that); - }); - }; - - 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 (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] + } + + this.options.pageNumber = 1 + this.onSearch(e) + this.updatePagination() + this.trigger('column-advanced-search', $field, text) + } + } +})(jQuery) From 977fe11ed8c0ba43ed615ebb42dfb7f04a46a5fe Mon Sep 17 00:00:00 2001 From: zhixin Date: Mon, 2 Apr 2018 23:11:02 +0800 Subject: [PATCH 02/12] Fix #3709, #3671: toolbar extension supports bootstrap 4 --- .../toolbar/bootstrap-table-toolbar.js | 57 ++++++++++++++----- 1 file changed, 43 insertions(+), 14 deletions(-) diff --git a/src/extensions/toolbar/bootstrap-table-toolbar.js b/src/extensions/toolbar/bootstrap-table-toolbar.js index b4c9e5d31f..53110ed4c8 100644 --- a/src/extensions/toolbar/bootstrap-table-toolbar.js +++ b/src/extensions/toolbar/bootstrap-table-toolbar.js @@ -9,6 +9,39 @@ ($ => { const Utils = $.fn.bootstrapTable.utils + const bootstrap = { + 3: { + icons: { + advancedSearchIcon: 'glyphicon-chevron-down' + }, + html: { + modalHeader: ` +
+ +

%s

+
+ ` + } + }, + 4: { + icons: { + advancedSearchIcon: 'fa-chevron-down' + }, + html: { + modalHeader: ` +
+

%s

+ +
+ ` + } + } + }[Utils.bootstrapVersion] + $.extend($.fn.bootstrapTable.defaults, { advancedSearch: false, idForm: 'advancedSearch', @@ -20,7 +53,7 @@ }) $.extend($.fn.bootstrapTable.defaults.icons, { - advancedSearchIcon: 'glyphicon-chevron-down' + advancedSearchIcon: bootstrap.icons.advancedSearchIcon }) $.extend($.fn.bootstrapTable.Constructor.EVENTS, { @@ -69,14 +102,17 @@