bootstrap-table-fixed-columns.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
  1. /**
  2. * @author zhixin wen <wenzhixin2010@gmail.com>
  3. */
  4. const Utils = $.fn.bootstrapTable.utils
  5. // Reasonable defaults
  6. const PIXEL_STEP = 10
  7. const LINE_HEIGHT = 40
  8. const PAGE_HEIGHT = 800
  9. function normalizeWheel (event) {
  10. let sX = 0 // spinX
  11. let sY = 0 // spinY
  12. let pX = 0 // pixelX
  13. let pY = 0 // pixelY
  14. // Legacy
  15. if ('detail' in event) { sY = event.detail }
  16. if ('wheelDelta' in event) { sY = -event.wheelDelta / 120 }
  17. if ('wheelDeltaY' in event) { sY = -event.wheelDeltaY / 120 }
  18. if ('wheelDeltaX' in event) { sX = -event.wheelDeltaX / 120 }
  19. // side scrolling on FF with DOMMouseScroll
  20. if ('axis' in event && event.axis === event.HORIZONTAL_AXIS) {
  21. sX = sY
  22. sY = 0
  23. }
  24. pX = sX * PIXEL_STEP
  25. pY = sY * PIXEL_STEP
  26. if ('deltaY' in event) { pY = event.deltaY }
  27. if ('deltaX' in event) { pX = event.deltaX }
  28. if ((pX || pY) && event.deltaMode) {
  29. if (event.deltaMode === 1) { // delta in LINE units
  30. pX *= LINE_HEIGHT
  31. pY *= LINE_HEIGHT
  32. } else { // delta in PAGE units
  33. pX *= PAGE_HEIGHT
  34. pY *= PAGE_HEIGHT
  35. }
  36. }
  37. // Fall-back if spin cannot be determined
  38. if (pX && !sX) { sX = (pX < 1) ? -1 : 1 }
  39. if (pY && !sY) { sY = (pY < 1) ? -1 : 1 }
  40. return {
  41. spinX: sX,
  42. spinY: sY,
  43. pixelX: pX,
  44. pixelY: pY
  45. }
  46. }
  47. $.extend($.fn.bootstrapTable.defaults, {
  48. fixedColumns: false,
  49. fixedNumber: 0,
  50. fixedRightNumber: 0
  51. })
  52. $.BootstrapTable = class extends $.BootstrapTable {
  53. fixedColumnsSupported () {
  54. return this.options.fixedColumns &&
  55. !this.options.detailView &&
  56. !this.options.cardView
  57. }
  58. initContainer () {
  59. super.initContainer()
  60. if (!this.fixedColumnsSupported()) {
  61. return
  62. }
  63. if (this.options.fixedNumber) {
  64. this.$tableContainer.append('<div class="fixed-columns"></div>')
  65. this.$fixedColumns = this.$tableContainer.find('.fixed-columns')
  66. }
  67. if (this.options.fixedRightNumber) {
  68. this.$tableContainer.append('<div class="fixed-columns-right"></div>')
  69. this.$fixedColumnsRight = this.$tableContainer.find('.fixed-columns-right')
  70. }
  71. }
  72. initBody (...args) {
  73. super.initBody(...args)
  74. if (this.$fixedColumns && this.$fixedColumns.length) {
  75. this.$fixedColumns.toggle(this.fixedColumnsSupported())
  76. }
  77. if (this.$fixedColumnsRight && this.$fixedColumnsRight.length) {
  78. this.$fixedColumnsRight.toggle(this.fixedColumnsSupported())
  79. }
  80. if (!this.fixedColumnsSupported()) {
  81. return
  82. }
  83. if (this.options.showHeader && this.options.height) {
  84. return
  85. }
  86. this.initFixedColumnsBody()
  87. this.initFixedColumnsEvents()
  88. }
  89. trigger (...args) {
  90. super.trigger(...args)
  91. if (!this.fixedColumnsSupported()) {
  92. return
  93. }
  94. if (args[0] === 'post-header') {
  95. this.initFixedColumnsHeader()
  96. } else if (args[0] === 'scroll-body') {
  97. if (this.needFixedColumns && this.options.fixedNumber) {
  98. this.$fixedBody.scrollTop(this.$tableBody.scrollTop())
  99. }
  100. if (this.needFixedColumns && this.options.fixedRightNumber) {
  101. this.$fixedBodyRight.scrollTop(this.$tableBody.scrollTop())
  102. }
  103. }
  104. }
  105. updateSelected () {
  106. super.updateSelected()
  107. if (!this.fixedColumnsSupported()) {
  108. return
  109. }
  110. this.$tableBody.find('tr').each((i, el) => {
  111. const $el = $(el)
  112. const index = $el.data('index')
  113. const classes = $el.attr('class')
  114. const inputSelector = `[name="${this.options.selectItemName}"]`
  115. const $input = $el.find(inputSelector)
  116. if (typeof index === undefined) {
  117. return
  118. }
  119. const updateFixedBody = ($fixedHeader, $fixedBody) => {
  120. const $tr = $fixedBody.find(`tr[data-index="${index}"]`)
  121. $tr.attr('class', classes)
  122. if ($input.length) {
  123. $tr.find(inputSelector).prop('checked', $input.prop('checked'))
  124. }
  125. if (this.$selectAll.length) {
  126. $fixedHeader.add($fixedBody)
  127. .find('[name="btSelectAll"]')
  128. .prop('checked', this.$selectAll.prop('checked'))
  129. }
  130. }
  131. if (this.$fixedBody && this.options.fixedNumber) {
  132. updateFixedBody(this.$fixedHeader, this.$fixedBody)
  133. }
  134. if (this.$fixedBodyRight && this.options.fixedRightNumber) {
  135. updateFixedBody(this.$fixedHeaderRight, this.$fixedBodyRight)
  136. }
  137. })
  138. }
  139. hideLoading () {
  140. super.hideLoading()
  141. if (this.needFixedColumns && this.options.fixedNumber) {
  142. this.$fixedColumns.find('.fixed-table-loading').hide()
  143. }
  144. if (this.needFixedColumns && this.options.fixedRightNumber) {
  145. this.$fixedColumnsRight.find('.fixed-table-loading').hide()
  146. }
  147. }
  148. initFixedColumnsHeader () {
  149. if (this.options.height) {
  150. this.needFixedColumns = this.$tableHeader.outerWidth(true) < this.$tableHeader.find('table').outerWidth(true)
  151. } else {
  152. this.needFixedColumns = this.$tableBody.outerWidth(true) < this.$tableBody.find('table').outerWidth(true)
  153. }
  154. const initFixedHeader = ($fixedColumns, isRight) => {
  155. $fixedColumns.find('.fixed-table-header').remove()
  156. $fixedColumns.append(this.$tableHeader.clone(true))
  157. $fixedColumns.css({
  158. width: this.getFixedColumnsWidth(isRight)
  159. })
  160. return $fixedColumns.find('.fixed-table-header')
  161. }
  162. if (this.needFixedColumns && this.options.fixedNumber) {
  163. this.$fixedHeader = initFixedHeader(this.$fixedColumns)
  164. this.$fixedHeader.css('margin-right', '')
  165. } else if (this.$fixedColumns) {
  166. this.$fixedColumns.html('').css('width', '')
  167. }
  168. if (this.needFixedColumns && this.options.fixedRightNumber) {
  169. this.$fixedHeaderRight = initFixedHeader(this.$fixedColumnsRight, true)
  170. this.$fixedHeaderRight.scrollLeft(this.$fixedHeaderRight.find('table').width())
  171. } else if (this.$fixedColumnsRight) {
  172. this.$fixedColumnsRight.html('').css('width', '')
  173. }
  174. this.initFixedColumnsBody()
  175. this.initFixedColumnsEvents()
  176. }
  177. initFixedColumnsBody () {
  178. const initFixedBody = ($fixedColumns, $fixedHeader) => {
  179. $fixedColumns.find('.fixed-table-body').remove()
  180. $fixedColumns.append(this.$tableBody.clone(true))
  181. const $fixedBody = $fixedColumns.find('.fixed-table-body')
  182. const tableBody = this.$tableBody.get(0)
  183. const scrollHeight = tableBody.scrollWidth > tableBody.clientWidth ?
  184. Utils.getScrollBarWidth() : 0
  185. const height = this.$tableContainer.outerHeight(true) - scrollHeight - 1
  186. $fixedColumns.css({
  187. height
  188. })
  189. $fixedBody.css({
  190. height: height - $fixedHeader.height()
  191. })
  192. return $fixedBody
  193. }
  194. if (this.needFixedColumns && this.options.fixedNumber) {
  195. this.$fixedBody = initFixedBody(this.$fixedColumns, this.$fixedHeader)
  196. }
  197. if (this.needFixedColumns && this.options.fixedRightNumber) {
  198. this.$fixedBodyRight = initFixedBody(this.$fixedColumnsRight, this.$fixedHeaderRight)
  199. this.$fixedBodyRight.scrollLeft(this.$fixedBodyRight.find('table').width())
  200. this.$fixedBodyRight.css('overflow-y', this.options.height ? 'auto' : 'hidden')
  201. }
  202. }
  203. getFixedColumnsWidth (isRight) {
  204. let visibleFields = this.getVisibleFields()
  205. let width = 0
  206. let fixedNumber = this.options.fixedNumber
  207. let marginRight = 0
  208. if (isRight) {
  209. visibleFields = visibleFields.reverse()
  210. fixedNumber = this.options.fixedRightNumber
  211. marginRight = parseInt(this.$tableHeader.css('margin-right'), 10)
  212. }
  213. for (let i = 0; i < fixedNumber; i++) {
  214. width += this.$header.find(`th[data-field="${visibleFields[i]}"]`).outerWidth(true)
  215. }
  216. return width + marginRight + 1
  217. }
  218. initFixedColumnsEvents () {
  219. const toggleHover = (e, toggle) => {
  220. const tr = `tr[data-index="${$(e.currentTarget).data('index')}"]`
  221. let $trs = this.$tableBody.find(tr)
  222. if (this.$fixedBody) {
  223. $trs = $trs.add(this.$fixedBody.find(tr))
  224. }
  225. if (this.$fixedBodyRight) {
  226. $trs = $trs.add(this.$fixedBodyRight.find(tr))
  227. }
  228. $trs.css('background-color', toggle ? $(e.currentTarget).css('background-color') : '')
  229. }
  230. this.$tableBody.find('tr').hover(e => {
  231. toggleHover(e, true)
  232. }, e => {
  233. toggleHover(e, false)
  234. })
  235. const isFirefox = typeof navigator !== 'undefined' &&
  236. navigator.userAgent.toLowerCase().indexOf('firefox') > -1
  237. const mousewheel = isFirefox ? 'DOMMouseScroll' : 'mousewheel'
  238. const updateScroll = (e, fixedBody) => {
  239. const normalized = normalizeWheel(e)
  240. const deltaY = Math.ceil(normalized.pixelY)
  241. const top = this.$tableBody.scrollTop() + deltaY
  242. if (
  243. deltaY < 0 && top > 0 ||
  244. deltaY > 0 && top < fixedBody.scrollHeight - fixedBody.clientHeight
  245. ) {
  246. e.preventDefault()
  247. }
  248. this.$tableBody.scrollTop(top)
  249. if (this.$fixedBody) {
  250. this.$fixedBody.scrollTop(top)
  251. }
  252. if (this.$fixedBodyRight) {
  253. this.$fixedBodyRight.scrollTop(top)
  254. }
  255. }
  256. if (this.needFixedColumns && this.options.fixedNumber) {
  257. this.$fixedBody.find('tr').hover(e => {
  258. toggleHover(e, true)
  259. }, e => {
  260. toggleHover(e, false)
  261. })
  262. this.$fixedBody[0].addEventListener(mousewheel, e => {
  263. updateScroll(e, this.$fixedBody[0])
  264. })
  265. }
  266. if (this.needFixedColumns && this.options.fixedRightNumber) {
  267. this.$fixedBodyRight.find('tr').hover(e => {
  268. toggleHover(e, true)
  269. }, e => {
  270. toggleHover(e, false)
  271. })
  272. this.$fixedBodyRight.off('scroll').on('scroll', () => {
  273. const top = this.$fixedBodyRight.scrollTop()
  274. this.$tableBody.scrollTop(top)
  275. if (this.$fixedBody) {
  276. this.$fixedBody.scrollTop(top)
  277. }
  278. })
  279. }
  280. if (this.options.filterControl) {
  281. $(this.$fixedColumns).off('keyup change').on('keyup change', e => {
  282. const $target = $(e.target)
  283. const value = $target.val()
  284. const field = $target.parents('th').data('field')
  285. const $coreTh = this.$header.find(`th[data-field="${field}"]`)
  286. if ($target.is('input')) {
  287. $coreTh.find('input').val(value)
  288. } else if ($target.is('select')) {
  289. const $select = $coreTh.find('select')
  290. $select.find('option[selected]').removeAttr('selected')
  291. $select.find(`option[value="${value}"]`).attr('selected', true)
  292. }
  293. this.triggerSearch()
  294. })
  295. }
  296. }
  297. renderStickyHeader () {
  298. if (!this.options.stickyHeader) {
  299. return
  300. }
  301. this.$stickyContainer = this.$container.find('.sticky-header-container')
  302. super.renderStickyHeader()
  303. if (this.needFixedColumns && this.options.fixedNumber) {
  304. this.$fixedColumns.css('z-index', 101)
  305. .find('.sticky-header-container')
  306. .css('right', '')
  307. .width(this.$fixedColumns.outerWidth())
  308. }
  309. if (this.needFixedColumns && this.options.fixedRightNumber) {
  310. const $stickyHeaderContainerRight = this.$fixedColumnsRight.find('.sticky-header-container')
  311. this.$fixedColumnsRight.css('z-index', 101)
  312. $stickyHeaderContainerRight.css('left', '')
  313. .scrollLeft($stickyHeaderContainerRight.find('.table').outerWidth())
  314. .width(this.$fixedColumnsRight.outerWidth())
  315. }
  316. }
  317. matchPositionX () {
  318. if (!this.options.stickyHeader) {
  319. return
  320. }
  321. this.$stickyContainer.eq(0).scrollLeft(this.$tableBody.scrollLeft())
  322. }
  323. }