From e94a52a541cd3cef009c51c7e3b1e6ddc37281e0 Mon Sep 17 00:00:00 2001 From: Dustin Utecht <13292481+UtechtDustin@users.noreply.github.com> Date: Sat, 2 Nov 2019 21:44:29 +0100 Subject: [PATCH 1/3] added new method to order columns programatically --- site/docs/extensions/reorder-columns.md | 11 +++++++++++ .../bootstrap-table-reorder-columns.js | 7 +++++++ 2 files changed, 18 insertions(+) diff --git a/site/docs/extensions/reorder-columns.md b/site/docs/extensions/reorder-columns.md index a8daca80da..022be1586a 100644 --- a/site/docs/extensions/reorder-columns.md +++ b/site/docs/extensions/reorder-columns.md @@ -56,6 +56,17 @@ Dependence: - **Default:** `null` +## Methods + +### orderColumns + +- **parameters:** `object` + +- **Detail:** + + Reorders the the columns by the given object. + The Object key has to be the [field](https://bootstrap-table.com/docs/api/column-options/#field) and the value is the column index (starts by 0). + ## Events ### onReorderColumn(reorder-column.bs.table) diff --git a/src/extensions/reorder-columns/bootstrap-table-reorder-columns.js b/src/extensions/reorder-columns/bootstrap-table-reorder-columns.js index 81fc7ccfe8..090a3ae8c3 100644 --- a/src/extensions/reorder-columns/bootstrap-table-reorder-columns.js +++ b/src/extensions/reorder-columns/bootstrap-table-reorder-columns.js @@ -53,6 +53,8 @@ $.extend($.fn.bootstrapTable.Constructor.EVENTS, { 'reorder-column.bs.table': 'onReorderColumn' }) +$.fn.bootstrapTable.methods.push('orderColumns') + const BootstrapTable = $.fn.bootstrapTable.Constructor const _initHeader = BootstrapTable.prototype.initHeader const _toggleColumn = BootstrapTable.prototype._toggleColumn @@ -181,3 +183,8 @@ BootstrapTable.prototype.makeRowsReorderable = function () { } }) } + +BootstrapTable.prototype.orderColumns = function (order) { + $(this.$el).dragtable('destroy').dragtable({restoreState: (order)}) + this.makeRowsReorderable() +} \ No newline at end of file From 6b5fc2c825d3c838e75d1cf675cd49d444d285a4 Mon Sep 17 00:00:00 2001 From: Dustin Utecht <13292481+UtechtDustin@users.noreply.github.com> Date: Sat, 2 Nov 2019 21:56:47 +0100 Subject: [PATCH 2/3] added an example of the object --- site/docs/extensions/reorder-columns.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/extensions/reorder-columns.md b/site/docs/extensions/reorder-columns.md index 022be1586a..d098fc195c 100644 --- a/site/docs/extensions/reorder-columns.md +++ b/site/docs/extensions/reorder-columns.md @@ -60,7 +60,7 @@ Dependence: ### orderColumns -- **parameters:** `object` +- **parameters:** `object` e.g. `{"name": 0, "price": 1}` - **Detail:** From 40f5b4dd7c96573dbf7d97af1860296cfa482c69 Mon Sep 17 00:00:00 2001 From: zhixin Date: Tue, 5 Nov 2019 10:14:07 +0800 Subject: [PATCH 3/3] Improved to use data-field attribute --- site/docs/extensions/reorder-columns.md | 4 +- .../bootstrap-table-reorder-columns.js | 220 +++++++++--------- 2 files changed, 111 insertions(+), 113 deletions(-) diff --git a/site/docs/extensions/reorder-columns.md b/site/docs/extensions/reorder-columns.md index d098fc195c..56832b31ae 100644 --- a/site/docs/extensions/reorder-columns.md +++ b/site/docs/extensions/reorder-columns.md @@ -60,11 +60,11 @@ Dependence: ### orderColumns -- **parameters:** `object` e.g. `{"name": 0, "price": 1}` +- **parameters:** `object` e.g. `{name: 0, price: 1}` - **Detail:** - Reorders the the columns by the given object. + Reorders the the columns by the given object. The Object key has to be the [field](https://bootstrap-table.com/docs/api/column-options/#field) and the value is the column index (starts by 0). ## Events diff --git a/src/extensions/reorder-columns/bootstrap-table-reorder-columns.js b/src/extensions/reorder-columns/bootstrap-table-reorder-columns.js index 090a3ae8c3..2e48b0b39f 100644 --- a/src/extensions/reorder-columns/bootstrap-table-reorder-columns.js +++ b/src/extensions/reorder-columns/bootstrap-table-reorder-columns.js @@ -1,9 +1,19 @@ /** * @author: Dennis Hernández * @webSite: http://djhvscf.github.io/Blog - * @version: v1.1.0 + * @update: https://github.com/wenzhixin + * @version: v1.2.0 */ +$.akottr.dragtable.prototype._restoreState = function (persistObj) { + for (const [field, value] of Object.entries(persistObj)) { + var $th = this.originalTable.el.find(`th[data-field="${field}"]`) + this.originalTable.startIndex = $th.prevAll().length + 1 + this.originalTable.endIndex = parseInt(value, 10) + 1 + this._bubbleCols() + } +} + // From MDN site, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter const filterFn = () => { if (!Array.prototype.filter) { @@ -27,7 +37,7 @@ const filterFn = () => { // NOTE: Technically this should Object.defineProperty at // the next index, as push can be affected by // properties on Object.prototype and Array.prototype. - // But that method's new, and collisions should be + // But this method's new, and collisions should be // rare, so use the more-compatible alternative. if (fun.call(thisArg, val, i, t)) { res.push(val) @@ -55,136 +65,124 @@ $.extend($.fn.bootstrapTable.Constructor.EVENTS, { $.fn.bootstrapTable.methods.push('orderColumns') -const BootstrapTable = $.fn.bootstrapTable.Constructor -const _initHeader = BootstrapTable.prototype.initHeader -const _toggleColumn = BootstrapTable.prototype._toggleColumn -const _toggleView = BootstrapTable.prototype.toggleView -const _resetView = BootstrapTable.prototype.resetView +$.BootstrapTable = class extends $.BootstrapTable { + initHeader (...args) { + super.initHeader(...args) -BootstrapTable.prototype.initHeader = function (...args) { - _initHeader.apply(this, Array.prototype.slice.apply(args)) + if (!this.options.reorderableColumns) { + return + } - if (!this.options.reorderableColumns) { - return + this.makeRowsReorderable() } - const oldHandler = $._data( this.$container[0], 'events' )['click'][0].handler - this.$container.off('click', '.th-inner').on('click', '.th-inner', e => { - if ($('.dragtable-sortable').length > 0) { - e.stopImmediatePropagation() - } - }) - this.$container.on('click', '.th-inner', oldHandler) - this.makeRowsReorderable() -} + _toggleColumn (...args) { + super._toggleColumn(...args) -BootstrapTable.prototype._toggleColumn = function (...args) { - _toggleColumn.apply(this, Array.prototype.slice.apply(args)) + if (!this.options.reorderableColumns) { + return + } - if (!this.options.reorderableColumns) { - return + this.makeRowsReorderable() } - this.makeRowsReorderable() -} + toggleView (...args) { + super.toggleView(...args) -BootstrapTable.prototype.toggleView = function (...args) { - _toggleView.apply(this, Array.prototype.slice.apply(args)) + if (!this.options.reorderableColumns) { + return + } - if (!this.options.reorderableColumns) { - return - } + if (this.options.cardView) { + return + } - if (this.options.cardView) { - return + this.makeRowsReorderable() } - this.makeRowsReorderable() -} + resetView (...args) { + super.resetView(...args) -BootstrapTable.prototype.resetView = function (...args) { - _resetView.apply(this, Array.prototype.slice.apply(args)) + if (!this.options.reorderableColumns) { + return + } - if (!this.options.reorderableColumns) { - return + this.makeRowsReorderable() } - this.makeRowsReorderable() -} + makeRowsReorderable (order = null) { + try { + $(this.$el).dragtable('destroy') + } catch (e) { + // do nothing + } + $(this.$el).dragtable({ + maxMovingRows: this.options.maxMovingRows, + dragaccept: this.options.dragaccept, + clickDelay: 200, + dragHandle: '.th-inner', + restoreState: order, + beforeStop: () => { + const ths = [] + const formatters = [] + const columns = [] + let columnsHidden = [] + let columnIndex = -1 + const optionsColumns = [] + this.$header.find('th').each(function (i) { + ths.push($(this).data('field')) + formatters.push($(this).data('formatter')) + }) -BootstrapTable.prototype.makeRowsReorderable = function () { - const that = this - try { - $(this.$el).dragtable('destroy') - } catch (e) { - // - } - $(this.$el).dragtable({ - maxMovingRows: that.options.maxMovingRows, - dragaccept: that.options.dragaccept, - clickDelay: 200, - dragHandle: '.th-inner', - beforeStop () { - const ths = [] - const formatters = [] - const columns = [] - let columnsHidden = [] - let columnIndex = -1 - const optionsColumns = [] - that.$header.find('th:not(.detail)').each(function (i) { - ths.push($(this).data('field')) - formatters.push($(this).data('formatter')) - }) - - // Exist columns not shown - if (ths.length < that.columns.length) { - columnsHidden = that.columns.filter(column => !column.visible) - for (var i = 0; i < columnsHidden.length; i++) { - ths.push(columnsHidden[i].field) - formatters.push(columnsHidden[i].formatter) + // Exist columns not shown + if (ths.length < this.columns.length) { + columnsHidden = this.columns.filter(column => !column.visible) + for (var i = 0; i < columnsHidden.length; i++) { + ths.push(columnsHidden[i].field) + formatters.push(columnsHidden[i].formatter) + } } - } - for (let i = 0; i < ths.length; i++ ) { - columnIndex = that.fieldsColumnsIndex[ths[i]] - if (columnIndex !== -1) { - that.fieldsColumnsIndex[ths[i]] = i - that.columns[columnIndex].fieldIndex = i - columns.push(that.columns[columnIndex]) + for (let i = 0; i < ths.length; i++ ) { + columnIndex = this.fieldsColumnsIndex[ths[i]] + if (columnIndex !== -1) { + this.fieldsColumnsIndex[ths[i]] = i + this.columns[columnIndex].fieldIndex = i + columns.push(this.columns[columnIndex]) + } } - } - that.columns = columns - - filterFn() // Support { - let found = false - const field = column.field - that.options.columns[0].filter(item => { - if (!found && item['field'] === field) { - optionsColumns.push(item) - found = true - return false - } - return true + this.columns = columns + + filterFn() // Support { + let found = false + const field = column.field + this.options.columns[0].filter(item => { + if (!found && item['field'] === field) { + optionsColumns.push(item) + found = true + return false + } + return true + }) }) - }) - - that.options.columns[0] = optionsColumns - - that.header.fields = ths - that.header.formatters = formatters - that.initHeader() - that.initToolbar() - that.initSearchText() - that.initBody() - that.resetView() - that.trigger('reorder-column', ths) - } - }) -} -BootstrapTable.prototype.orderColumns = function (order) { - $(this.$el).dragtable('destroy').dragtable({restoreState: (order)}) - this.makeRowsReorderable() -} \ No newline at end of file + this.options.columns[0] = optionsColumns + + this.header.fields = ths + this.header.formatters = formatters + this.initHeader() + this.initToolbar() + this.initSearchText() + this.initBody() + this.resetView() + this.trigger('reorder-column', ths) + } + }) + } + + orderColumns (order) { + this.makeRowsReorderable(order) + } +}