bootstrap-table-editable.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  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 = {}, editableDataMarkup = [], editableDataPrefix = 'editable-';
  42. var processDataOptions = function(key, value) {
  43. // Replace camel case with dashes.
  44. var dashKey = key.replace(/([A-Z])/g, function($1){return "-"+$1.toLowerCase();});
  45. if (dashKey.slice(0, editableDataPrefix.length) == editableDataPrefix) {
  46. var dataKey = dashKey.replace(editableDataPrefix, 'data-');
  47. editableOptions[dataKey] = value;
  48. }
  49. };
  50. $.each(that.options, processDataOptions);
  51. var _formatter = column.formatter;
  52. column.formatter = function (value, row, index) {
  53. var result = _formatter ? _formatter(value, row, index) : value;
  54. $.each(column, processDataOptions);
  55. $.each(editableOptions, function (key, value) {
  56. editableDataMarkup.push(' ' + key + '="' + value + '"');
  57. });
  58. return ['<a href="javascript:void(0)"',
  59. ' data-name="' + column.field + '"',
  60. ' data-pk="' + row[that.options.idField] + '"',
  61. ' data-value="' + result + '"',
  62. editableDataMarkup.join(''),
  63. '>' + '</a>'
  64. ].join('');
  65. };
  66. });
  67. };
  68. BootstrapTable.prototype.initBody = function () {
  69. var that = this;
  70. _initBody.apply(this, Array.prototype.slice.apply(arguments));
  71. if (!this.options.editable) {
  72. return;
  73. }
  74. $.each(this.columns, function (i, column) {
  75. if (!column.editable) {
  76. return;
  77. }
  78. that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
  79. .off('save').on('save', function (e, params) {
  80. var data = that.getData(),
  81. index = $(this).parents('tr[data-index]').data('index'),
  82. row = data[index],
  83. oldValue = row[column.field];
  84. $(this).data('value', params.submitValue);
  85. row[column.field] = params.submitValue;
  86. that.trigger('editable-save', column.field, row, oldValue, $(this));
  87. });
  88. that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
  89. .off('shown').on('shown', function (e, editable) {
  90. var data = that.getData(),
  91. index = $(this).parents('tr[data-index]').data('index'),
  92. row = data[index];
  93. that.trigger('editable-shown', column.field, row, $(this), editable);
  94. });
  95. that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
  96. .off('hidden').on('hidden', function (e, reason) {
  97. var data = that.getData(),
  98. index = $(this).parents('tr[data-index]').data('index'),
  99. row = data[index];
  100. that.trigger('editable-hidden', column.field, row, $(this), reason);
  101. });
  102. });
  103. this.trigger('editable-init');
  104. };
  105. }(jQuery);