bootstrap-table
Version:
An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3).
1,415 lines (1,242 loc) • 140 kB
JavaScript
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define([], factory);
} else if (typeof exports !== "undefined") {
factory();
} else {
var mod = {
exports: {}
};
factory();
global.bootstrapTable = mod.exports;
}
})(this, function () {
'use strict';
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var _createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
var _slicedToArray = function () {
function sliceIterator(arr, i) {
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"]) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
return function (arr, i) {
if (Array.isArray(arr)) {
return arr;
} else if (Symbol.iterator in Object(arr)) {
return sliceIterator(arr, i);
} else {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
};
}();
function _toConsumableArray(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
arr2[i] = arr[i];
}
return arr2;
} else {
return Array.from(arr);
}
}
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
/**
* @author zhixin wen <wenzhixin2010@gmail.com>
* version: 1.13.4
* https://github.com/wenzhixin/bootstrap-table/
*/
(function ($) {
// TOOLS DEFINITION
// ======================
var bootstrapVersion = 3;
try {
var rawVersion = $.fn.dropdown.Constructor.VERSION;
// Only try to parse VERSION if is is defined.
// It is undefined in older versions of Bootstrap (tested with 3.1.1).
if (rawVersion !== undefined) {
bootstrapVersion = parseInt(rawVersion, 10);
}
} catch (e) {
// ignore
}
var bootstrap = {
3: {
iconsPrefix: 'glyphicon',
icons: {
paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
refresh: 'glyphicon-refresh icon-refresh',
toggleOff: 'glyphicon-list-alt icon-list-alt',
toggleOn: 'glyphicon-list-alt icon-list-alt',
columns: 'glyphicon-th icon-th',
detailOpen: 'glyphicon-plus icon-plus',
detailClose: 'glyphicon-minus icon-minus',
fullscreen: 'glyphicon-fullscreen'
},
classes: {
buttons: 'default',
pull: 'pull'
},
html: {
toobarDropdow: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
toobarDropdowItem: '<li role="menuitem"><label>%s</label></li>',
pageDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
pageDropdownItem: '<li role="menuitem" class="%s"><a href="#">%s</a></li>'
}
},
4: {
iconsPrefix: 'fa',
icons: {
paginationSwitchDown: 'fa-caret-square-down',
paginationSwitchUp: 'fa-caret-square-up',
refresh: 'fa-sync',
toggleOff: 'fa-toggle-off',
toggleOn: 'fa-toggle-on',
columns: 'fa-th-list',
detailOpen: 'fa-plus',
detailClose: 'fa-minus',
fullscreen: 'fa-arrows-alt'
},
classes: {
buttons: 'secondary',
pull: 'float'
},
html: {
toobarDropdow: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
toobarDropdowItem: '<label class="dropdown-item">%s</label>',
pageDropdown: ['<div class="dropdown-menu">', '</div>'],
pageDropdownItem: '<a class="dropdown-item %s" href="#">%s</a>'
}
}
}[bootstrapVersion];
var Utils = {
bootstrapVersion: bootstrapVersion,
sprintf: function sprintf(_str) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
var flag = true;
var i = 0;
var str = _str.replace(/%s/g, function () {
var arg = args[i++];
if (typeof arg === 'undefined') {
flag = false;
return '';
}
return arg;
});
return flag ? str : '';
},
getFieldTitle: function getFieldTitle(list, value) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = list[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var item = _step.value;
if (item.field === value) {
return item.title;
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
return '';
},
setFieldIndex: function setFieldIndex(columns) {
var totalCol = 0;
var flag = [];
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = columns[0][Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var column = _step2.value;
totalCol += column.colspan || 1;
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
for (var i = 0; i < columns.length; i++) {
flag[i] = [];
for (var j = 0; j < totalCol; j++) {
flag[i][j] = false;
}
}
for (var _i = 0; _i < columns.length; _i++) {
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (var _iterator3 = columns[_i][Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var r = _step3.value;
var rowspan = r.rowspan || 1;
var colspan = r.colspan || 1;
var index = flag[_i].indexOf(false);
if (colspan === 1) {
r.fieldIndex = index;
// when field is undefined, use index instead
if (typeof r.field === 'undefined') {
r.field = index;
}
}
for (var k = 0; k < rowspan; k++) {
flag[_i + k][index] = true;
}
for (var _k = 0; _k < colspan; _k++) {
flag[_i][index + _k] = true;
}
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
}
},
getScrollBarWidth: function getScrollBarWidth() {
if (this.cachedWidth === undefined) {
var $inner = $('<div/>').addClass('fixed-table-scroll-inner');
var $outer = $('<div/>').addClass('fixed-table-scroll-outer');
$outer.append($inner);
$('body').append($outer);
var w1 = $inner[0].offsetWidth;
$outer.css('overflow', 'scroll');
var w2 = $inner[0].offsetWidth;
if (w1 === w2) {
w2 = $outer[0].clientWidth;
}
$outer.remove();
this.cachedWidth = w1 - w2;
}
return this.cachedWidth;
},
calculateObjectValue: function calculateObjectValue(self, name, args, defaultValue) {
var func = name;
if (typeof name === 'string') {
// support obj.func1.func2
var names = name.split('.');
if (names.length > 1) {
func = window;
var _iteratorNormalCompletion4 = true;
var _didIteratorError4 = false;
var _iteratorError4 = undefined;
try {
for (var _iterator4 = names[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
var f = _step4.value;
func = func[f];
}
} catch (err) {
_didIteratorError4 = true;
_iteratorError4 = err;
} finally {
try {
if (!_iteratorNormalCompletion4 && _iterator4.return) {
_iterator4.return();
}
} finally {
if (_didIteratorError4) {
throw _iteratorError4;
}
}
}
} else {
func = window[name];
}
}
if (func !== null && (typeof func === 'undefined' ? 'undefined' : _typeof(func)) === 'object') {
return func;
}
if (typeof func === 'function') {
return func.apply(self, args || []);
}
if (!func && typeof name === 'string' && this.sprintf.apply(this, [name].concat(_toConsumableArray(args)))) {
return this.sprintf.apply(this, [name].concat(_toConsumableArray(args)));
}
return defaultValue;
},
compareObjects: function compareObjects(objectA, objectB, compareLength) {
var aKeys = Object.keys(objectA);
var bKeys = Object.keys(objectB);
if (compareLength && aKeys.length !== bKeys.length) {
return false;
}
var _iteratorNormalCompletion5 = true;
var _didIteratorError5 = false;
var _iteratorError5 = undefined;
try {
for (var _iterator5 = aKeys[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
var key = _step5.value;
if (bKeys.includes(key) && objectA[key] !== objectB[key]) {
return false;
}
}
} catch (err) {
_didIteratorError5 = true;
_iteratorError5 = err;
} finally {
try {
if (!_iteratorNormalCompletion5 && _iterator5.return) {
_iterator5.return();
}
} finally {
if (_didIteratorError5) {
throw _iteratorError5;
}
}
}
return true;
},
escapeHTML: function escapeHTML(text) {
if (typeof text === 'string') {
return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''').replace(/`/g, '`');
}
return text;
},
getRealDataAttr: function getRealDataAttr(dataAttr) {
var _iteratorNormalCompletion6 = true;
var _didIteratorError6 = false;
var _iteratorError6 = undefined;
try {
for (var _iterator6 = Object.entries(dataAttr)[Symbol.iterator](), _step6; !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next()).done); _iteratorNormalCompletion6 = true) {
var _ref = _step6.value;
var _ref2 = _slicedToArray(_ref, 2);
var attr = _ref2[0];
var value = _ref2[1];
var auxAttr = attr.split(/(?=[A-Z])/).join('-').toLowerCase();
if (auxAttr !== attr) {
dataAttr[auxAttr] = value;
delete dataAttr[attr];
}
}
} catch (err) {
_didIteratorError6 = true;
_iteratorError6 = err;
} finally {
try {
if (!_iteratorNormalCompletion6 && _iterator6.return) {
_iterator6.return();
}
} finally {
if (_didIteratorError6) {
throw _iteratorError6;
}
}
}
return dataAttr;
},
getItemField: function getItemField(item, field, escape) {
var value = item;
if (typeof field !== 'string' || item.hasOwnProperty(field)) {
return escape ? this.escapeHTML(item[field]) : item[field];
}
var props = field.split('.');
var _iteratorNormalCompletion7 = true;
var _didIteratorError7 = false;
var _iteratorError7 = undefined;
try {
for (var _iterator7 = props[Symbol.iterator](), _step7; !(_iteratorNormalCompletion7 = (_step7 = _iterator7.next()).done); _iteratorNormalCompletion7 = true) {
var p = _step7.value;
value = value && value[p];
}
} catch (err) {
_didIteratorError7 = true;
_iteratorError7 = err;
} finally {
try {
if (!_iteratorNormalCompletion7 && _iterator7.return) {
_iterator7.return();
}
} finally {
if (_didIteratorError7) {
throw _iteratorError7;
}
}
}
return escape ? this.escapeHTML(value) : value;
},
isIEBrowser: function isIEBrowser() {
return navigator.userAgent.includes('MSIE ') || /Trident.*rv:11\./.test(navigator.userAgent);
},
findIndex: function findIndex(items, item) {
var _iteratorNormalCompletion8 = true;
var _didIteratorError8 = false;
var _iteratorError8 = undefined;
try {
for (var _iterator8 = items.entries()[Symbol.iterator](), _step8; !(_iteratorNormalCompletion8 = (_step8 = _iterator8.next()).done); _iteratorNormalCompletion8 = true) {
var _ref3 = _step8.value;
var _ref4 = _slicedToArray(_ref3, 2);
var i = _ref4[0];
var it = _ref4[1];
if (JSON.stringify(it) === JSON.stringify(item)) {
return i;
}
}
} catch (err) {
_didIteratorError8 = true;
_iteratorError8 = err;
} finally {
try {
if (!_iteratorNormalCompletion8 && _iterator8.return) {
_iterator8.return();
}
} finally {
if (_didIteratorError8) {
throw _iteratorError8;
}
}
}
return -1;
}
};
// BOOTSTRAP TABLE CLASS DEFINITION
// ======================
var DEFAULTS = {
height: undefined,
classes: 'table table-bordered table-hover',
theadClasses: '',
rowStyle: function rowStyle(row, index) {
return {};
},
rowAttributes: function rowAttributes(row, index) {
return {};
},
undefinedText: '-',
locale: undefined,
sortable: true,
sortClass: undefined,
silentSort: true,
sortName: undefined,
sortOrder: 'asc',
sortStable: false,
rememberOrder: false,
customSort: undefined,
columns: [[]],
data: [],
url: undefined,
method: 'get',
cache: true,
contentType: 'application/json',
dataType: 'json',
ajax: undefined,
ajaxOptions: {},
queryParams: function queryParams(params) {
return params;
},
queryParamsType: 'limit', responseHandler: function responseHandler(res) {
return res;
},
totalField: 'total',
dataField: 'rows',
pagination: false,
onlyInfoPagination: false,
paginationLoop: true,
sidePagination: 'client', // client or server
totalRows: 0,
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100],
paginationHAlign: 'right', // right, left
paginationVAlign: 'bottom', // bottom, top, both
paginationDetailHAlign: 'left', // right, left
paginationPreText: '‹',
paginationNextText: '›',
paginationSuccessivelySize: 5, // Maximum successively number of pages in a row
paginationPagesBySide: 1, // Number of pages on each side (right, left) of the current page.
paginationUseIntermediate: false, // Calculate intermediate pages for quick access
search: false,
searchOnEnterKey: false,
strictSearch: false,
trimOnSearch: true,
searchAlign: 'right',
searchTimeOut: 500,
searchText: '',
customSearch: undefined,
showHeader: true,
showFooter: false,
footerStyle: function footerStyle(row, index) {
return {};
},
showColumns: false,
minimumCountColumns: 1,
showPaginationSwitch: false,
showRefresh: false,
showToggle: false,
showFullscreen: false,
smartDisplay: true,
escape: false,
idField: undefined,
uniqueId: undefined,
cardView: false,
detailView: false,
detailFormatter: function detailFormatter(index, row) {
return '';
},
detailFilter: function detailFilter(index, row) {
return true;
},
selectItemName: 'btSelectItem',
clickToSelect: false,
ignoreClickToSelectOn: function ignoreClickToSelectOn(_ref5) {
var tagName = _ref5.tagName;
return ['A', 'BUTTON'].includes(tagName);
},
singleSelect: false,
checkboxHeader: true,
maintainSelected: false,
toolbar: undefined,
toolbarAlign: 'left',
buttonsToolbar: undefined,
buttonsAlign: 'right',
buttonsClass: bootstrap.classes.buttons,
icons: bootstrap.icons,
iconSize: undefined,
iconsPrefix: bootstrap.iconsPrefix, onAll: function onAll(name, args) {
return false;
},
onClickCell: function onClickCell(field, value, row, $element) {
return false;
},
onDblClickCell: function onDblClickCell(field, value, row, $element) {
return false;
},
onClickRow: function onClickRow(item, $element) {
return false;
},
onDblClickRow: function onDblClickRow(item, $element) {
return false;
},
onSort: function onSort(name, order) {
return false;
},
onCheck: function onCheck(row) {
return false;
},
onUncheck: function onUncheck(row) {
return false;
},
onCheckAll: function onCheckAll(rows) {
return false;
},
onUncheckAll: function onUncheckAll(rows) {
return false;
},
onCheckSome: function onCheckSome(rows) {
return false;
},
onUncheckSome: function onUncheckSome(rows) {
return false;
},
onLoadSuccess: function onLoadSuccess(data) {
return false;
},
onLoadError: function onLoadError(status) {
return false;
},
onColumnSwitch: function onColumnSwitch(field, checked) {
return false;
},
onPageChange: function onPageChange(number, size) {
return false;
},
onSearch: function onSearch(text) {
return false;
},
onToggle: function onToggle(cardView) {
return false;
},
onPreBody: function onPreBody(data) {
return false;
},
onPostBody: function onPostBody() {
return false;
},
onPostHeader: function onPostHeader() {
return false;
},
onExpandRow: function onExpandRow(index, row, $detail) {
return false;
},
onCollapseRow: function onCollapseRow(index, row) {
return false;
},
onRefreshOptions: function onRefreshOptions(options) {
return false;
},
onRefresh: function onRefresh(params) {
return false;
},
onResetView: function onResetView() {
return false;
},
onScrollBody: function onScrollBody() {
return false;
}
};
var LOCALES = {};
LOCALES['en-US'] = LOCALES.en = {
formatLoadingMessage: function formatLoadingMessage() {
return 'Loading, please wait...';
},
formatRecordsPerPage: function formatRecordsPerPage(pageNumber) {
return Utils.sprintf('%s rows per page', pageNumber);
},
formatShowingRows: function formatShowingRows(pageFrom, pageTo, totalRows) {
return Utils.sprintf('Showing %s to %s of %s rows', pageFrom, pageTo, totalRows);
},
formatDetailPagination: function formatDetailPagination(totalRows) {
return Utils.sprintf('Showing %s rows', totalRows);
},
formatSearch: function formatSearch() {
return 'Search';
},
formatNoMatches: function formatNoMatches() {
return 'No matching records found';
},
formatPaginationSwitch: function formatPaginationSwitch() {
return 'Hide/Show pagination';
},
formatRefresh: function formatRefresh() {
return 'Refresh';
},
formatToggle: function formatToggle() {
return 'Toggle';
},
formatFullscreen: function formatFullscreen() {
return 'Fullscreen';
},
formatColumns: function formatColumns() {
return 'Columns';
},
formatAllRows: function formatAllRows() {
return 'All';
}
};
$.extend(DEFAULTS, LOCALES['en-US']);
var COLUMN_DEFAULTS = {
radio: false,
checkbox: false,
checkboxEnabled: true,
field: undefined,
title: undefined,
titleTooltip: undefined,
'class': undefined,
align: undefined, // left, right, center
halign: undefined, // left, right, center
falign: undefined, // left, right, center
valign: undefined, // top, middle, bottom
width: undefined,
sortable: false,
order: 'asc', // asc, desc
visible: true,
switchable: true,
clickToSelect: true,
formatter: undefined,
footerFormatter: undefined,
events: undefined,
sorter: undefined,
sortName: undefined,
cellStyle: undefined,
searchable: true,
searchFormatter: true,
cardVisible: true,
escape: false,
showSelectTitle: false
};
var EVENTS = {
'all.bs.table': 'onAll',
'click-cell.bs.table': 'onClickCell',
'dbl-click-cell.bs.table': 'onDblClickCell',
'click-row.bs.table': 'onClickRow',
'dbl-click-row.bs.table': 'onDblClickRow',
'sort.bs.table': 'onSort',
'check.bs.table': 'onCheck',
'uncheck.bs.table': 'onUncheck',
'check-all.bs.table': 'onCheckAll',
'uncheck-all.bs.table': 'onUncheckAll',
'check-some.bs.table': 'onCheckSome',
'uncheck-some.bs.table': 'onUncheckSome',
'load-success.bs.table': 'onLoadSuccess',
'load-error.bs.table': 'onLoadError',
'column-switch.bs.table': 'onColumnSwitch',
'page-change.bs.table': 'onPageChange',
'search.bs.table': 'onSearch',
'toggle.bs.table': 'onToggle',
'pre-body.bs.table': 'onPreBody',
'post-body.bs.table': 'onPostBody',
'post-header.bs.table': 'onPostHeader',
'expand-row.bs.table': 'onExpandRow',
'collapse-row.bs.table': 'onCollapseRow',
'refresh-options.bs.table': 'onRefreshOptions',
'reset-view.bs.table': 'onResetView',
'refresh.bs.table': 'onRefresh',
'scroll-body.bs.table': 'onScrollBody'
};
var BootstrapTable = function () {
function BootstrapTable(el, options) {
_classCallCheck(this, BootstrapTable);
this.options = options;
this.$el = $(el);
this.$el_ = this.$el.clone();
this.timeoutId_ = 0;
this.timeoutFooter_ = 0;
this.init();
}
_createClass(BootstrapTable, [{
key: 'init',
value: function init() {
this.initLocale();
this.initContainer();
this.initTable();
this.initHeader();
this.initData();
this.initHiddenRows();
this.initFooter();
this.initToolbar();
this.initPagination();
this.initBody();
this.initSearchText();
this.initServer();
}
}, {
key: 'initLocale',
value: function initLocale() {
if (this.options.locale) {
var locales = $.fn.bootstrapTable.locales;
var parts = this.options.locale.split(/-|_/);
parts[0] = parts[0].toLowerCase();
if (parts[1]) {
parts[1] = parts[1].toUpperCase();
}
if (locales[this.options.locale]) {
$.extend(this.options, locales[this.options.locale]);
} else if (locales[parts.join('-')]) {
$.extend(this.options, locales[parts.join('-')]);
} else if (locales[parts[0]]) {
$.extend(this.options, locales[parts[0]]);
}
}
}
}, {
key: 'initContainer',
value: function initContainer() {
var topPagination = ['top', 'both'].includes(this.options.paginationVAlign) ? '<div class="fixed-table-pagination clearfix"></div>' : '';
var bottomPagination = ['bottom', 'both'].includes(this.options.paginationVAlign) ? '<div class="fixed-table-pagination"></div>' : '';
this.$container = $('\n <div class="bootstrap-table">\n <div class="fixed-table-toolbar"></div>\n ' + topPagination + '\n <div class="fixed-table-container">\n <div class="fixed-table-header"><table></table></div>\n <div class="fixed-table-body">\n <div class="fixed-table-loading">\n ' + this.options.formatLoadingMessage() + '\n </div>\n </div>\n <div class="fixed-table-footer"><table><tr></tr></table></div>\n </div>\n ' + bottomPagination + '\n </div>\n ');
this.$container.insertAfter(this.$el);
this.$tableContainer = this.$container.find('.fixed-table-container');
this.$tableHeader = this.$container.find('.fixed-table-header');
this.$tableBody = this.$container.find('.fixed-table-body');
this.$tableLoading = this.$container.find('.fixed-table-loading');
this.$tableFooter = this.$container.find('.fixed-table-footer');
// checking if custom table-toolbar exists or not
if (this.options.buttonsToolbar) {
this.$toolbar = $('body').find(this.options.buttonsToolbar);
} else {
this.$toolbar = this.$container.find('.fixed-table-toolbar');
}
this.$pagination = this.$container.find('.fixed-table-pagination');
this.$tableBody.append(this.$el);
this.$container.after('<div class="clearfix"></div>');
this.$el.addClass(this.options.classes);
if (this.options.height) {
this.$tableContainer.addClass('fixed-height');
if (this.options.classes.split(' ').includes('table-bordered')) {
this.$tableBody.append('<div class="fixed-table-border"></div>');
this.$tableBorder = this.$tableBody.find('.fixed-table-border');
this.$tableLoading.addClass('fixed-table-border');
}
}
}
}, {
key: 'initTable',
value: function initTable() {
var _this = this;
var columns = [];
var data = [];
this.$header = this.$el.find('>thead');
if (!this.$header.length) {
this.$header = $('<thead class="' + this.options.theadClasses + '"></thead>').appendTo(this.$el);
} else if (this.options.theadClasses) {
this.$header.addClass(this.options.theadClasses);
}
this.$header.find('tr').each(function (i, el) {
var column = [];
$(el).find('th').each(function (i, el) {
// #2014: getFieldIndex and elsewhere assume this is string, causes issues if not
if (typeof $(el).data('field') !== 'undefined') {
$(el).data('field', '' + $(el).data('field'));
}
column.push($.extend({}, {
title: $(el).html(),
'class': $(el).attr('class'),
titleTooltip: $(el).attr('title'),
rowspan: $(el).attr('rowspan') ? +$(el).attr('rowspan') : undefined,
colspan: $(el).attr('colspan') ? +$(el).attr('colspan') : undefined
}, $(el).data()));
});
columns.push(column);
});
if (!Array.isArray(this.options.columns[0])) {
this.options.columns = [this.options.columns];
}
this.options.columns = $.extend(true, [], columns, this.options.columns);
this.columns = [];
this.fieldsColumnsIndex = [];
Utils.setFieldIndex(this.options.columns);
this.options.columns.forEach(function (columns, i) {
columns.forEach(function (_column, j) {
var column = $.extend({}, BootstrapTable.COLUMN_DEFAULTS, _column);
if (typeof column.fieldIndex !== 'undefined') {
_this.columns[column.fieldIndex] = column;
_this.fieldsColumnsIndex[column.field] = column.fieldIndex;
}
_this.options.columns[i][j] = column;
});
});
// if options.data is setting, do not process tbody data
if (this.options.data.length) {
return;
}
var m = [];
this.$el.find('>tbody>tr').each(function (y, el) {
var row = {};
// save tr's id, class and data-* attributes
row._id = $(el).attr('id');
row._class = $(el).attr('class');
row._data = Utils.getRealDataAttr($(el).data());
$(el).find('>td').each(function (_x, el) {
var cspan = +$(el).attr('colspan') || 1;
var rspan = +$(el).attr('rowspan') || 1;
var x = _x;
// skip already occupied cells in current row
for (; m[y] && m[y][x]; x++) {}
// ignore
// mark matrix elements occupied by current cell with true
for (var tx = x; tx < x + cspan; tx++) {
for (var ty = y; ty < y + rspan; ty++) {
if (!m[ty]) {
// fill missing rows
m[ty] = [];
}
m[ty][tx] = true;
}
}
var field = _this.columns[x].field;
row[field] = $(el).html();
// save td's id, class and data-* attributes
row['_' + field + '_id'] = $(el).attr('id');
row['_' + field + '_class'] = $(el).attr('class');
row['_' + field + '_rowspan'] = $(el).attr('rowspan');
row['_' + field + '_colspan'] = $(el).attr('colspan');
row['_' + field + '_title'] = $(el).attr('title');
row['_' + field + '_data'] = Utils.getRealDataAttr($(el).data());
});
data.push(row);
});
this.options.data = data;
if (data.length) {
this.fromHtml = true;
}
}
}, {
key: 'initHeader',
value: function initHeader() {
var _this2 = this;
var visibleColumns = {};
var html = [];
this.header = {
fields: [],
styles: [],
classes: [],
formatters: [],
events: [],
sorters: [],
sortNames: [],
cellStyles: [],
searchables: []
};
this.options.columns.forEach(function (columns, i) {
html.push('<tr>');
if (i === 0 && !_this2.options.cardView && _this2.options.detailView) {
html.push('<th class="detail" rowspan="' + _this2.options.columns.length + '">\n <div class="fht-cell"></div>\n </th>\n ');
}
columns.forEach(function (column, j) {
var text = '';
var halign = ''; // header align style
var align = ''; // body align style
var style = '';
var class_ = Utils.sprintf(' class="%s"', column['class']);
var unitWidth = 'px';
var width = column.width;
if (column.width !== undefined && !_this2.options.cardView) {
if (typeof column.width === 'string') {
if (column.width.includes('%')) {
unitWidth = '%';
}
}
}
if (column.width && typeof column.width === 'string') {
width = column.width.replace('%', '').replace('px', '');
}
halign = Utils.sprintf('text-align: %s; ', column.halign ? column.halign : column.align);
align = Utils.sprintf('text-align: %s; ', column.align);
style = Utils.sprintf('vertical-align: %s; ', column.valign);
style += Utils.sprintf('width: %s; ', (column.checkbox || column.radio) && !width ? !column.showSelectTitle ? '36px' : undefined : width ? width + unitWidth : undefined);
if (typeof column.fieldIndex !== 'undefined') {
_this2.header.fields[column.fieldIndex] = column.field;
_this2.header.styles[column.fieldIndex] = align + style;
_this2.header.classes[column.fieldIndex] = class_;
_this2.header.formatters[column.fieldIndex] = column.formatter;
_this2.header.events[column.fieldIndex] = column.events;
_this2.header.sorters[column.fieldIndex] = column.sorter;
_this2.header.sortNames[column.fieldIndex] = column.sortName;
_this2.header.cellStyles[column.fieldIndex] = column.cellStyle;
_this2.header.searchables[column.fieldIndex] = column.searchable;
if (!column.visible) {
return;
}
if (_this2.options.cardView && !column.cardVisible) {
return;
}
visibleColumns[column.field] = column;
}
html.push('<th' + Utils.sprintf(' title="%s"', column.titleTooltip), column.checkbox || column.radio ? Utils.sprintf(' class="bs-checkbox %s"', column['class'] || '') : class_, Utils.sprintf(' style="%s"', halign + style), Utils.sprintf(' rowspan="%s"', column.rowspan), Utils.sprintf(' colspan="%s"', column.colspan), Utils.sprintf(' data-field="%s"', column.field),
// If `column` is not the first element of `this.options.columns[0]`, then className 'data-not-first-th' should be added.
j === 0 && i > 0 ? ' data-not-first-th' : '', '>');
html.push(Utils.sprintf('<div class="th-inner %s">', _this2.options.sortable && column.sortable ? 'sortable both' : ''));
text = _this2.options.escape ? Utils.escapeHTML(column.title) : column.title;
var title = text;
if (column.checkbox) {
text = '';
if (!_this2.options.singleSelect && _this2.options.checkboxHeader) {
text = '<input name="btSelectAll" type="checkbox" />';
}
_this2.header.stateField = column.field;
}
if (column.radio) {
text = '';
_this2.header.stateField = column.field;
_this2.options.singleSelect = true;
}
if (!text && column.showSelectTitle) {
text += title;
}
html.push(text);
html.push('</div>');
html.push('<div class="fht-cell"></div>');
html.push('</div>');
html.push('</th>');
});
html.push('</tr>');
});
this.$header.html(html.join(''));
this.$header.find('th[data-field]').each(function (i, el) {
$(el).data(visibleColumns[$(el).data('field')]);
});
this.$container.off('click', '.th-inner').on('click', '.th-inner', function (e) {
var $this = $(e.currentTarget);
if (_this2.options.detailView && !$this.parent().hasClass('bs-checkbox')) {
if ($this.closest('.bootstrap-table')[0] !== _this2.$container[0]) {
return false;
}
}
if (_this2.options.sortable && $this.parent().data().sortable) {
_this2.onSort(e);
}
});
this.$header.children().children().off('keypress').on('keypress', function (e) {
if (_this2.options.sortable && $(e.currentTarget).data().sortable) {
var code = e.keyCode || e.which;
if (code === 13) {
// Enter keycode
_this2.onSort(e);
}
}
});
$(window).off('resize.bootstrap-table');
if (!this.options.showHeader || this.options.cardView) {
this.$header.hide();
this.$tableHeader.hide();
this.$tableLoading.css('top', 0);
} else {
this.$header.show();
this.$tableHeader.show();
this.$tableLoading.css('top', this.$header.outerHeight() + 1);
// Assign the correct sortable arrow
this.getCaret();
$(window).on('resize.bootstrap-table', $.proxy(this.resetWidth, this));
}
this.$selectAll = this.$header.find('[name="btSelectAll"]');
this.$selectAll.off('click').on('click', function (_ref6) {
var currentTarget = _ref6.currentTarget;
var checked = $(currentTarget).prop('checked');
_this2[checked ? 'checkAll' : 'uncheckAll']();
_this2.updateSelected();
});
}
}, {
key: 'initFooter',
value: function initFooter() {
if (!this.options.showFooter || this.options.cardView) {
this.$tableFooter.hide();
} else {
this.$tableFooter.show();
}
}
}, {
key: 'initData',
value: function initData(data, type) {
if (type === 'append') {
this.options.data = this.options.data.concat(data);
} else if (type === 'prepend') {
this.options.data = [].concat(data).concat(this.options.data);
} else {
this.options.data = data || this.options.data;
}
this.data = this.options.data;
if (this.options.sidePagination === 'server') {
return;
}
this.initSort();
}
}, {
key: 'initSort',
value: function initSort() {
var _this3 = this;
var name = this.options.sortName;
var order = this.options.sortOrder === 'desc' ? -1 : 1;
var index = this.header.fields.indexOf(this.options.sortName);
var timeoutId = 0;
if (index !== -1) {
if (this.options.sortStable) {
this.data.forEach(function (row, i) {
if (!row.hasOwnProperty('_position')) {
row._position = i;
}
});
}
if (this.options.customSort) {
Utils.calculateObjectValue(this.options, this.options.customSort, [this.options.sortName, this.options.sortOrder, this.data]);
} else {
this.data.sort(function (a, b) {
if (_this3.header.sortNames[index]) {
name = _this3.header.sortNames[index];
}
var aa = Utils.getItemField(a, name, _this3.options.escape);
var bb = Utils.getItemField(b, name, _this3.options.escape);
var value = Utils.calculateObjectValue(_this3.header, _this3.header.sorters[index], [aa, bb, a, b]);
if (value !== undefined) {
if (_this3.options.sortStable && value === 0) {
return order * (a._position - b._position);
}
return order * value;
}
// Fix #161: undefined or null string sort bug.
if (aa === undefined || aa === null) {
aa = '';
}
if (bb === undefined || bb === null) {
bb = '';
}
if (_this3.options.sortStable && aa === bb) {
aa = a._position;
bb = b._position;
}
// IF both values are numeric, do a numeric comparison
if ($.isNumeric(aa) && $.isNumeric(bb)) {
// Convert numerical values form string to float.
aa = parseFloat(aa);
bb = parseFloat(bb);
if (aa < bb) {
return order * -1;
}
if (aa > bb) {
return order;
}
return 0;
}
if (aa === bb) {
return 0;
}
// If value is not a string, convert to string
if (typeof aa !== 'string') {
aa = aa.toString();
}
if (aa.localeCompare(bb) === -1) {
return order * -1;
}
return order;
});
}
if (this.options.sortClass !== undefined) {
clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
_this3.$el.removeClass(_this3.options.sortClass);
var index = _this3.$header.find('[data-field="' + _this3.options.sortName + '"]').index();
_this3.$el.find('tr td:nth-child(' + (index + 1) + ')').addClass(_this3.options.sortClass);
}, 250);
}
}
}
}, {
key: 'onSort',
value: function onSort(_ref7) {
var type = _ref7.type,
currentTarget = _ref7.currentTarget;
var $this = type === 'keypress' ? $(currentTarget) : $(currentTarget).parent();
var $this_ = this.$header.find('th').eq($this.index());
this.$header.add(this.$header_).find('span.order').remove();
if (this.options.sortName === $this.data('field')) {
this.options.sortOrder = this.options.sortOrder === 'asc' ? 'desc' : 'asc';
} else {
this.options.sortName = $this.data('field');
if (this.options.rememberOrder) {
this.options.sortOrder = $this.data('order') === 'asc' ? 'desc' : 'asc';
} else {
this.options.sortOrder = this.columns[this.fieldsColumnsIndex[$this.data('field')]].order;
}
}
this.trigger('sort', this.options.sortName, this.options.sortOrder);
$this.add($this_).data('order', this.options.sortOrder);
// Assign the correct sortable arrow
this.getCaret();
if (this.options.sidePagination === 'server') {
this.initServer(this.options.silentSort);
return;
}
this.initSort();
this.initBody();
}
}, {
key: 'initToolbar',
value: function initToolbar() {
var _this4 = this;
var html = [];
var timeoutId = 0;
var $keepOpen = void 0;
var $search = void 0;
var switchableCount = 0;
if (this.$toolbar.find('.bs-bars').children().length) {
$('body').append($(this.options.toolbar));
}
this.$toolbar.html('');
if (typeof this.options.toolbar === 'string' || _typeof(this.options.toolbar) === 'object') {
$(Utils.sprintf('<div class="bs-bars %s-%s"></div>', bootstrap.classes.pull, this.options.toolbarAlign)).appendTo(this.$toolbar).append($(this.options.toolbar));
}
// showColumns, showToggle, showRefresh
html = [Utils.sprintf('<div class="columns columns-%s btn-group %s-%s">', this.options.buttonsAlign, bootstrap.classes.pull, this.options.buttonsAlign)];
if (typeof this.options.icons === 'string') {
this.options.icons = Utils.calculateObjectValue(null, this.options.icons);
}
if (this.options.showPaginationSwitch) {
html.push(Utils.sprintf('<button class="btn' + Utils.sprintf(' btn-%s', this.options.buttonsClass) + Utils.sprintf(' btn-%s', this.options.iconSize) + '" type="button" name="paginationSwitch" aria-label="pagination Switch" title="%s">', this.options.formatPaginationSwitch()), Utils.sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.paginationSwitchDown), '</button>');
}
if (this.options.showFullscreen) {
this.$toolbar.find('button[name="fullscreen"]').off('click').on('click', $.proxy(this.toggleFullscreen, this));
}
if (this.options.showRefresh) {
html.push(Utils.sprintf('<button class="btn' + Utils.sprintf(' btn-%s', this.options.buttonsClass) + Utils.sprintf(' btn-%s', this.options.iconSize) + '" type="button" name="refresh" aria-label="refresh" title="%s">', this.options.formatRefresh()), Utils.sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.refresh), '</button>');
}
if (this.options.showToggle) {
html.push(Utils.sprintf('<button class="btn' + Utils.sprintf(' btn-%s', this.options.buttonsClass) + Utils.sprintf(' btn-%s', this.options.iconSize) + '" type="button" name="toggle" aria-label="toggle" title="%s">', this.options.formatToggle()), Utils.sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.toggleOff), '</button>');
}
if (this.options.showFullscreen) {
html.push(Utils.sprintf('<button class="btn' + Utils.sprintf(' btn-%s', this.options.buttonsClass) + Utils.sprintf(' btn-%s', this.options.iconSize) + '" type="button" name="fullscreen" aria-label="fullscreen" title="%s">', this.options.formatFullscreen()), Utils.sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.fullscreen), '</button>');
}
if (this.options.showColumns) {
html.push(Utils.sprintf('<div class="keep-open btn-group" title="%s">', this.options.formatColumns()), '<button type="button" aria-label="columns" class="btn' + Utils.sprintf(' btn-%s', this.options.buttonsClass) + Utils.sprintf(' btn-%s', this.options.iconSize) + ' dropdown-toggle" data-toggle="dropdown">', Utils.sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.columns), ' <span class="caret"></span>', '</button>', bootstrap.html.toobarDropdow[0]);
this.columns.forEach(function (column, i) {
if (column.radio || column.checkbox) {
return;
}
if (_this4.options.cardView && !column.cardVisible) {
return;
}
var checked = column.visible ? ' checked="checked"' : '';
if (column.switchable) {
html.push(Utils.sprintf(bootstrap.html.toobarDropdowItem, Utils.sprintf('<input type="checkbox" data-field="%s" value="%s"%s> %s', column.field, i, checked, column.title)));
switchableCount++;
}
});
html.push(bootstrap.html.toobarDropdow[1], '</div>');
}
html.push('</div>');
// Fix #188: this.showToolbar is for extensions
if (this.showToolbar || html.length > 2) {
this.$toolbar.append(html.join(''));
}
if (this.options.showPaginationSwitch) {
this.$toolbar.fi