bootstrap-table-custom-view.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. /**
  2. * @author zhixin wen <wenzhixin2010@gmail.com>
  3. */
  4. const Utils = $.fn.bootstrapTable.utils
  5. $.extend($.fn.bootstrapTable.defaults, {
  6. customView: false,
  7. showCustomView: false,
  8. showCustomViewButton: false
  9. })
  10. $.extend($.fn.bootstrapTable.defaults.icons, {
  11. customView: {
  12. bootstrap3: 'glyphicon glyphicon-eye-open',
  13. bootstrap5: 'bi-eye',
  14. bootstrap4: 'fa fa-eye',
  15. semantic: 'fa fa-eye',
  16. foundation: 'fa fa-eye',
  17. bulma: 'fa fa-eye',
  18. materialize: 'remove_red_eye'
  19. }[$.fn.bootstrapTable.theme] || 'fa-eye'
  20. })
  21. $.extend($.fn.bootstrapTable.defaults, {
  22. onCustomViewPostBody () {
  23. return false
  24. },
  25. onCustomViewPreBody () {
  26. return false
  27. }
  28. })
  29. $.extend($.fn.bootstrapTable.locales, {
  30. formatToggleCustomView () {
  31. return 'Toggle custom view'
  32. }
  33. })
  34. $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales)
  35. $.fn.bootstrapTable.methods.push('toggleCustomView')
  36. $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
  37. 'custom-view-post-body.bs.table': 'onCustomViewPostBody',
  38. 'custom-view-pre-body.bs.table': 'onCustomViewPreBody'
  39. })
  40. $.BootstrapTable = class extends $.BootstrapTable {
  41. init () {
  42. this.showCustomView = this.options.showCustomView
  43. super.init()
  44. }
  45. initToolbar (...args) {
  46. if (this.options.customView && this.options.showCustomViewButton) {
  47. this.buttons = Object.assign(this.buttons, {
  48. customView: {
  49. text: this.options.formatToggleCustomView(),
  50. icon: this.options.icons.customView,
  51. event: this.toggleCustomView,
  52. attributes: {
  53. 'aria-label': this.options.formatToggleCustomView(),
  54. title: this.options.formatToggleCustomView()
  55. }
  56. }
  57. })
  58. }
  59. super.initToolbar(...args)
  60. }
  61. initBody () {
  62. super.initBody()
  63. if (!this.options.customView) {
  64. return
  65. }
  66. const $table = this.$el
  67. const $customViewContainer = this.$container.find('.fixed-table-custom-view')
  68. $table.hide()
  69. $customViewContainer.hide()
  70. if (!this.options.customView || !this.showCustomView) {
  71. $table.show()
  72. return
  73. }
  74. const data = this.getData().slice(this.pageFrom - 1, this.pageTo)
  75. const value = Utils.calculateObjectValue(this, this.options.customView, [data], '')
  76. this.trigger('custom-view-pre-body', data, value)
  77. if ($customViewContainer.length === 1) {
  78. $customViewContainer.show().html(value)
  79. } else {
  80. this.$tableBody.after(`<div class="fixed-table-custom-view">${value}</div>`)
  81. }
  82. this.trigger('custom-view-post-body', data, value)
  83. }
  84. toggleCustomView () {
  85. this.showCustomView = !this.showCustomView
  86. this.initBody()
  87. }
  88. }