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