feat(editable extension): rewrite bootstrap-table-editable to ES6

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

@@ -3,158 +3,149 @@
  * extensions: https://github.com/vitalets/x-editable
  */
 
-(function($) {
-
-    'use strict';
-
-    $.extend($.fn.bootstrapTable.defaults, {
-        editable: true,
-        onEditableInit: function() {
-            return false;
-        },
-        onEditableSave: function(field, row, oldValue, $el) {
-            return false;
-        },
-        onEditableShown: function(field, row, $el, editable) {
-            return false;
-        },
-        onEditableHidden: function(field, row, $el, reason) {
-            return false;
+($ => {
+  const Utils = $.fn.bootstrapTable.utils
+
+  $.extend($.fn.bootstrapTable.defaults, {
+    editable: true,
+    onEditableInit () {
+      return false
+    },
+    onEditableSave (field, row, oldValue, $el) {
+      return false
+    },
+    onEditableShown (field, row, $el, editable) {
+      return false
+    },
+    onEditableHidden (field, row, $el, reason) {
+      return false
+    }
+  })
+
+  $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
+    'editable-init.bs.table': 'onEditableInit',
+    'editable-save.bs.table': 'onEditableSave',
+    'editable-shown.bs.table': 'onEditableShown',
+    'editable-hidden.bs.table': 'onEditableHidden'
+  })
+
+  $.BootstrapTable = class extends $.BootstrapTable {
+    initTable () {
+      super.initTable()
+
+      if (!this.options.editable) {
+        return
+      }
+
+      $.each(this.columns, (i, column) => {
+        if (!column.editable) {
+          return
         }
-    });
 
-    $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
-        'editable-init.bs.table': 'onEditableInit',
-        'editable-save.bs.table': 'onEditableSave',
-        'editable-shown.bs.table': 'onEditableShown',
-        'editable-hidden.bs.table': 'onEditableHidden'
-    });
+        const editableOptions = {}
+        const editableDataMarkup = []
+        const editableDataPrefix = 'editable-'
+        const processDataOptions = (key, value) => {
+          // Replace camel case with dashes.
+          const dashKey = key.replace(/([A-Z])/g, $1 => {
+            return '-' + $1.toLowerCase()
+          })
+          if (dashKey.indexOf(editableDataPrefix) === 0) {
+            editableOptions[dashKey.replace(editableDataPrefix, 'data-')] = value
+          }
+        }
 
-    var BootstrapTable = $.fn.bootstrapTable.Constructor,
-        _initTable = BootstrapTable.prototype.initTable,
-        _initBody = BootstrapTable.prototype.initBody;
+        $.each(this.options, processDataOptions)
+
+        column.formatter = column.formatter || (value => value)
+        column._formatter = column._formatter ? column._formatter : column.formatter
+        column.formatter = (value, row, index) => {
+          const result = Utils.calculateObjectValue(column,
+            column._formatter, [value, row, index], value)
+
+          $.each(column, processDataOptions)
+
+          $.each(editableOptions, (key, value) => {
+            editableDataMarkup.push(` ${key}="${value}"`)
+          })
+
+          let _dont_edit_formatter = false
+          if (column.editable.hasOwnProperty('noeditFormatter')) {
+            _dont_edit_formatter = column.editable.noeditFormatter(value, row, index)
+          }
+
+          if (_dont_edit_formatter === false) {
+            return `<a href="javascript:void(0)"
+              data-name="${column.field}"
+              data-pk="${row[this.options.idField]}"
+              data-value="${result}"
+              ${editableDataMarkup.join('')}></a>`
+          }
+          return _dont_edit_formatter
+        }
+      })
+    }
 
-    BootstrapTable.prototype.initTable = function() {
-        var that = this;
-        _initTable.apply(this, Array.prototype.slice.apply(arguments));
+    initBody (fixedScroll) {
+      super.initBody(fixedScroll)
 
-        if (!this.options.editable) {
-            return;
-        }
+      if (!this.options.editable) {
+        return
+      }
 
-        $.each(this.columns, function(i, column) {
-            if (!column.editable) {
-                return;
-            }
-
-            var editableOptions = {},
-                editableDataMarkup = [],
-                editableDataPrefix = 'editable-';
-
-            var processDataOptions = function(key, value) {
-                // Replace camel case with dashes.
-                var dashKey = key.replace(/([A-Z])/g, function($1) {
-                    return "-" + $1.toLowerCase();
-                });
-                if (dashKey.slice(0, editableDataPrefix.length) == editableDataPrefix) {
-                    var dataKey = dashKey.replace(editableDataPrefix, 'data-');
-                    editableOptions[dataKey] = value;
-                }
-            };
-
-            $.each(that.options, processDataOptions);
-
-            column.formatter = column.formatter || function(value, row, index) {
-                return value;
-            };
-            column._formatter = column._formatter ? column._formatter : column.formatter;
-            column.formatter = function(value, row, index) {
-                var result = $.fn.bootstrapTable.utils.calculateObjectValue(column, column._formatter, [value, row, index], value);
-
-                $.each(column, processDataOptions);
-
-                $.each(editableOptions, function(key, value) {
-                    editableDataMarkup.push(' ' + key + '="' + value + '"');
-                });
-
-                var _dont_edit_formatter = false;
-                if (column.editable.hasOwnProperty('noeditFormatter')) {
-                    _dont_edit_formatter = column.editable.noeditFormatter(value, row, index);
-                }
-
-                if (_dont_edit_formatter === false) {
-                    return ['<a href="javascript:void(0)"',
-                        ' data-name="' + column.field + '"',
-                        ' data-pk="' + row[that.options.idField] + '"',
-                        ' data-value="' + result + '"',
-                        editableDataMarkup.join(''),
-                        '>' + '</a>'
-                    ].join('');
-                } else {
-                    return _dont_edit_formatter;
-                }
-
-            };
-        });
-    };
-
-    BootstrapTable.prototype.initBody = function() {
-        var that = this;
-        _initBody.apply(this, Array.prototype.slice.apply(arguments));
-
-        if (!this.options.editable) {
-            return;
+      $.each(this.columns, (i, column) => {
+        if (!column.editable) {
+          return
         }
 
-        $.each(this.columns, function(i, column) {
-            if (!column.editable) {
-                return;
-            }
-
-            var data = that.getData();
-
-            that.$body.find('a[data-name="' + column.field + '"]').each(function(i, element){
-                var $element = $(element);
-                var $tr = $element.closest('tr');
-                var index = $tr.data('index');
-                var row = data[index];
-
-                var editableOpts = $.fn.bootstrapTable.utils.calculateObjectValue(column, column.editable, [index, row, $element], {});
-
-                $element.editable(editableOpts);
-            });
-
-
-            that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
-                .off('save').on('save', function(e, params) {
-                    var data = that.getData(),
-                        index = $(this).parents('tr[data-index]').data('index'),
-                        row = data[index],
-                        oldValue = row[column.field];
-
-                    $(this).data('value', params.submitValue);
-                    row[column.field] = params.submitValue;
-                    that.trigger('editable-save', column.field, row, oldValue, $(this));
-                    that.resetFooter();
-                });
-            that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
-                .off('shown').on('shown', function(e, editable) {
-                    var data = that.getData(),
-                        index = $(this).parents('tr[data-index]').data('index'),
-                        row = data[index];
-
-                    that.trigger('editable-shown', column.field, row, $(this), editable);
-                });
-            that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
-                .off('hidden').on('hidden', function(e, reason) {
-                    var data = that.getData(),
-                        index = $(this).parents('tr[data-index]').data('index'),
-                        row = data[index];
-
-                    that.trigger('editable-hidden', column.field, row, $(this), reason);
-                });
-        });
-        this.trigger('editable-init');
-    };
-
-})(jQuery);
+        const data = this.getData()
+        const $field = this.$body.find(`a[data-name="${column.field}"]`)
+
+        $field.each((i, element) => {
+          const $element = $(element)
+          const $tr = $element.closest('tr')
+          const index = $tr.data('index')
+          const row = data[index]
+
+          const editableOpts = Utils.calculateObjectValue(column,
+            column.editable, [index, row, $element], {})
+
+          $element.editable(editableOpts)
+        })
+
+        $field.off('save').on('save', (e, params) => {
+          const $this = $(e.currentTarget)
+          const data = this.getData()
+          const index = $this.parents('tr[data-index]').data('index')
+          const row = data[index]
+          const oldValue = row[column.field]
+
+          $this.data('value', params.submitValue)
+          row[column.field] = params.submitValue
+          this.trigger('editable-save', column.field, row, oldValue, $this)
+          this.resetFooter()
+        })
+
+        $field.off('shown').on('shown', (e, editable) => {
+          const $this = $(e.currentTarget)
+          const data = this.getData()
+          const index = $this.parents('tr[data-index]').data('index')
+          const row = data[index]
+
+          this.trigger('editable-shown', column.field, row, $this, editable)
+        })
+
+        $field.off('hidden').on('hidden', (e, reason) => {
+          const $this = $(e.currentTarget)
+          const data = this.getData()
+          const index = $this.parents('tr[data-index]').data('index')
+          const row = data[index]
+
+          this.trigger('editable-hidden', column.field, row, $this, reason)
+        })
+      })
+      this.trigger('editable-init')
+    }
+  }
+
+})(jQuery)