bootstrap-table-mobile.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. /**
  2. * @author: Dennis Hernández
  3. * @webSite: http://djhvscf.github.io/Blog
  4. * @update zhixin wen <wenzhixin2010@gmail.com>
  5. */
  6. const debounce = (func, wait) => {
  7. let timeout = 0
  8. return (...args) => {
  9. const later = () => {
  10. timeout = 0
  11. func(...args)
  12. }
  13. clearTimeout(timeout)
  14. timeout = setTimeout(later, wait)
  15. }
  16. }
  17. $.extend($.fn.bootstrapTable.defaults, {
  18. mobileResponsive: false,
  19. minWidth: 562,
  20. minHeight: undefined,
  21. heightThreshold: 100, // just slightly larger than mobile chrome's auto-hiding toolbar
  22. checkOnInit: true,
  23. columnsHidden: []
  24. })
  25. $.BootstrapTable = class extends $.BootstrapTable {
  26. init (...args) {
  27. super.init(...args)
  28. if (!this.options.mobileResponsive || !this.options.minWidth) {
  29. return
  30. }
  31. if (this.options.minWidth < 100 && this.options.resizable) {
  32. console.warn('The minWidth when the resizable extension is active should be greater or equal than 100')
  33. this.options.minWidth = 100
  34. }
  35. let old = {
  36. width: $(window).width(),
  37. height: $(window).height()
  38. }
  39. $(window).on('resize orientationchange', debounce(() => {
  40. // reset view if height has only changed by at least the threshold.
  41. const width = $(window).width()
  42. const height = $(window).height()
  43. const $activeElement = $(document.activeElement)
  44. if ($activeElement.length && ['INPUT', 'SELECT', 'TEXTAREA'].includes($activeElement.prop('nodeName'))) {
  45. return
  46. }
  47. if (
  48. Math.abs(old.height - height) > this.options.heightThreshold ||
  49. old.width !== width
  50. ) {
  51. this.changeView(width, height)
  52. old = {
  53. width,
  54. height
  55. }
  56. }
  57. }, 200))
  58. if (this.options.checkOnInit) {
  59. const width = $(window).width()
  60. const height = $(window).height()
  61. this.changeView(width, height)
  62. old = {
  63. width,
  64. height
  65. }
  66. }
  67. }
  68. conditionCardView () {
  69. this.changeTableView(false)
  70. this.showHideColumns(false)
  71. }
  72. conditionFullView () {
  73. this.changeTableView(true)
  74. this.showHideColumns(true)
  75. }
  76. changeTableView (cardViewState) {
  77. this.options.cardView = cardViewState
  78. this.toggleView()
  79. }
  80. showHideColumns (checked) {
  81. if (this.options.columnsHidden.length > 0) {
  82. this.columns.forEach(column => {
  83. if (this.options.columnsHidden.includes(column.field)) {
  84. if (column.visible !== checked) {
  85. this._toggleColumn(this.fieldsColumnsIndex[column.field], checked, true)
  86. }
  87. }
  88. })
  89. }
  90. }
  91. changeView (width, height) {
  92. if (this.options.minHeight) {
  93. if ((width <= this.options.minWidth) && (height <= this.options.minHeight)) {
  94. this.conditionCardView()
  95. } else if ((width > this.options.minWidth) && (height > this.options.minHeight)) {
  96. this.conditionFullView()
  97. }
  98. } else if (width <= this.options.minWidth) {
  99. this.conditionCardView()
  100. } else if (width > this.options.minWidth) {
  101. this.conditionFullView()
  102. }
  103. this.resetView()
  104. }
  105. }