bootstrap-table-editable.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. /**
  2. * @author zhixin wen <wenzhixin2010@gmail.com>
  3. * extensions: https://github.com/vitalets/x-editable
  4. */
  5. (function($) {
  6. 'use strict';
  7. $.extend($.fn.bootstrapTable.defaults, {
  8. editable: true,
  9. onEditableInit: function() {
  10. return false;
  11. },
  12. onEditableSave: function(field, row, oldValue, $el) {
  13. return false;
  14. },
  15. onEditableShown: function(field, row, $el, editable) {
  16. return false;
  17. },
  18. onEditableHidden: function(field, row, $el, reason) {
  19. return false;
  20. }
  21. });
  22. $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
  23. 'editable-init.bs.table': 'onEditableInit',
  24. 'editable-save.bs.table': 'onEditableSave',
  25. 'editable-shown.bs.table': 'onEditableShown',
  26. 'editable-hidden.bs.table': 'onEditableHidden'
  27. });
  28. var BootstrapTable = $.fn.bootstrapTable.Constructor,
  29. _initTable = BootstrapTable.prototype.initTable,
  30. _initBody = BootstrapTable.prototype.initBody;
  31. BootstrapTable.prototype.initTable = function() {
  32. var that = this;
  33. _initTable.apply(this, Array.prototype.slice.apply(arguments));
  34. if (!this.options.editable) {
  35. return;
  36. }
  37. $.each(this.columns, function(i, column) {
  38. if (!column.editable) {
  39. return;
  40. }
  41. var editableOptions = {},
  42. editableDataMarkup = [],
  43. editableDataPrefix = 'editable-';
  44. var processDataOptions = function(key, value) {
  45. // Replace camel case with dashes.
  46. var dashKey = key.replace(/([A-Z])/g, function($1) {
  47. return "-" + $1.toLowerCase();
  48. });
  49. if (dashKey.slice(0, editableDataPrefix.length) == editableDataPrefix) {
  50. var dataKey = dashKey.replace(editableDataPrefix, 'data-');
  51. editableOptions[dataKey] = value;
  52. }
  53. };
  54. $.each(that.options, processDataOptions);
  55. column.formatter = column.formatter || function(value, row, index) {
  56. return value;
  57. };
  58. column._formatter = column._formatter ? column._formatter : column.formatter;
  59. column.formatter = function(value, row, index) {
  60. var result = column._formatter ? column._formatter(value, row, index) : value;
  61. $.each(column, processDataOptions);
  62. $.each(editableOptions, function(key, value) {
  63. editableDataMarkup.push(' ' + key + '="' + value + '"');
  64. });
  65. var _dont_edit_formatter = false;
  66. if (column.editable.hasOwnProperty('noeditFormatter')) {
  67. _dont_edit_formatter = column.editable.noeditFormatter(value, row, index);
  68. }
  69. if (_dont_edit_formatter === false) {
  70. return ['<a href="javascript:void(0)"',
  71. ' data-name="' + column.field + '"',
  72. ' data-pk="' + row[that.options.idField] + '"',
  73. ' data-value="' + result + '"',
  74. editableDataMarkup.join(''),
  75. '>' + '</a>'
  76. ].join('');
  77. } else {
  78. return _dont_edit_formatter;
  79. }
  80. };
  81. });
  82. };
  83. BootstrapTable.prototype.initBody = function() {
  84. var that = this;
  85. _initBody.apply(this, Array.prototype.slice.apply(arguments));
  86. if (!this.options.editable) {
  87. return;
  88. }
  89. $.each(this.columns, function(i, column) {
  90. if (!column.editable) {
  91. return;
  92. }
  93. that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
  94. .off('save').on('save', function(e, params) {
  95. var data = that.getData(),
  96. index = $(this).parents('tr[data-index]').data('index'),
  97. row = data[index],
  98. oldValue = row[column.field];
  99. $(this).data('value', params.submitValue);
  100. row[column.field] = params.submitValue;
  101. that.trigger('editable-save', column.field, row, oldValue, $(this));
  102. that.resetFooter();
  103. });
  104. that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
  105. .off('shown').on('shown', function(e, editable) {
  106. var data = that.getData(),
  107. index = $(this).parents('tr[data-index]').data('index'),
  108. row = data[index];
  109. that.trigger('editable-shown', column.field, row, $(this), editable);
  110. });
  111. that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
  112. .off('hidden').on('hidden', function(e, reason) {
  113. var data = that.getData(),
  114. index = $(this).parents('tr[data-index]').data('index'),
  115. row = data[index];
  116. that.trigger('editable-hidden', column.field, row, $(this), reason);
  117. });
  118. });
  119. this.trigger('editable-init');
  120. };
  121. })(jQuery);