bootstrap-table-mobile.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  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(that.resetView, 1);
  22. }
  23. };
  24. var changeView = function (that, width, height) {
  25. if (that.options.minHeight) {
  26. if ((width <= that.options.minWidth) && (height <= that.options.minHeight)) {
  27. conditionCardView(that);
  28. } else if ((width > that.options.minWidth) && (height > that.options.minHeight)) {
  29. conditionFullView(that);
  30. }
  31. } else {
  32. if (width <= that.options.minWidth) {
  33. conditionCardView(that);
  34. } else if (width > that.options.minWidth) {
  35. conditionFullView(that);
  36. }
  37. }
  38. resetView(that);
  39. };
  40. var conditionCardView = function (that) {
  41. changeTableView(that, false);
  42. showHideColumns(that, false);
  43. };
  44. var conditionFullView = function (that) {
  45. changeTableView(that, true);
  46. showHideColumns(that, true);
  47. };
  48. var changeTableView = function (that, cardViewState) {
  49. that.options.cardView = cardViewState;
  50. that.toggleView();
  51. };
  52. var debounce = function(func,wait) {
  53. var timeout;
  54. return function() {
  55. var context = this,
  56. args = arguments;
  57. var later = function() {
  58. timeout = null;
  59. func.apply(context,args);
  60. };
  61. clearTimeout(timeout);
  62. timeout = setTimeout(later, wait);
  63. };
  64. };
  65. $.extend($.fn.bootstrapTable.defaults, {
  66. mobileResponsive: false,
  67. minWidth: 562,
  68. minHeight: undefined,
  69. heightThreshold: 100, // just slightly larger than mobile chrome's auto-hiding toolbar
  70. checkOnInit: true,
  71. columnsHidden: []
  72. });
  73. var BootstrapTable = $.fn.bootstrapTable.Constructor,
  74. _init = BootstrapTable.prototype.init;
  75. BootstrapTable.prototype.init = function () {
  76. _init.apply(this, Array.prototype.slice.apply(arguments));
  77. if (!this.options.mobileResponsive) {
  78. return;
  79. }
  80. if (!this.options.minWidth) {
  81. return;
  82. }
  83. var that = this,
  84. old = {
  85. width: $(window).width(),
  86. height: $(window).height()
  87. };
  88. $(window).on('resize orientationchange',debounce(function (evt) {
  89. // reset view if height has only changed by at least the threshold.
  90. var height = $(this).height(),
  91. width = $(this).width();
  92. if (Math.abs(old.height - height) > that.options.heightThreshold || old.width != width) {
  93. changeView(that, width, height);
  94. old = {
  95. width: width,
  96. height: height
  97. };
  98. }
  99. },200));
  100. if (this.options.checkOnInit) {
  101. var height = $(window).height(),
  102. width = $(window).width();
  103. changeView(this, width, height);
  104. old = {
  105. width: width,
  106. height: height
  107. };
  108. }
  109. };
  110. }(jQuery);