bootstrap-table-mobile.js 4.0 KB

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