bootstrap-table
Version:
An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3).
76 lines (63 loc) • 2.78 kB
JavaScript
/**
* @author zhixin wen <wenzhixin2010@gmail.com>
* https://github.com/wenzhixin/bootstrap-table/
* theme: https://github.com/zurb/foundation-sites
*/
($ => {
$.extend($.fn.bootstrapTable.defaults, {
classes: 'table hover',
buttonsPrefix: '',
buttonsClass: 'button'
})
$.BootstrapTable = class extends $.BootstrapTable {
initConstants () {
super.initConstants()
this.constants.theme = 'foundation'
this.constants.classes.buttonsGroup = 'button-group'
this.constants.classes.buttonsDropdown = 'button dropdown-container'
this.constants.classes.paginationDropdown = ''
this.constants.classes.dropdownActive = 'is-active'
this.constants.classes.paginationActive = 'current'
this.constants.html.toobarDropdow = ['<ul class="dropdown-pane" id="toolbar-dropdown" data-dropdown><ul class="vertical menu">', '</ul></div>']
this.constants.html.toobarDropdowItem = '<li><label class="dropdown-item">%s</label></li>'
this.constants.html.pageDropdown = ['<ul class="dropdown-pane" id="page-list-dropdown" data-dropdown><ul class="vertical menu">', '</ul></ul>']
this.constants.html.pageDropdownItem = '<li class="dropdown-item %s"><a href="#">%s</a></li>'
this.constants.html.dropdownCaret = '<i class="fa fa-angle-down"></i>'
this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>'],
this.constants.html.paginationItem = '<li><a class="page-item%s" href="#">%s</a></li>'
}
initToolbar () {
super.initToolbar()
if (this.options.showColumns) {
this.$toolbar.find('.keep-open')
.attr('data-toggle', 'toolbar-dropdown')
const $pane = this.$toolbar.find('.dropdown-pane')
.attr('data-position', 'bottom')
.attr('data-alignment', 'right')
new window.Foundation.Dropdown($pane)
this._initDropdown()
}
}
initPagination () {
super.initPagination()
if (this.options.pagination && !this.options.onlyInfoPagination) {
this.$pagination.find('.dropdown-toggle')
.attr('data-toggle', 'page-list-dropdown')
const $pane = this.$pagination.find('.dropdown-pane')
.attr('data-position', 'top')
.attr('data-alignment', 'left')
new window.Foundation.Dropdown($pane)
}
}
_initDropdown ($el) {
const $dropdowns = this.$container.find('.dropdown-container')
$dropdowns.off('click').on('click', e => {
e.stopPropagation()
$dropdowns.find('.dropdown-pane').foundation('toggle')
})
$(document).off('click.bs.dropdown.foundation').on('click.bs.dropdown.foundation', () => {
$dropdowns.find('.dropdown-pane').foundation('close')
})
}
}
})(jQuery)