bootstrap-table-mobile.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. /**
  2. * @author: Dennis Hernández
  3. * @webSite: http://djhvscf.github.io/Blog
  4. * @version: v1.1.0
  5. */
  6. !function ($) {
  7. 'use strict';
  8. var getFieldIndex = function (columns, field) {
  9. var index = -1;
  10. $.each(columns, function (i, column) {
  11. if (column.field === field) {
  12. index = i;
  13. return false;
  14. }
  15. return true;
  16. });
  17. return index;
  18. };
  19. var showHideColumns = function (that, checked) {
  20. if (that.options.columnsHidden.length > 0 ) {
  21. $.each(that.columns, function (i, column) {
  22. if (that.options.columnsHidden.indexOf(column.field) !== -1) {
  23. if (column.visible !== checked) {
  24. that.toggleColumn(getFieldIndex(that.columns, column.field), checked, true);
  25. }
  26. }
  27. });
  28. }
  29. };
  30. var resetView = function (that) {
  31. if (that.options.height || that.options.showFooter) {
  32. setTimeout(that.resetView, 1);
  33. }
  34. };
  35. var changeView = function (that, width, height) {
  36. if (that.options.minHeight) {
  37. if ((width <= that.options.minWidth) && (height <= that.options.minHeight)) {
  38. conditionCardView(that);
  39. } else if ((width > that.options.minWidth) && (height > that.options.minHeight)) {
  40. conditionFullView(that);
  41. }
  42. } else {
  43. if (width <= that.options.minWidth) {
  44. conditionCardView(that);
  45. } else if (width > that.options.minWidth) {
  46. conditionFullView(that);
  47. }
  48. }
  49. resetView(that);
  50. };
  51. var conditionCardView = function (that) {
  52. changeTableView(that, false);
  53. showHideColumns(that, false);
  54. };
  55. var conditionFullView = function (that) {
  56. changeTableView(that, true);
  57. showHideColumns(that, true);
  58. };
  59. var changeTableView = function (that, cardViewState) {
  60. that.options.cardView = cardViewState;
  61. that.toggleView();
  62. };
  63. var debounce = function(func,wait) {
  64. var timeout;
  65. return function() {
  66. var context = this,
  67. args = arguments;
  68. var later = function() {
  69. timeout = null;
  70. func.apply(context,args);
  71. };
  72. clearTimeout(timeout);
  73. timeout = setTimeout(later, wait);
  74. };
  75. };
  76. $.extend($.fn.bootstrapTable.defaults, {
  77. mobileResponsive: false,
  78. minWidth: 562,
  79. minHeight: undefined,
  80. heightThreshold: 100, // just slightly larger than mobile chrome's auto-hiding toolbar
  81. checkOnInit: true,
  82. columnsHidden: []
  83. });
  84. var BootstrapTable = $.fn.bootstrapTable.Constructor,
  85. _init = BootstrapTable.prototype.init;
  86. BootstrapTable.prototype.init = function () {
  87. _init.apply(this, Array.prototype.slice.apply(arguments));
  88. if (!this.options.mobileResponsive) {
  89. return;
  90. }
  91. if (!this.options.minWidth) {
  92. return;
  93. }
  94. var that = this,
  95. old = {
  96. width: $(window).width(),
  97. height: $(window).height()
  98. };
  99. $(window).on('resize orientationchange',debounce(function (evt) {
  100. // reset view if height has only changed by at least the threshold.
  101. var height = $(this).height(),
  102. width = $(this).width();
  103. if (Math.abs(old.height - height) > that.options.heightThreshold || old.width != width) {
  104. changeView(that, width, height);
  105. old = {
  106. width: width,
  107. height: height
  108. };
  109. }
  110. },200));
  111. if (this.options.checkOnInit) {
  112. var height = $(window).height(),
  113. width = $(window).width();
  114. changeView(this, width, height);
  115. old = {
  116. width: width,
  117. height: height
  118. };
  119. }
  120. };
  121. }(jQuery);