bootstrap-table-reorder-rows.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /**
  2. * @author: Dennis Hernández
  3. * @webSite: http://djhvscf.github.io/Blog
  4. * @version: v1.0.1
  5. */
  6. (function ($) {
  7. 'use strict';
  8. var isSearch = false;
  9. var rowAttr = function (row, index) {
  10. return {
  11. id: 'customId_' + index
  12. };
  13. };
  14. $.extend($.fn.bootstrapTable.defaults, {
  15. reorderableRows: false,
  16. onDragStyle: null,
  17. onDropStyle: null,
  18. onDragClass: "reorder_rows_onDragClass",
  19. dragHandle: null,
  20. useRowAttrFunc: false,
  21. onReorderRowsDrag: function (table, row) {
  22. return false;
  23. },
  24. onReorderRowsDrop: function (table, row) {
  25. return false;
  26. },
  27. onReorderRow: function (newData) {
  28. return false;
  29. }
  30. });
  31. $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
  32. 'reorder-row.bs.table': 'onReorderRow'
  33. });
  34. var BootstrapTable = $.fn.bootstrapTable.Constructor,
  35. _init = BootstrapTable.prototype.init,
  36. _initSearch = BootstrapTable.prototype.initSearch;
  37. BootstrapTable.prototype.init = function () {
  38. if (!this.options.reorderableRows) {
  39. _init.apply(this, Array.prototype.slice.apply(arguments));
  40. return;
  41. }
  42. var that = this;
  43. if (this.options.useRowAttrFunc) {
  44. this.options.rowAttributes = rowAttr;
  45. }
  46. var onPostBody = this.options.onPostBody;
  47. this.options.onPostBody = function () {
  48. setTimeout(function () {
  49. that.makeRowsReorderable();
  50. onPostBody.apply();
  51. }, 1);
  52. };
  53. _init.apply(this, Array.prototype.slice.apply(arguments));
  54. };
  55. BootstrapTable.prototype.initSearch = function () {
  56. _initSearch.apply(this, Array.prototype.slice.apply(arguments));
  57. if (!this.options.reorderableRows) {
  58. return;
  59. }
  60. //Known issue after search if you reorder the rows the data is not display properly
  61. //isSearch = true;
  62. };
  63. BootstrapTable.prototype.makeRowsReorderable = function () {
  64. if (this.options.cardView) {
  65. return;
  66. }
  67. var that = this;
  68. this.$el.tableDnD({
  69. onDragStyle: that.options.onDragStyle,
  70. onDropStyle: that.options.onDropStyle,
  71. onDragClass: that.options.onDragClass,
  72. onDrop: that.onDrop,
  73. onDragStart: that.options.onReorderRowsDrag,
  74. dragHandle: that.options.dragHandle
  75. });
  76. };
  77. BootstrapTable.prototype.onDrop = function (table, droppedRow) {
  78. var tableBs = $(table),
  79. tableBsData = tableBs.data('bootstrap.table'),
  80. tableBsOptions = tableBs.data('bootstrap.table').options,
  81. row = null,
  82. newData = [];
  83. for (var i = 0; i < table.tBodies[0].rows.length; i++) {
  84. row = $(table.tBodies[0].rows[i]);
  85. newData.push(tableBsOptions.data[row.data('index')]);
  86. row.data('index', i).attr('data-index', i);
  87. }
  88. tableBsOptions.data = tableBsOptions.data.slice(0, tableBsData.pageFrom - 1)
  89. .concat(newData)
  90. .concat(tableBsOptions.data.slice(tableBsData.pageTo));
  91. //Call the user defined function
  92. tableBsOptions.onReorderRowsDrop.apply(table, [table, droppedRow]);
  93. //Call the event reorder-row
  94. tableBsData.trigger('reorder-row', newData);
  95. };
  96. })(jQuery);