この記事では、高さのパーセンテージをサポートするブートストラップ テーブルのサンプル コードを紹介します。BootstrapTable.prototype.resetView メソッドを変更することで、高さのパーセンテージの定義をサポートし、興味のある友人が一緒に学習できます。高さのパーセンテージ定義をサポートするには、異なる高さの画面に適応します
BootstrapTable.prototype.resetView
BootstrapTable.prototype.resetView = function (params) {
var padding = 0;
if (params && params.height) {
this.options.height = params.height;
}
this.$selectAll.prop('checked', this.$selectItem.length > 0 &&
this.$selectItem.length === this.$selectItem.filter(':checked').length);
if (this.options.height) {
var toolbarHeight = this.$toolbar.outerHeight(true),
paginationHeight = this.$pagination.outerHeight(true),
height = this.options.height;
//关键代码
if (this.options.height.toString().indexOf("%") != -1) {
height = $(window).height() * (parseFloat(this.options.height) / 100);
}
height = height - toolbarHeight - paginationHeight;
this.$tableContainer.css('height', height + 'px');
}
if (this.options.cardView) {
// remove the element css
this.$el.css('margin-top', '0');
this.$tableContainer.css('padding-bottom', '0');
this.$tableFooter.hide();
return;
}
if (this.options.showHeader && this.options.height) {
this.$tableHeader.show();
this.resetHeader();
padding += this.$header.outerHeight();
} else {
this.$tableHeader.hide();
this.trigger('post-header');
}
if (this.options.showFooter) {
this.resetFooter();
if (this.options.height) {
padding += this.$tableFooter.outerHeight() + 1;
}
}
// Assign the correct sortable arrow
this.getCaret();
this.$tableContainer.css('padding-bottom', padding + 'px');
this.trigger('reset-view');
};
変更された bootstrap-table.js の完全なコード:
/**
* @author zhixin wen <wenzhixin2010@gmail.com>
* version: 1.11.1
* https://github.com/wenzhixin/bootstrap-table/
*/
(function ($) {
'use strict';
// TOOLS DEFINITION
// ======================
var cachedWidth = null;
// it only does '%s', and return '' when arguments are undefined
var sprintf = function (str) {
var args = arguments,
flag = true,
i = 1;
str = str.replace(/%s/g, function () {
var arg = args[i++];
if (typeof arg === 'undefined') {
flag = false;
return '';
}
return arg;
});
return flag ? str : '';
};
var getPropertyFromOther = function (list, from, to, value) {
var result = '';
$.each(list, function (i, item) {
if (item[from] === value) {
result = item[to];
return false;
}
return true;
});
return result;
};
var getFieldIndex = function (columns, field) {
var index = -1;
$.each(columns, function (i, column) {
if (column.field === field) {
index = i;
return false;
}
return true;
});
return index;
};
// http://jsfiddle.net/wenyi/47nz7ez9/3/
var setFieldIndex = function (columns) {
var i, j, k,
totalCol = 0,
flag = [];
for (i = 0; i < columns[0].length; i++) {
totalCol += columns[0][i].colspan || 1;
}
for (i = 0; i < columns.length; i++) {
flag[i] = [];
for (j = 0; j < totalCol; j++) {
flag[i][j] = false;
}
}
for (i = 0; i < columns.length; i++) {
for (j = 0; j < columns[i].length; j++) {
var r = columns[i][j],
rowspan = r.rowspan || 1,
colspan = r.colspan || 1,
index = $.inArray(false, flag[i]);
if (colspan === 1) {
r.fieldIndex = index;
// when field is undefined, use index instead
if (typeof r.field === 'undefined') {
r.field = index;
}
}
for (k = 0; k < rowspan; k++) {
flag[i + k][index] = true;
}
for (k = 0; k < colspan; k++) {
flag[i][index + k] = true;
}
}
}
};
var getScrollBarWidth = function () {
if (cachedWidth === null) {
var inner = $('<p/>').addClass('fixed-table-scroll-inner'),
outer = $('<p/>').addClass('fixed-table-scroll-outer'),
w1, w2;
outer.append(inner);
$('body').append(outer);
w1 = inner[0].offsetWidth;
outer.css('overflow', 'scroll');
w2 = inner[0].offsetWidth;
if (w1 === w2) {
w2 = outer[0].clientWidth;
}
outer.remove();
cachedWidth = w1 - w2;
}
return cachedWidth;
};
var calculateObjectValue = function (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;
$.each(names, function (i, f) {
func = func[f];
});
} else {
func = window[name];
}
}
if (typeof func === 'object') {
return func;
}
if (typeof func === 'function') {
return func.apply(self, args || []);
}
if (!func && typeof name === 'string' && sprintf.apply(this, [name].concat(args))) {
return sprintf.apply(this, [name].concat(args));
}
return defaultValue;
};
var compareObjects = function (objectA, objectB, compareLength) {
// Create arrays of property names
var objectAProperties = Object.getOwnPropertyNames(objectA),
objectBProperties = Object.getOwnPropertyNames(objectB),
propName = '';
if (compareLength) {
// If number of properties is different, objects are not equivalent
if (objectAProperties.length !== objectBProperties.length) {
return false;
}
}
for (var i = 0; i < objectAProperties.length; i++) {
propName = objectAProperties[i];
// If the property is not in the object B properties, continue with the next property
if ($.inArray(propName, objectBProperties) > -1) {
// If values of same property are not equal, objects are not equivalent
if (objectA[propName] !== objectB[propName]) {
return false;
}
}
}
// If we made it this far, objects are considered equivalent
return true;
};
var escapeHTML = function (text) {
if (typeof text === 'string') {
return text
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/`/g, '`');
}
return text;
};
var getRealDataAttr = function (dataAttr) {
for (var attr in dataAttr) {
var auxAttr = attr.split(/(?=[A-Z])/).join('-').toLowerCase();
if (auxAttr !== attr) {
dataAttr[auxAttr] = dataAttr[attr];
delete dataAttr[attr];
}
}
return dataAttr;
};
var getItemField = function (item, field, escape) {
var value = item;
if (typeof field !== 'string' || item.hasOwnProperty(field)) {
return escape ? escapeHTML(item[field]) : item[field];
}
var props = field.split('.');
for (var p in props) {
if (props.hasOwnProperty(p)) {
value = value && value[props[p]];
}
}
return escape ? escapeHTML(value) : value;
};
var isIEBrowser = function () {
return !!(navigator.userAgent.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./));
};
var objectKeys = function () {
// From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
if (!Object.keys) {
Object.keys = (function () {
var hasOwnProperty = Object.prototype.hasOwnProperty,
hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'),
dontEnums = [
'toString',
'toLocaleString',
'valueOf',
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'constructor'
],
dontEnumsLength = dontEnums.length;
return function (obj) {
if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
throw new TypeError('Object.keys called on non-object');
}
var result = [], prop, i;
for (prop in obj) {
if (hasOwnProperty.call(obj, prop)) {
result.push(prop);
}
}
if (hasDontEnumBug) {
for (i = 0; i < dontEnumsLength; i++) {
if (hasOwnProperty.call(obj, dontEnums[i])) {
result.push(dontEnums[i]);
}
}
}
return result;
};
}());
}
};
// BOOTSTRAP TABLE CLASS DEFINITION
// ======================
var BootstrapTable = function (el, options) {
this.options = options;
this.$el = $(el);
this.$el_ = this.$el.clone();
this.timeoutId_ = 0;
this.timeoutFooter_ = 0;
this.init();
};
BootstrapTable.DEFAULTS = {
classes: 'table table-hover',
sortClass: undefined,
locale: undefined,
height: undefined,
undefinedText: '-',
sortName: undefined,
sortOrder: 'asc',
sortStable: false,
striped: false,
columns: [[]],
data: [],
totalField: 'total',
dataField: 'rows',
method: 'get',
url: undefined,
ajax: undefined,
cache: true,
contentType: 'application/json',
dataType: 'json',
ajaxOptions: {},
queryParams: function (params) {
return params;
},
queryParamsType: 'limit', // undefined
responseHandler: function (res) {
return res;
},
pagination: false,
onlyInfoPagination: false,
paginationLoop: true,
sidePagination: 'client', // client or server
totalRows: 0, // server side need to set
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100],
paginationHAlign: 'right', //right, left
paginationVAlign: 'bottom', //bottom, top, both
paginationDetailHAlign: 'left', //right, left
paginationPreText: '‹',
paginationNextText: '›',
search: false,
searchOnEnterKey: false,
strictSearch: false,
searchAlign: 'right',
selectItemName: 'btSelectItem',
showHeader: true,
showFooter: false,
showColumns: false,
showPaginationSwitch: false,
showRefresh: false,
showToggle: false,
buttonsAlign: 'right',
smartDisplay: true,
escape: false,
minimumCountColumns: 1,
idField: undefined,
uniqueId: undefined,
cardView: false,
detailView: false,
detailFormatter: function (index, row) {
return '';
},
trimOnSearch: true,
clickToSelect: false,
singleSelect: false,
toolbar: undefined,
toolbarAlign: 'left',
checkboxHeader: true,
sortable: true,
silentSort: true,
maintainSelected: false,
searchTimeOut: 500,
searchText: '',
iconSize: undefined,
buttonsClass: 'default',
iconsPrefix: 'glyphicon', // glyphicon of fa (font awesome)
icons: {
paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
refresh: 'glyphicon-refresh icon-refresh',
toggle: 'glyphicon-list-alt icon-list-alt',
columns: 'glyphicon-th icon-th',
detailOpen: 'glyphicon-plus icon-plus',
detailClose: 'glyphicon-minus icon-minus'
},
customSearch: $.noop,
customSort: $.noop,
rowStyle: function (row, index) {
return {};
},
rowAttributes: function (row, index) {
return {};
},
footerStyle: function (row, index) {
return {};
},
onAll: function (name, args) {
return false;
},
onClickCell: function (field, value, row, $element) {
return false;
},
onDblClickCell: function (field, value, row, $element) {
return false;
},
onClickRow: function (item, $element) {
return false;
},
onDblClickRow: function (item, $element) {
return false;
},
onSort: function (name, order) {
return false;
},
onCheck: function (row) {
return false;
},
onUncheck: function (row) {
return false;
},
onCheckAll: function (rows) {
return false;
},
onUncheckAll: function (rows) {
return false;
},
onCheckSome: function (rows) {
return false;
},
onUncheckSome: function (rows) {
return false;
},
onLoadSuccess: function (data) {
return false;
},
onLoadError: function (status) {
return false;
},
onColumnSwitch: function (field, checked) {
return false;
},
onPageChange: function (number, size) {
return false;
},
onSearch: function (text) {
return false;
},
onToggle: function (cardView) {
return false;
},
onPreBody: function (data) {
return false;
},
onPostBody: function () {
return false;
},
onPostHeader: function () {
return false;
},
onExpandRow: function (index, row, $detail) {
return false;
},
onCollapseRow: function (index, row) {
return false;
},
onRefreshOptions: function (options) {
return false;
},
onRefresh: function (params) {
return false;
},
onResetView: function () {
return false;
}
};
BootstrapTable.LOCALES = {};
BootstrapTable.LOCALES['en-US'] = BootstrapTable.LOCALES.en = {
formatLoadingMessage: function () {
return 'Loading, please wait...';
},
formatRecordsPerPage: function (pageNumber) {
return sprintf('%s rows per page', pageNumber);
},
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return sprintf('Showing %s to %s of %s rows', pageFrom, pageTo, totalRows);
},
formatDetailPagination: function (totalRows) {
return sprintf('Showing %s rows', totalRows);
},
formatSearch: function () {
return 'Search';
},
formatNoMatches: function () {
return 'No matching records found';
},
formatPaginationSwitch: function () {
return 'Hide/Show pagination';
},
formatRefresh: function () {
return 'Refresh';
},
formatToggle: function () {
return 'Toggle';
},
formatColumns: function () {
return 'Columns';
},
formatAllRows: function () {
return 'All';
}
};
$.extend(BootstrapTable.DEFAULTS, BootstrapTable.LOCALES['en-US']);
BootstrapTable.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
};
BootstrapTable.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'
};
BootstrapTable.prototype.init = function () {
this.initLocale();
this.initContainer();
this.initTable();
this.initHeader();
this.initData();
this.initHiddenRows();
this.initFooter();
this.initToolbar();
this.initPagination();
this.initBody();
this.initSearchText();
this.initServer();
};
BootstrapTable.prototype.initLocale = function () {
if (this.options.locale) {
var parts = this.options.locale.split(/-|_/);
parts[0].toLowerCase();
if (parts[1]) parts[1].toUpperCase();
if ($.fn.bootstrapTable.locales[this.options.locale]) {
// locale as requested
$.extend(this.options, $.fn.bootstrapTable.locales[this.options.locale]);
} else if ($.fn.bootstrapTable.locales[parts.join('-')]) {
// locale with sep set to - (in case original was specified with _)
$.extend(this.options, $.fn.bootstrapTable.locales[parts.join('-')]);
} else if ($.fn.bootstrapTable.locales[parts[0]]) {
// short locale language code (i.e. 'en')
$.extend(this.options, $.fn.bootstrapTable.locales[parts[0]]);
}
}
};
BootstrapTable.prototype.initContainer = function () {
this.$container = $([
'<p class="bootstrap-table">',
'<p class="fixed-table-toolbar"></p>',
this.options.paginationVAlign === 'top' || this.options.paginationVAlign === 'both' ?
'<p class="fixed-table-pagination" style="clear: both;"></p>' :
'',
'<p class="fixed-table-container">',
'<p class="fixed-table-header"><table></table></p>',
'<p class="fixed-table-body">',
'<p class="fixed-table-loading">',
this.options.formatLoadingMessage(),
'</p>',
'</p>',
'<p class="fixed-table-footer"><table><tr></tr></table></p>',
this.options.paginationVAlign === 'bottom' || this.options.paginationVAlign === 'both' ?
'<p class="fixed-table-pagination"></p>' :
'',
'</p>',
'</p>'
].join(''));
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');
this.$toolbar = this.$container.find('.fixed-table-toolbar');
this.$pagination = this.$container.find('.fixed-table-pagination');
this.$tableBody.append(this.$el);
this.$container.after('<p class="clearfix"></p>');
this.$el.addClass(this.options.classes);
if (this.options.striped) {
this.$el.addClass('table-striped');
}
if ($.inArray('table-no-bordered', this.options.classes.split(' ')) !== -1) {
this.$tableContainer.addClass('table-no-bordered');
}
};
BootstrapTable.prototype.initTable = function () {
var that = this,
columns = [],
data = [];
this.$header = this.$el.find('>thead');
if (!this.$header.length) {
this.$header = $('<thead></thead>').appendTo(this.$el);
}
this.$header.find('tr').each(function () {
var column = [];
$(this).find('th').each(function () {
// Fix #2014 - getFieldIndex and elsewhere assume this is string, causes issues if not
if (typeof $(this).data('field') !== 'undefined') {
$(this).data('field', $(this).data('field') + '');
}
column.push($.extend({}, {
title: $(this).html(),
'class': $(this).attr('class'),
titleTooltip: $(this).attr('title'),
rowspan: $(this).attr('rowspan') ? +$(this).attr('rowspan') : undefined,
colspan: $(this).attr('colspan') ? +$(this).attr('colspan') : undefined
}, $(this).data()));
});
columns.push(column);
});
if (!$.isArray(this.options.columns[0])) {
this.options.columns = [this.options.columns];
}
this.options.columns = $.extend(true, [], columns, this.options.columns);
this.columns = [];
setFieldIndex(this.options.columns);
$.each(this.options.columns, function (i, columns) {
$.each(columns, function (j, column) {
column = $.extend({}, BootstrapTable.COLUMN_DEFAULTS, column);
if (typeof column.fieldIndex !== 'undefined') {
that.columns[column.fieldIndex] = column;
}
that.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) {
var row = {};
// save tr's id, class and data-* attributes
row._id = $(this).attr('id');
row._class = $(this).attr('class');
row._data = getRealDataAttr($(this).data());
$(this).find('>td').each(function (x) {
var $this = $(this),
cspan = +$this.attr('colspan') || 1,
rspan = +$this.attr('rowspan') || 1,
tx, ty;
for (; m[y] && m[y][x]; x++); //skip already occupied cells in current row
for (tx = x; tx < x + cspan; tx++) { //mark matrix elements occupied by current cell with true
for (ty = y; ty < y + rspan; ty++) {
if (!m[ty]) { //fill missing rows
m[ty] = [];
}
m[ty][tx] = true;
}
}
var field = that.columns[x].field;
row[field] = $(this).html();
// save td's id, class and data-* attributes
row['_' + field + '_id'] = $(this).attr('id');
row['_' + field + '_class'] = $(this).attr('class');
row['_' + field + '_rowspan'] = $(this).attr('rowspan');
row['_' + field + '_colspan'] = $(this).attr('colspan');
row['_' + field + '_title'] = $(this).attr('title');
row['_' + field + '_data'] = getRealDataAttr($(this).data());
});
data.push(row);
});
this.options.data = data;
if (data.length) this.fromHtml = true;
};
BootstrapTable.prototype.initHeader = function () {
var that = this,
visibleColumns = {},
html = [];
this.header = {
fields: [],
styles: [],
classes: [],
formatters: [],
events: [],
sorters: [],
sortNames: [],
cellStyles: [],
searchables: []
};
$.each(this.options.columns, function (i, columns) {
html.push('<tr>');
if (i === 0 && !that.options.cardView && that.options.detailView) {
html.push(sprintf('<th class="detail" rowspan="%s"><p class="fht-cell"></p></th>',
that.options.columns.length));
}
$.each(columns, function (j, column) {
var text = '',
halign = '', // header align style
align = '', // body align style
style = '',
class_ = sprintf(' class="%s"', column['class']),
order = that.options.sortOrder || column.order,
unitWidth = 'px',
width = column.width;
if (column.width !== undefined && (!that.options.cardView)) {
if (typeof column.width === 'string') {
if (column.width.indexOf('%') !== -1) {
unitWidth = '%';
}
}
}
if (column.width && typeof column.width === 'string') {
width = column.width.replace('%', '').replace('px', '');
}
halign = sprintf('text-align: %s; ', column.halign ? column.halign : column.align);
align = sprintf('text-align: %s; ', column.align);
style = sprintf('vertical-align: %s; ', column.valign);
style += sprintf('width: %s; ', (column.checkbox || column.radio) && !width ?
'36px' : (width ? width + unitWidth : undefined));
if (typeof column.fieldIndex !== 'undefined') {
that.header.fields[column.fieldIndex] = column.field;
that.header.styles[column.fieldIndex] = align + style;
that.header.classes[column.fieldIndex] = class_;
that.header.formatters[column.fieldIndex] = column.formatter;
that.header.events[column.fieldIndex] = column.events;
that.header.sorters[column.fieldIndex] = column.sorter;
that.header.sortNames[column.fieldIndex] = column.sortName;
that.header.cellStyles[column.fieldIndex] = column.cellStyle;
that.header.searchables[column.fieldIndex] = column.searchable;
if (!column.visible) {
return;
}
if (that.options.cardView && (!column.cardVisible)) {
return;
}
visibleColumns[column.field] = column;
}
html.push('<th' + sprintf(' title="%s"', column.titleTooltip),
column.checkbox || column.radio ?
sprintf(' class="bs-checkbox %s"', column['class'] || '') :
class_,
sprintf(' style="%s"', halign + style),
sprintf(' rowspan="%s"', column.rowspan),
sprintf(' colspan="%s"', column.colspan),
sprintf(' data-field="%s"', column.field),
'>');
html.push(sprintf('<p class="th-inner %s">', that.options.sortable && column.sortable ?
'sortable both' : ''));
text = that.options.escape ? escapeHTML(column.title) : column.title;
if (column.checkbox) {
if (!that.options.singleSelect && that.options.checkboxHeader) {
text = '<input name="btSelectAll" type="checkbox" />';
}
that.header.stateField = column.field;
}
if (column.radio) {
text = '';
that.header.stateField = column.field;
that.options.singleSelect = true;
}
html.push(text);
html.push('</p>');
html.push('<p class="fht-cell"></p>');
html.push('</p>');
html.push('</th>');
});
html.push('</tr>');
});
this.$header.html(html.join(''));
this.$header.find('th[data-field]').each(function (i) {
$(this).data(visibleColumns[$(this).data('field')]);
});
this.$container.off('click', '.th-inner').on('click', '.th-inner', function (event) {
var target = $(this);
if (that.options.detailView) {
if (target.closest('.bootstrap-table')[0] !== that.$container[0])
return false;
}
if (that.options.sortable && target.parent().data().sortable) {
that.onSort(event);
}
});
this.$header.children().children().off('keypress').on('keypress', function (event) {
if (that.options.sortable && $(this).data().sortable) {
var code = event.keyCode || event.which;
if (code == 13) { //Enter keycode
that.onSort(event);
}
}
});
$(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 () {
var checked = $(this).prop('checked');
that[checked ? 'checkAll' : 'uncheckAll']();
that.updateSelected();
});
};
BootstrapTable.prototype.initFooter = function () {
if (!this.options.showFooter || this.options.cardView) {
this.$tableFooter.hide();
} else {
this.$tableFooter.show();
}
};
/**
* @param data
* @param type: append / prepend
*/
BootstrapTable.prototype.initData = function (data, type) {
if (type === 'append') {
this.data = this.data.concat(data);
} else if (type === 'prepend') {
this.data = [].concat(data).concat(this.data);
} else {
this.data = data || this.options.data;
}
// Fix #839 Records deleted when adding new row on filtered table
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 = this.data;
}
if (this.options.sidePagination === 'server') {
return;
}
this.initSort();
};
BootstrapTable.prototype.initSort = function () {
var that = this,
name = this.options.sortName,
order = this.options.sortOrder === 'desc' ? -1 : 1,
index = $.inArray(this.options.sortName, this.header.fields),
timeoutId = 0;
if (this.options.customSort !== $.noop) {
this.options.customSort.apply(this, [this.options.sortName, this.options.sortOrder]);
return;
}
if (index !== -1) {
if (this.options.sortStable) {
$.each(this.data, function (i, row) {
if (!row.hasOwnProperty('_position')) row._position = i;
});
}
this.data.sort(function (a, b) {
if (that.header.sortNames[index]) {
name = that.header.sortNames[index];
}
var aa = getItemField(a, name, that.options.escape),
bb = getItemField(b, name, that.options.escape),
value = calculateObjectValue(that.header, that.header.sorters[index], [aa, bb]);
if (value !== undefined) {
return order * value;
}
// Fix #161: undefined or null string sort bug.
if (aa === undefined || aa === null) {
aa = '';
}
if (bb === undefined || bb === null) {
bb = '';
}
if (that.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;
}
return order;
}
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 () {
that.$el.removeClass(that.options.sortClass);
var index = that.$header.find(sprintf('[data-field="%s"]',
that.options.sortName).index() + 1);
that.$el.find(sprintf('tr td:nth-child(%s)', index))
.addClass(that.options.sortClass);
}, 250);
}
}
};
BootstrapTable.prototype.onSort = function (event) {
var $this = event.type === "keypress" ? $(event.currentTarget) : $(event.currentTarget).parent(),
$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');
this.options.sortOrder = $this.data('order') === 'asc' ? 'desc' : 'asc';
}
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();
};
BootstrapTable.prototype.initToolbar = function () {
var that = this,
html = [],
timeoutId = 0,
$keepOpen,
$search,
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') {
$(sprintf('<p class="bs-bars pull-%s"></p>', this.options.toolbarAlign))
.appendTo(this.$toolbar)
.append($(this.options.toolbar));
}
// showColumns, showToggle, showRefresh
html = [sprintf('<p class="columns columns-%s btn-group pull-%s">',
this.options.buttonsAlign, this.options.buttonsAlign)];
if (typeof this.options.icons === 'string') {
this.options.icons = calculateObjectValue(null, this.options.icons);
}
if (this.options.showPaginationSwitch) {
html.push(sprintf('<button class="btn' +
sprintf(' btn-%s', this.options.buttonsClass) +
sprintf(' btn-%s', this.options.iconSize) +
'" type="button" name="paginationSwitch" aria-label="pagination Switch" title="%s">',
this.options.formatPaginationSwitch()),
sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.paginationSwitchDown),
'</button>');
}
if (this.options.showRefresh) {
html.push(sprintf('<button class="btn' +
sprintf(' btn-%s', this.options.buttonsClass) +
sprintf(' btn-%s', this.options.iconSize) +
'" type="button" name="refresh" aria-label="refresh" title="%s">',
this.options.formatRefresh()),
sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.refresh),
'</button>');
}
if (this.options.showToggle) {
html.push(sprintf('<button class="btn' +
sprintf(' btn-%s', this.options.buttonsClass) +
sprintf(' btn-%s', this.options.iconSize) +
'" type="button" name="toggle" aria-label="toggle" title="%s">',
this.options.formatToggle()),
sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.toggle),
'</button>');
}
if (this.options.showColumns) {
html.push(sprintf('<p class="keep-open btn-group" title="%s">',
this.options.formatColumns()),
'<button type="button" aria-label="columns" class="btn' +
sprintf(' btn-%s', this.options.buttonsClass) +
sprintf(' btn-%s', this.options.iconSize) +
' dropdown-toggle" data-toggle="dropdown">',
sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.columns),
' <span class="caret"></span>',
'</button>',
'<ul class="dropdown-menu" role="menu">');
$.each(this.columns, function (i, column) {
if (column.radio || column.checkbox) {
return;
}
if (that.options.cardView && !column.cardVisible) {
return;
}
var checked = column.visible ? ' checked="checked"' : '';
if (column.switchable) {
html.push(sprintf('<li role="menuitem">' +
'<label><input type="checkbox" data-field="%s" value="%s"%s> %s</label>' +
'</li>', column.field, i, checked, column.title));
switchableCount++;
}
});
html.push('</ul>',
'</p>');
}
html.push('</p>');
// Fix #188: this.showToolbar is for extensions
if (this.showToolbar || html.length > 2) {
this.$toolbar.append(html.join(''));
}
if (this.options.showPaginationSwitch) {
this.$toolbar.find('button[name="paginationSwitch"]')
.off('click').on('click', $.proxy(this.togglePagination, this));
}
if (this.options.showRefresh) {
this.$toolbar.find('button[name="refresh"]')
.off('click').on('click', $.proxy(this.refresh, this));
}
if (this.options.showToggle) {
this.$toolbar.find('button[name="toggle"]')
.off('click').on('click', function () {
that.toggleView();
});
}
if (this.options.showColumns) {
$keepOpen = this.$toolbar.find('.keep-open');
if (switchableCount <= this.options.minimumCountColumns) {
$keepOpen.find('input').prop('disabled', true);
}
$keepOpen.find('li').off('click').on('click', function (event) {
event.stopImmediatePropagation();
});
$keepOpen.find('input').off('click').on('click', function () {
var $this = $(this);
that.toggleColumn($(this).val(), $this.prop('checked'), false);
that.trigger('column-switch', $(this).data('field'), $this.prop('checked'));
});
}
if (this.options.search) {
html = [];
html.push(
'<p class="pull-' + this.options.searchAlign + ' search">',
sprintf('<input class="form-control' +
sprintf(' input-%s', this.options.iconSize) +
'" type="text" placeholder="%s">',
this.options.formatSearch()),
'</p>');
this.$toolbar.append(html.join(''));
$search = this.$toolbar.find('.search input');
$search.off('keyup drop blur').on('keyup drop blur', function (event) {
if (that.options.searchOnEnterKey && event.keyCode !== 13) {
return;
}
if ($.inArray(event.keyCode, [37, 38, 39, 40]) > -1) {
return;
}
clearTimeout(timeoutId); // doesn't matter if it's 0
timeoutId = setTimeout(function () {
that.onSearch(event);
}, that.options.searchTimeOut);
});
if (isIEBrowser()) {
$search.off('mouseup').on('mouseup', function (event) {
clearTimeout(timeoutId); // doesn't matter if it's 0
timeoutId = setTimeout(function () {
that.onSearch(event);
}, that.options.searchTimeOut);
});
}
}
};
BootstrapTable.prototype.onSearch = function (event) {
var text = $.trim($(event.currentTarget).val());
// trim search input
if (this.options.trimOnSearch && $(event.currentTarget).val() !== text) {
$(event.currentTarget).val(text);
}
if (text === this.searchText) {
return;
}
this.searchText = text;
this.options.searchText = text;
this.options.pageNumber = 1;
this.initSearch();
this.updatePagination();
this.trigger('search', text);
};
BootstrapTable.prototype.initSearch = function () {
var that = this;
if (this.options.sidePagination !== 'server') {
if (this.options.customSearch !== $.noop) {
this.options.customSearch.apply(this, [this.searchText]);
return;
}
var s = this.searchText && (this.options.escape ?
escapeHTML(this.searchText) : this.searchText).toLowerCase();
var f = $.isEmptyObject(this.filterColumns) ? null : this.filterColumns;
// Check filter
this.data = f ? $.grep(this.options.data, function (item, i) {
for (var key in f) {
if ($.isArray(f[key]) && $.inArray(item[key], f[key]) === -1 ||
!$.isArray(f[key]) && item[key] !== f[key]) {
return false;
}
}
return true;
}) : this.options.data;
this.data = s ? $.grep(this.data, function (item, i) {
for (var j = 0; j < that.header.fields.length; j++) {
if (!that.header.searchables[j]) {
continue;
}
var key = $.isNumeric(that.header.fields[j]) ? parseInt(that.header.fields[j], 10) : that.header.fields[j];
var column = that.columns[getFieldIndex(that.columns, key)];
var value;
if (typeof key === 'string') {
value = item;
var props = key.split('.');
for (var prop_index = 0; prop_index < props.length; prop_index++) {
value = value[props[prop_index]];
}
// Fix #142: respect searchForamtter boolean
if (column && column.searchFormatter) {
value = calculateObjectValue(column,
that.header.formatters[j], [value, item, i], value);
}
} else {
value = item[key];
}
if (typeof value === 'string' || typeof value === 'number') {
if (that.options.strictSearch) {
if ((value + '').toLowerCase() === s) {
return true;
}
} else {
if ((value + '').toLowerCase().indexOf(s) !== -1) {
return true;
}
}
}
}
return false;
}) : this.data;
}
};
BootstrapTable.prototype.initPagination = function () {
if (!this.options.pagination) {
this.$pagination.hide();
return;
} else {
this.$pagination.show();
}
var that = this,
html = [],
$allSelected = false,
i, from, to,
$pageList,
$first, $pre,
$next, $last,
$number,
data = this.getData(),
pageList = this.options.pageList;
if (this.options.sidePagination !== 'server') {
this.options.totalRows = data.length;
}
this.totalPages = 0;
if (this.options.totalRows) {
if (this.options.pageSize === this.options.formatAllRows()) {
this.options.pageSize = this.options.totalRows;
$allSelected = true;
} else if (this.options.pageSize === this.options.totalRows) {
// Fix #667 Table with pagination,
// multiple pages and a search that matches to one page throws exception
var pageLst = typeof this.options.pageList === 'string' ?
this.options.pageList.replace('[', '').replace(']', '')
.replace(/ /g, '').toLowerCase().split(',') : this.options.pageList;
if ($.inArray(this.options.formatAllRows().toLowerCase(), pageLst) > -1) {
$allSelected = true;
}
}
this.totalPages = ~~((this.options.totalRows - 1) / this.options.pageSize) + 1;
this.options.totalPages = this.totalPages;
}
if (this.totalPages > 0 && this.options.pageNumber > this.totalPages) {
this.options.pageNumber = this.totalPages;
}
this.pageFrom = (this.options.pageNumber - 1) * this.options.pageSize + 1;
this.pageTo = this.options.pageNumber * this.options.pageSize;
if (this.pageTo > this.options.totalRows) {
this.pageTo = this.options.totalRows;
}
html.push(
'<p class="pull-' + this.options.paginationDetailHAlign + ' pagination-detail">',
'<span class="pagination-info">',
this.options.onlyInfoPagination ? this.options.formatDetailPagination(this.options.totalRows) :
this.options.formatShowingRows(this.pageFrom, this.pageTo, this.options.totalRows),
'</span>');
if (!this.options.onlyInfoPagination) {
html.push('<span class="page-list">');
var pageNumber = [
sprintf('<span class="btn-group %s">',
this.options.paginationVAlign === 'top' || this.options.paginationVAlign === 'both' ?
'dropdown' : 'dropup'),
'<button type="button" class="btn' +
sprintf(' btn-%s', this.options.buttonsClass) +
sprintf(' btn-%s', this.options.iconSize) +
' dropdown-toggle" data-toggle="dropdown">',
'<span class="page-size">',
$allSelected ? this.options.formatAllRows() : this.options.pageSize,
'</span>',
' <span class="caret"></span>',
'</button>',
'<ul class="dropdown-menu" role="menu">'
];
if (typeof this.options.pageList === 'string') {
var list = this.options.pageList.replace('[', '').replace(']', '')
.replace(/ /g, '').split(',');
pageList = [];
$.each(list, function (i, value) {
pageList.push(value.toUpperCase() === that.options.formatAllRows().toUpperCase() ?
that.options.formatAllRows() : +value);
});
}
$.each(pageList, function (i, page) {
if (!that.options.smartDisplay || i === 0 || pageList[i - 1] < that.options.totalRows) {
var active;
if ($allSelected) {
active = page === that.options.formatAllRows() ? ' class="active"' : '';
} else {
active = page === that.options.pageSize ? ' class="active"' : '';
}
pageNumber.push(sprintf('<li role="menuitem"%s><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >%s</a></li>', active, page));
}
});
pageNumber.push('</ul></span>');
html.push(this.options.formatRecordsPerPage(pageNumber.join('')));
html.push('</span>');
html.push('</p>',
'<p class="pull-' + this.options.paginationHAlign + ' pagination">',
'<ul class="pagination' + sprintf(' pagination-%s', this.options.iconSize) + '">',
'<li class="page-pre"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + this.options.paginationPreText + '</a></li>');
if (this.totalPages < 5) {
from = 1;
to = this.totalPages;
} else {
from = this.options.pageNumber - 2;
to = from + 4;
if (from < 1) {
from = 1;
to = 5;
}
if (to > this.totalPages) {
to = this.totalPages;
from = to - 4;
}
}
if (this.totalPages >= 6) {
if (this.options.pageNumber >= 3) {
html.push('<li class="page-first' + (1 === this.options.pageNumber ? ' active' : '') + '">',
'<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >', 1, '</a>',
'</li>');
from++;
}
if (this.options.pageNumber >= 4) {
if (this.options.pageNumber == 4 || this.totalPages == 6 || this.totalPages == 7) {
from--;
} else {
html.push('<li class="page-first-separator disabled">',
'<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a>',
'</li>');
}
to--;
}
}
if (this.totalPages >= 7) {
if (this.options.pageNumber >= (this.totalPages - 2)) {
from--;
}
}
if (this.totalPages == 6) {
if (this.options.pageNumber >= (this.totalPages - 2)) {
to++;
}
} else if (this.totalPages >= 7) {
if (this.totalPages == 7 || this.options.pageNumber >= (this.totalPages - 3)) {
to++;
}
}
for (i = from; i <= to; i++) {
html.push('<li class="page-number' + (i === this.options.pageNumber ? ' active' : '') + '">',
'<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >', i, '</a>',
'</li>');
}
if (this.totalPages >= 8) {
if (this.options.pageNumber <= (this.totalPages - 4)) {
html.push('<li class="page-last-separator disabled">',
'<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a>',
'</li>');
}
}
if (this.totalPages >= 6) {
if (this.options.pageNumber <= (this.totalPages - 3)) {
html.push('<li class="page-last' + (this.totalPages === this.options.pageNumber ? ' active' : '') + '">',
'<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >', this.totalPages, '</a>',
'</li>');
}
}
html.push(
'<li class="page-next"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + this.options.paginationNextText + '</a></li>',
'</ul>',
'</p>');
}
this.$pagination.html(html.join(''));
if (!this.options.onlyInfoPagination) {
$pageList = this.$pagination.find('.page-list a');
$first = this.$pagination.find('.page-first');
$pre = this.$pagination.find('.page-pre');
$next = this.$pagination.find('.page-next');
$last = this.$pagination.find('.page-last');
$number = this.$pagination.find('.page-number');
if (this.options.smartDisplay) {
if (this.totalPages <= 1) {
this.$pagination.find('p.pagination').hide();
}
if (pageList.length < 2 || this.options.totalRows <= pageList[0]) {
this.$pagination.find('span.page-list').hide();
}
// when data is empty, hide the pagination
this.$pagination[this.getData().length ? 'show' : 'hide']();
}
if (!this.options.paginationLoop) {
if (this.options.pageNumber === 1) {
$pre.addClass('disabled');
}
if (this.options.pageNumber === this.totalPages) {
$next.addClass('disabled');
}
}
if ($allSelected) {
this.options.pageSize = this.options.formatAllRows();
}
$pageList.off('click').on('click', $.proxy(this.onPageListChange, this));
$first.off('click').on('click', $.proxy(this.onPageFirst, this));
$pre.off('click').on('click', $.proxy(this.onPagePre, this));
$next.off('click').on('click', $.proxy(this.onPageNext, this));
$last.off('click').on('click', $.proxy(this.onPageLast, this));
$number.off('click').on('click', $.proxy(this.onPageNumber, this));
}
};
BootstrapTable.prototype.updatePagination = function (event) {
// Fix #171: IE disabled button can be clicked bug.
if (event && $(event.currentTarget).hasClass('disabled')) {
return;
}
if (!this.options.maintainSelected) {
this.resetRows();
}
this.initPagination();
if (this.options.sidePagination === 'server') {
this.initServer();
} else {
this.initBody();
}
this.trigger('page-change', this.options.pageNumber, this.options.pageSize);
};
BootstrapTable.prototype.onPageListChange = function (event) {
var $this = $(event.currentTarget);
$this.parent().addClass('active').siblings().removeClass('active');
this.options.pageSize = $this.text().toUpperCase() === this.options.formatAllRows().toUpperCase() ?
this.options.formatAllRows() : +$this.text();
this.$toolbar.find('.page-size').text(this.options.pageSize);
this.updatePagination(event);
return false;
};
BootstrapTable.prototype.onPageFirst = function (event) {
this.options.pageNumber = 1;
this.updatePagination(event);
return false;
};
BootstrapTable.prototype.onPagePre = function (event) {
if ((this.options.pageNumber - 1) === 0) {
this.options.pageNumber = this.options.totalPages;
} else {
this.options.pageNumber--;
}
this.updatePagination(event);
return false;
};
BootstrapTable.prototype.onPageNext = function (event) {
if ((this.options.pageNumber + 1) > this.options.totalPages) {
this.options.pageNumber = 1;
} else {
this.options.pageNumber++;
}
this.updatePagination(event);
return false;
};
BootstrapTable.prototype.onPageLast = function (event) {
this.options.pageNumber = this.totalPages;
this.updatePagination(event);
return false;
};
BootstrapTable.prototype.onPageNumber = function (event) {
if (this.options.pageNumber === +$(event.currentTarget).text()) {
return;
}
this.options.pageNumber = +$(event.currentTarget).text();
this.updatePagination(event);
return false;
};
BootstrapTable.prototype.initRow = function (item, i, data, parentDom) {
var that = this,
key,
html = [],
style = {},
csses = [],
data_ = '',
attributes = {},
htmlAttributes = [];
if ($.inArray(item, this.hiddenRows) > -1) {
return;
}
style = calculateObjectValue(this.options, this.options.rowStyle, [item, i], style);
if (style && style.css) {
for (key in style.css) {
csses.push(key + ': ' + style.css[key]);
}
}
attributes = calculateObjectValue(this.options,
this.options.rowAttributes, [item, i], attributes);
if (attributes) {
for (key in attributes) {
htmlAttributes.push(sprintf('%s="%s"', key, escapeHTML(attributes[key])));
}
}
if (item._data && !$.isEmptyObject(item._data)) {
$.each(item._data, function (k, v) {
// ignore data-index
if (k === 'index') {
return;
}
data_ += sprintf(' data-%s="%s"', k, v);
});
}
html.push('<tr',
sprintf(' %s', htmlAttributes.join(' ')),
sprintf(' id="%s"', $.isArray(item) ? undefined : item._id),
sprintf(' class="%s"', style.classes || ($.isArray(item) ? undefined : item._class)),
sprintf(' data-index="%s"', i),
sprintf(' data-uniqueid="%s"', item[this.options.uniqueId]),
sprintf('%s', data_),
'>'
);
if (this.options.cardView) {
html.push(sprintf('<td colspan="%s"><p class="card-views">', this.header.fields.length));
}
if (!this.options.cardView && this.options.detailView) {
html.push('<td>',
'<a class="detail-icon" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >',
sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.detailOpen),
'</a>',
'</td>');
}
$.each(this.header.fields, function (j, field) {
var text = '',
value_ = getItemField(item, field, that.options.escape),
value = '',
type = '',
cellStyle = {},
id_ = '',
class_ = that.header.classes[j],
data_ = '',
rowspan_ = '',
colspan_ = '',
title_ = '',
column = that.columns[j];
if (that.fromHtml && typeof value_ === 'undefined') {
return;
}
if (!column.visible) {
return;
}
if (that.options.cardView && (!column.cardVisible)) {
return;
}
if (column.escape) {
value_ = escapeHTML(value_);
}
style = sprintf('style="%s"', csses.concat(that.header.styles[j]).join('; '));
// handle td's id and class
if (item['_' + field + '_id']) {
id_ = sprintf(' id="%s"', item['_' + field + '_id']);
}
if (item['_' + field + '_class']) {
class_ = sprintf(' class="%s"', item['_' + field + '_class']);
}
if (item['_' + field + '_rowspan']) {
rowspan_ = sprintf(' rowspan="%s"', item['_' + field + '_rowspan']);
}
if (item['_' + field + '_colspan']) {
colspan_ = sprintf(' colspan="%s"', item['_' + field + '_colspan']);
}
if (item['_' + field + '_title']) {
title_ = sprintf(' title="%s"', item['_' + field + '_title']);
}
cellStyle = calculateObjectValue(that.header,
that.header.cellStyles[j], [value_, item, i, field], cellStyle);
if (cellStyle.classes) {
class_ = sprintf(' class="%s"', cellStyle.classes);
}
if (cellStyle.css) {
var csses_ = [];
for (var key in cellStyle.css) {
csses_.push(key + ': ' + cellStyle.css[key]);
}
style = sprintf('style="%s"', csses_.concat(that.header.styles[j]).join('; '));
}
value = calculateObjectValue(column,
that.header.formatters[j], [value_, item, i], value_);
if (item['_' + field + '_data'] && !$.isEmptyObject(item['_' + field + '_data'])) {
$.each(item['_' + field + '_data'], function (k, v) {
// ignore data-index
if (k === 'index') {
return;
}
data_ += sprintf(' data-%s="%s"', k, v);
});
}
if (column.checkbox || column.radio) {
type = column.checkbox ? 'checkbox' : type;
type = column.radio ? 'radio' : type;
text = [sprintf(that.options.cardView ?
'<p class="card-view %s">' : '<td class="bs-checkbox %s">', column['class'] || ''),
'<input' +
sprintf(' data-index="%s"', i) +
sprintf(' name="%s"', that.options.selectItemName) +
sprintf(' type="%s"', type) +
sprintf(' value="%s"', item[that.options.idField]) +
sprintf(' checked="%s"', value === true ||
(value_ || value && value.checked) ? 'checked' : undefined) +
sprintf(' disabled="%s"', !column.checkboxEnabled ||
(value && value.disabled) ? 'disabled' : undefined) +
' />',
that.header.formatters[j] && typeof value === 'string' ? value : '',
that.options.cardView ? '</p>' : '</td>'
].join('');
item[that.header.stateField] = value === true || (value && value.checked);
} else {
value = typeof value === 'undefined' || value === null ?
that.options.undefinedText : value;
text = that.options.cardView ? ['<p class="card-view">',
that.options.showHeader ? sprintf('<span class="title" %s>%s</span>', style,
getPropertyFromOther(that.columns, 'field', 'title', field)) : '',
sprintf('<span class="value">%s</span>', value),
'</p>'
].join('') : [sprintf('<td%s %s %s %s %s %s %s>',
id_, class_, style, data_, rowspan_, colspan_, title_),
value,
'</td>'
].join('');
// Hide empty data on Card view when smartDisplay is set to true.
if (that.options.cardView && that.options.smartDisplay && value === '') {
// Should set a placeholder for event binding correct fieldIndex
text = '<p class="card-view"></p>';
}
}
html.push(text);
});
if (this.options.cardView) {
html.push('</p></td>');
}
html.push('</tr>');
return html.join(' ');
};
BootstrapTable.prototype.initBody = function (fixedScroll) {
var that = this,
html = [],
data = this.getData();
this.trigger('pre-body', data);
this.$body = this.$el.find('>tbody');
if (!this.$body.length) {
this.$body = $('<tbody></tbody>').appendTo(this.$el);
}
//Fix #389 Bootstrap-table-flatJSON is not working
if (!this.options.pagination || this.options.sidePagination === 'server') {
this.pageFrom = 1;
this.pageTo = data.length;
}
var trFragments = $(document.createDocumentFragment());
var hasTr;
for (var i = this.pageFrom - 1; i < this.pageTo; i++) {
var item = data[i];
var tr = this.initRow(item, i, data, trFragments);
hasTr = hasTr || !!tr;
if (tr && tr !== true) {
trFragments.append(tr);
}
}
// show no records
if (!hasTr) {
trFragments.append('<tr class="no-records-found">' +
sprintf('<td colspan="%s">%s</td>',
this.$header.find('th').length,
this.options.formatNoMatches()) +
'</tr>');
}
this.$body.html(trFragments);
if (!fixedScroll) {
this.scrollTo(0);
}
// click to select by column
this.$body.find('> tr[data-index] > td').off('click dblclick').on('click dblclick', function (e) {
var $td = $(this),
$tr = $td.parent(),
item = that.data[$tr.data('index')],
index = $td[0].cellIndex,
fields = that.getVisibleFields(),
field = fields[that.options.detailView && !that.options.cardView ? index - 1 : index],
column = that.columns[getFieldIndex(that.columns, field)],
value = getItemField(item, field, that.options.escape);
if ($td.find('.detail-icon').length) {
return;
}
that.trigger(e.type === 'click' ? 'click-cell' : 'dbl-click-cell', field, value, item, $td);
that.trigger(e.type === 'click' ? 'click-row' : 'dbl-click-row', item, $tr, field);
// if click to select - then trigger the checkbox/radio click
if (e.type === 'click' && that.options.clickToSelect && column.clickToSelect) {
var $selectItem = $tr.find(sprintf('[name="%s"]', that.options.selectItemName));
if ($selectItem.length) {
$selectItem[0].click(); // #144: .trigger('click') bug
}
}
});
this.$body.find('> tr[data-index] > td > .detail-icon').off('click').on('click', function () {
var $this = $(this),
$tr = $this.parent().parent(),
index = $tr.data('index'),
row = data[index]; // Fix #980 Detail view, when searching, returns wrong row
// remove and update
if ($tr.next().is('tr.detail-view')) {
$this.find('i').attr('class', sprintf('%s %s', that.options.iconsPrefix, that.options.icons.detailOpen));
that.trigger('collapse-row', index, row);
$tr.next().remove();
} else {
$this.find('i').attr('class', sprintf('%s %s', that.options.iconsPrefix, that.options.icons.detailClose));
$tr.after(sprintf('<tr class="detail-view"><td colspan="%s"></td></tr>', $tr.find('td').length));
var $element = $tr.next().find('td');
var content = calculateObjectValue(that.options, that.options.detailFormatter, [index, row, $element], '');
if ($element.length === 1) {
$element.append(content);
}
that.trigger('expand-row', index, row, $element);
}
that.resetView();
return false;
});
this.$selectItem = this.$body.find(sprintf('[name="%s"]', this.options.selectItemName));
this.$selectItem.off('click').on('click', function (event) {
event.stopImmediatePropagation();
var $this = $(this),
checked = $this.prop('checked'),
row = that.data[$this.data('index')];
if (that.options.maintainSelected && $(this).is(':radio')) {
$.each(that.options.data, function (i, row) {
row[that.header.stateField] = false;
});
}
row[that.header.stateField] = checked;
if (that.options.singleSelect) {
that.$selectItem.not(this).each(function () {
that.data[$(this).data('index')][that.header.stateField] = false;
});
that.$selectItem.filter(':checked').not(this).prop('checked', false);
}
that.updateSelected();
that.trigger(checked ? 'check' : 'uncheck', row, $this);
});
$.each(this.header.events, function (i, events) {
if (!events) {
return;
}
// fix bug, if events is defined with namespace
if (typeof events === 'string') {
events = calculateObjectValue(null, events);
}
var field = that.header.fields[i],
fieldIndex = $.inArray(field, that.getVisibleFields());
if (that.options.detailView && !that.options.cardView) {
fieldIndex += 1;
}
for (var key in events) {
that.$body.find('>tr:not(.no-records-found)').each(function () {
var $tr = $(this),
$td = $tr.find(that.options.cardView ? '.card-view' : 'td').eq(fieldIndex),
index = key.indexOf(' '),
name = key.substring(0, index),
el = key.substring(index + 1),
func = events[key];
$td.find(el).off(name).on(name, function (e) {
var index = $tr.data('index'),
row = that.data[index],
value = row[field];
func.apply(this, [e, value, row, index]);
});
});
}
});
this.updateSelected();
this.resetView();
this.trigger('post-body', data);
};
BootstrapTable.prototype.initServer = function (silent, query, url) {
var that = this,
data = {},
params = {
searchText: this.searchText,
sortName: this.options.sortName,
sortOrder: this.options.sortOrder
},
request;
if (this.options.pagination) {
params.pageSize = this.options.pageSize === this.options.formatAllRows() ?
this.options.totalRows : this.options.pageSize;
params.pageNumber = this.options.pageNumber;
}
if (!(url || this.options.url) && !this.options.ajax) {
return;
}
if (this.options.queryParamsType === 'limit') {
params = {
search: params.searchText,
sort: params.sortName,
order: params.sortOrder
};
if (this.options.pagination) {
params.offset = this.options.pageSize === this.options.formatAllRows() ?
0 : this.options.pageSize * (this.options.pageNumber - 1);
params.limit = this.options.pageSize === this.options.formatAllRows() ?
this.options.totalRows : this.options.pageSize;
}
}
if (!($.isEmptyObject(this.filterColumnsPartial))) {
params.filter = JSON.stringify(this.filterColumnsPartial, null);
}
data = calculateObjectValue(this.options, this.options.queryParams, [params], data);
$.extend(data, query || {});
// false to stop request
if (data === false) {
return;
}
if (!silent) {
this.$tableLoading.show();
}
request = $.extend({}, calculateObjectValue(null, this.options.ajaxOptions), {
type: this.options.method,
url: url || this.options.url,
data: this.options.contentType === 'application/json' && this.options.method === 'post' ?
JSON.stringify(data) : data,
cache: this.options.cache,
contentType: this.options.contentType,
dataType: this.options.dataType,
success: function (res) {
res = calculateObjectValue(that.options, that.options.responseHandler, [res], res);
that.load(res);
that.trigger('load-success', res);
if (!silent) that.$tableLoading.hide();
},
error: function (res) {
that.trigger('load-error', res.status, res);
if (!silent) that.$tableLoading.hide();
}
});
if (this.options.ajax) {
calculateObjectValue(this, this.options.ajax, [request], null);
} else {
if (this._xhr && this._xhr.readyState !== 4) {
this._xhr.abort();
}
this._xhr = $.ajax(request);
}
};
BootstrapTable.prototype.initSearchText = function () {
if (this.options.search) {
if (this.options.searchText !== '') {
var $search = this.$toolbar.find('.search input');
$search.val(this.options.searchText);
this.onSearch({ currentTarget: $search });
}
}
};
BootstrapTable.prototype.getCaret = function () {
var that = this;
$.each(this.$header.find('th'), function (i, th) {
$(th).find('.sortable').removeClass('desc asc').addClass($(th).data('field') === that.options.sortName ? that.options.sortOrder : 'both');
});
};
BootstrapTable.prototype.updateSelected = function () {
var checkAll = this.$selectItem.filter(':enabled').length &&
this.$selectItem.filter(':enabled').length ===
this.$selectItem.filter(':enabled').filter(':checked').length;
this.$selectAll.add(this.$selectAll_).prop('checked', checkAll);
this.$selectItem.each(function () {
$(this).closest('tr')[$(this).prop('checked') ? 'addClass' : 'removeClass']('selected');
});
};
BootstrapTable.prototype.updateRows = function () {
var that = this;
this.$selectItem.each(function () {
that.data[$(this).data('index')][that.header.stateField] = $(this).prop('checked');
});
};
BootstrapTable.prototype.resetRows = function () {
var that = this;
$.each(this.data, function (i, row) {
that.$selectAll.prop('checked', false);
that.$selectItem.prop('checked', false);
if (that.header.stateField) {
row[that.header.stateField] = false;
}
});
this.initHiddenRows();
};
BootstrapTable.prototype.trigger = function (name) {
var args = Array.prototype.slice.call(arguments, 1);
name += '.bs.table';
this.options[BootstrapTable.EVENTS[name]].apply(this.options, args);
this.$el.trigger($.Event(name), args);
this.options.onAll(name, args);
this.$el.trigger($.Event('all.bs.table'), [name, args]);
};
BootstrapTable.prototype.resetHeader = function () {
// fix #61: the hidden table reset header bug.
// fix bug: get $el.css('width') error sometime (height = 500)
clearTimeout(this.timeoutId_);
this.timeoutId_ = setTimeout($.proxy(this.fitHeader, this), this.$el.is(':hidden') ? 100 : 0);
};
BootstrapTable.prototype.fitHeader = function () {
var that = this,
fixedBody,
scrollWidth,
focused,
focusedTemp;
if (that.$el.is(':hidden')) {
that.timeoutId_ = setTimeout($.proxy(that.fitHeader, that), 100);
return;
}
fixedBody = this.$tableBody.get(0);
scrollWidth = fixedBody.scrollWidth > fixedBody.clientWidth &&
fixedBody.scrollHeight > fixedBody.clientHeight + this.$header.outerHeight() ?
getScrollBarWidth() : 0;
this.$el.css('margin-top', -this.$header.outerHeight());
focused = $(':focus');
if (focused.length > 0) {
var $th = focused.parents('th');
if ($th.length > 0) {
var dataField = $th.attr('data-field');
if (dataField !== undefined) {
var $headerTh = this.$header.find("[data-field='" + dataField + "']");
if ($headerTh.length > 0) {
$headerTh.find(":input").addClass("focus-temp");
}
}
}
}
this.$header_ = this.$header.clone(true, true);
this.$selectAll_ = this.$header_.find('[name="btSelectAll"]');
this.$tableHeader.css({
'margin-right': scrollWidth
}).find('table').css('width', this.$el.outerWidth())
.html('').attr('class', this.$el.attr('class'))
.append(this.$header_);
focusedTemp = $('.focus-temp:visible:eq(0)');
if (focusedTemp.length > 0) {
focusedTemp.focus();
this.$header.find('.focus-temp').removeClass('focus-temp');
}
// fix bug: $.data() is not working as expected after $.append()
this.$header.find('th[data-field]').each(function (i) {
that.$header_.find(sprintf('th[data-field="%s"]', $(this).data('field'))).data($(this).data());
});
var visibleFields = this.getVisibleFields(),
$ths = this.$header_.find('th');
this.$body.find('>tr:first-child:not(.no-records-found) > *').each(function (i) {
var $this = $(this),
index = i;
if (that.options.detailView && !that.options.cardView) {
if (i === 0) {
that.$header_.find('th.detail').find('.fht-cell').width($this.innerWidth());
}
index = i - 1;
}
var $th = that.$header_.find(sprintf('th[data-field="%s"]', visibleFields[index]));
if ($th.length > 1) {
$th = $($ths[$this[0].cellIndex]);
}
$th.find('.fht-cell').width($this.innerWidth());
});
// horizontal scroll event
// TODO: it's probably better improving the layout than binding to scroll event
this.$tableBody.off('scroll').on('scroll', function () {
that.$tableHeader.scrollLeft($(this).scrollLeft());
if (that.options.showFooter && !that.options.cardView) {
that.$tableFooter.scrollLeft($(this).scrollLeft());
}
});
that.trigger('post-header');
};
BootstrapTable.prototype.resetFooter = function () {
var that = this,
data = that.getData(),
html = [];
if (!this.options.showFooter || this.options.cardView) { //do nothing
return;
}
if (!this.options.cardView && this.options.detailView) {
html.push('<td><p class="th-inner"> </p><p class="fht-cell"></p></td>');
}
$.each(this.columns, function (i, column) {
var key,
falign = '', // footer align style
valign = '',
csses = [],
style = {},
class_ = sprintf(' class="%s"', column['class']);
if (!column.visible) {
return;
}
if (that.options.cardView && (!column.cardVisible)) {
return;
}
falign = sprintf('text-align: %s; ', column.falign ? column.falign : column.align);
valign = sprintf('vertical-align: %s; ', column.valign);
style = calculateObjectValue(null, that.options.footerStyle);
if (style && style.css) {
for (key in style.css) {
csses.push(key + ': ' + style.css[key]);
}
}
html.push('<td', class_, sprintf(' style="%s"', falign + valign + csses.concat().join('; ')), '>');
html.push('<p class="th-inner">');
html.push(calculateObjectValue(column, column.footerFormatter, [data], ' ') || ' ');
html.push('</p>');
html.push('<p class="fht-cell"></p>');
html.push('</p>');
html.push('</td>');
});
this.$tableFooter.find('tr').html(html.join(''));
this.$tableFooter.show();
clearTimeout(this.timeoutFooter_);
this.timeoutFooter_ = setTimeout($.proxy(this.fitFooter, this),
this.$el.is(':hidden') ? 100 : 0);
};
BootstrapTable.prototype.fitFooter = function () {
var that = this,
$footerTd,
elWidth,
scrollWidth;
clearTimeout(this.timeoutFooter_);
if (this.$el.is(':hidden')) {
this.timeoutFooter_ = setTimeout($.proxy(this.fitFooter, this), 100);
return;
}
elWidth = this.$el.css('width');
scrollWidth = elWidth > this.$tableBody.width() ? getScrollBarWidth() : 0;
this.$tableFooter.css({
'margin-right': scrollWidth
}).find('table').css('width', elWidth)
.attr('class', this.$el.attr('class'));
$footerTd = this.$tableFooter.find('td');
this.$body.find('>tr:first-child:not(.no-records-found) > *').each(function (i) {
var $this = $(this);
$footerTd.eq(i).find('.fht-cell').width($this.innerWidth());
});
};
BootstrapTable.prototype.toggleColumn = function (index, checked, needUpdate) {
if (index === -1) {
return;
}
this.columns[index].visible = checked;
this.initHeader();
this.initSearch();
this.initPagination();
this.initBody();
if (this.options.showColumns) {
var $items = this.$toolbar.find('.keep-open input').prop('disabled', false);
if (needUpdate) {
$items.filter(sprintf('[value="%s"]', index)).prop('checked', checked);
}
if ($items.filter(':checked').length <= this.options.minimumCountColumns) {
$items.filter(':checked').prop('disabled', true);
}
}
};
BootstrapTable.prototype.getVisibleFields = function () {
var that = this,
visibleFields = [];
$.each(this.header.fields, function (j, field) {
var column = that.columns[getFieldIndex(that.columns, field)];
if (!column.visible) {
return;
}
visibleFields.push(field);
});
return visibleFields;
};
// PUBLIC FUNCTION DEFINITION
// =======================
BootstrapTable.prototype.resetView = function (params) {
var padding = 0;
if (params && params.height) {
this.options.height = params.height;
}
this.$selectAll.prop('checked', this.$selectItem.length > 0 &&
this.$selectItem.length === this.$selectItem.filter(':checked').length);
if (this.options.height) {
var toolbarHeight = this.$toolbar.outerHeight(true),
paginationHeight = this.$pagination.outerHeight(true),
height = this.options.height;
if (this.options.height.toString().indexOf("%") != -1) {
height = $(window).height() * (parseFloat(this.options.height) / 100);
}
height = height - toolbarHeight - paginationHeight;
this.$tableContainer.css('height', height + 'px');
}
if (this.options.cardView) {
// remove the element css
this.$el.css('margin-top', '0');
this.$tableContainer.css('padding-bottom', '0');
this.$tableFooter.hide();
return;
}
if (this.options.showHeader && this.options.height) {
this.$tableHeader.show();
this.resetHeader();
padding += this.$header.outerHeight();
} else {
this.$tableHeader.hide();
this.trigger('post-header');
}
if (this.options.showFooter) {
this.resetFooter();
if (this.options.height) {
padding += this.$tableFooter.outerHeight() + 1;
}
}
// Assign the correct sortable arrow
this.getCaret();
this.$tableContainer.css('padding-bottom', padding + 'px');
this.trigger('reset-view');
};
BootstrapTable.prototype.getData = function (useCurrentPage) {
return (this.searchText || !$.isEmptyObject(this.filterColumns) || !$.isEmptyObject(this.filterColumnsPartial)) ?
(useCurrentPage ? this.data.slice(this.pageFrom - 1, this.pageTo) : this.data) :
(useCurrentPage ? this.options.data.slice(this.pageFrom - 1, this.pageTo) : this.options.data);
};
BootstrapTable.prototype.load = function (data) {
var fixedScroll = false;
// #431: support pagination
if (this.options.sidePagination === 'server') {
this.options.totalRows = data[this.options.totalField];
fixedScroll = data.fixedScroll;
data = data[this.options.dataField];
} else if (!$.isArray(data)) { // support fixedScroll
fixedScroll = data.fixedScroll;
data = data.data;
}
this.initData(data);
this.initSearch();
this.initPagination();
this.initBody(fixedScroll);
};
BootstrapTable.prototype.append = function (data) {
this.initData(data, 'append');
this.initSearch();
this.initPagination();
this.initSort();
this.initBody(true);
};
BootstrapTable.prototype.prepend = function (data) {
this.initData(data, 'prepend');
this.initSearch();
this.initPagination();
this.initSort();
this.initBody(true);
};
BootstrapTable.prototype.remove = function (params) {
var len = this.options.data.length,
i, row;
if (!params.hasOwnProperty('field') || !params.hasOwnProperty('values')) {
return;
}
for (i = len - 1; i >= 0; i--) {
row = this.options.data[i];
if (!row.hasOwnProperty(params.field)) {
continue;
}
if ($.inArray(row[params.field], params.values) !== -1) {
this.options.data.splice(i, 1);
if (this.options.sidePagination === 'server') {
this.options.totalRows -= 1;
}
}
}
if (len === this.options.data.length) {
return;
}
this.initSearch();
this.initPagination();
this.initSort();
this.initBody(true);
};
BootstrapTable.prototype.removeAll = function () {
if (this.options.data.length > 0) {
this.options.data.splice(0, this.options.data.length);
this.initSearch();
this.initPagination();
this.initBody(true);
}
};
BootstrapTable.prototype.getRowByUniqueId = function (id) {
var uniqueId = this.options.uniqueId,
len = this.options.data.length,
dataRow = null,
i, row, rowUniqueId;
for (i = len - 1; i >= 0; i--) {
row = this.options.data[i];
if (row.hasOwnProperty(uniqueId)) { // uniqueId is a column
rowUniqueId = row[uniqueId];
} else if (row._data.hasOwnProperty(uniqueId)) { // uniqueId is a row data property
rowUniqueId = row._data[uniqueId];
} else {
continue;
}
if (typeof rowUniqueId === 'string') {
id = id.toString();
} else if (typeof rowUniqueId === 'number') {
if ((Number(rowUniqueId) === rowUniqueId) && (rowUniqueId % 1 === 0)) {
id = parseInt(id);
} else if ((rowUniqueId === Number(rowUniqueId)) && (rowUniqueId !== 0)) {
id = parseFloat(id);
}
}
if (rowUniqueId === id) {
dataRow = row;
break;
}
}
return dataRow;
};
BootstrapTable.prototype.removeByUniqueId = function (id) {
var len = this.options.data.length,
row = this.getRowByUniqueId(id);
if (row) {
this.options.data.splice(this.options.data.indexOf(row), 1);
}
if (len === this.options.data.length) {
return;
}
this.initSearch();
this.initPagination();
this.initBody(true);
};
BootstrapTable.prototype.updateByUniqueId = function (params) {
var that = this;
var allParams = $.isArray(params) ? params : [params];
$.each(allParams, function (i, params) {
var rowId;
if (!params.hasOwnProperty('id') || !params.hasOwnProperty('row')) {
return;
}
rowId = $.inArray(that.getRowByUniqueId(params.id), that.options.data);
if (rowId === -1) {
return;
}
$.extend(that.options.data[rowId], params.row);
});
this.initSearch();
this.initPagination();
this.initSort();
this.initBody(true);
};
BootstrapTable.prototype.insertRow = function (params) {
if (!params.hasOwnProperty('index') || !params.hasOwnProperty('row')) {
return;
}
this.data.splice(params.index, 0, params.row);
this.initSearch();
this.initPagination();
this.initSort();
this.initBody(true);
};
BootstrapTable.prototype.updateRow = function (params) {
var that = this;
var allParams = $.isArray(params) ? params : [params];
$.each(allParams, function (i, params) {
if (!params.hasOwnProperty('index') || !params.hasOwnProperty('row')) {
return;
}
$.extend(that.options.data[params.index], params.row);
});
this.initSearch();
this.initPagination();
this.initSort();
this.initBody(true);
};
BootstrapTable.prototype.initHiddenRows = function () {
this.hiddenRows = [];
};
BootstrapTable.prototype.showRow = function (params) {
this.toggleRow(params, true);
};
BootstrapTable.prototype.hideRow = function (params) {
this.toggleRow(params, false);
};
BootstrapTable.prototype.toggleRow = function (params, visible) {
var row, index;
if (params.hasOwnProperty('index')) {
row = this.getData()[params.index];
} else if (params.hasOwnProperty('uniqueId')) {
row = this.getRowByUniqueId(params.uniqueId);
}
if (!row) {
return;
}
index = $.inArray(row, this.hiddenRows);
if (!visible && index === -1) {
this.hiddenRows.push(row);
} else if (visible && index > -1) {
this.hiddenRows.splice(index, 1);
}
this.initBody(true);
};
BootstrapTable.prototype.getHiddenRows = function (show) {
var that = this,
data = this.getData(),
rows = [];
$.each(data, function (i, row) {
if ($.inArray(row, that.hiddenRows) > -1) {
rows.push(row);
}
});
this.hiddenRows = rows;
return rows;
};
BootstrapTable.prototype.mergeCells = function (options) {
var row = options.index,
col = $.inArray(options.field, this.getVisibleFields()),
rowspan = options.rowspan || 1,
colspan = options.colspan || 1,
i, j,
$tr = this.$body.find('>tr'),
$td;
if (this.options.detailView && !this.options.cardView) {
col += 1;
}
$td = $tr.eq(row).find('>td').eq(col);
if (row < 0 || col < 0 || row >= this.data.length) {
return;
}
for (i = row; i < row + rowspan; i++) {
for (j = col; j < col + colspan; j++) {
$tr.eq(i).find('>td').eq(j).hide();
}
}
$td.attr('rowspan', rowspan).attr('colspan', colspan).show();
};
BootstrapTable.prototype.updateCell = function (params) {
if (!params.hasOwnProperty('index') ||
!params.hasOwnProperty('field') ||
!params.hasOwnProperty('value')) {
return;
}
this.data[params.index][params.field] = params.value;
if (params.reinit === false) {
return;
}
this.initSort();
this.initBody(true);
};
BootstrapTable.prototype.getOptions = function () {
return this.options;
};
BootstrapTable.prototype.getSelections = function () {
var that = this;
return $.grep(this.options.data, function (row) {
// fix #2424: from html with checkbox
return row[that.header.stateField] === true;
});
};
BootstrapTable.prototype.getAllSelections = function () {
var that = this;
return $.grep(this.options.data, function (row) {
return row[that.header.stateField];
});
};
BootstrapTable.prototype.checkAll = function () {
this.checkAll_(true);
};
BootstrapTable.prototype.uncheckAll = function () {
this.checkAll_(false);
};
BootstrapTable.prototype.checkInvert = function () {
var that = this;
var rows = that.$selectItem.filter(':enabled');
var checked = rows.filter(':checked');
rows.each(function () {
$(this).prop('checked', !$(this).prop('checked'));
});
that.updateRows();
that.updateSelected();
that.trigger('uncheck-some', checked);
checked = that.getSelections();
that.trigger('check-some', checked);
};
BootstrapTable.prototype.checkAll_ = function (checked) {
var rows;
if (!checked) {
rows = this.getSelections();
}
this.$selectAll.add(this.$selectAll_).prop('checked', checked);
this.$selectItem.filter(':enabled').prop('checked', checked);
this.updateRows();
if (checked) {
rows = this.getSelections();
}
this.trigger(checked ? 'check-all' : 'uncheck-all', rows);
};
BootstrapTable.prototype.check = function (index) {
this.check_(true, index);
};
BootstrapTable.prototype.uncheck = function (index) {
this.check_(false, index);
};
BootstrapTable.prototype.check_ = function (checked, index) {
var $el = this.$selectItem.filter(sprintf('[data-index="%s"]', index)).prop('checked', checked);
this.data[index][this.header.stateField] = checked;
this.updateSelected();
this.trigger(checked ? 'check' : 'uncheck', this.data[index], $el);
};
BootstrapTable.prototype.checkBy = function (obj) {
this.checkBy_(true, obj);
};
BootstrapTable.prototype.uncheckBy = function (obj) {
this.checkBy_(false, obj);
};
BootstrapTable.prototype.checkBy_ = function (checked, obj) {
if (!obj.hasOwnProperty('field') || !obj.hasOwnProperty('values')) {
return;
}
var isTrigger = true;
/*是否触发选中事件，还是静默处理*/
if (obj.hasOwnProperty('isTrigger') && !obj['isTrigger']) {
isTrigger = false
}
var that = this,
rows = [];
$.each(this.options.data, function (index, row) {
if (!row.hasOwnProperty(obj.field)) {
return false;
}
if ($.inArray(row[obj.field], obj.values) !== -1) {
var $el = that.$selectItem.filter(':enabled')
.filter(sprintf('[data-index="%s"]', index)).prop('checked', checked);
row[that.header.stateField] = checked;
rows.push(row);
if (isTrigger) {
that.trigger(checked ? 'check' : 'uncheck', row, $el);
}
}
});
this.updateSelected();
if (isTrigger) {
this.trigger(checked ? 'check-some' : 'uncheck-some', rows);
}
};
BootstrapTable.prototype.destroy = function () {
this.$el.insertBefore(this.$container);
$(this.options.toolbar).insertBefore(this.$el);
this.$container.next().remove();
this.$container.remove();
this.$el.html(this.$el_.html())
.css('margin-top', '0')
.attr('class', this.$el_.attr('class') || ''); // reset the class
};
BootstrapTable.prototype.showLoading = function () {
this.$tableLoading.show();
};
BootstrapTable.prototype.hideLoading = function () {
this.$tableLoading.hide();
};
BootstrapTable.prototype.togglePagination = function () {
this.options.pagination = !this.options.pagination;
var button = this.$toolbar.find('button[name="paginationSwitch"] i');
if (this.options.pagination) {
button.attr("class", this.options.iconsPrefix + " " + this.options.icons.paginationSwitchDown);
} else {
button.attr("class", this.options.iconsPrefix + " " + this.options.icons.paginationSwitchUp);
}
this.updatePagination();
};
BootstrapTable.prototype.refresh = function (params) {
if (params && params.url) {
this.options.url = params.url;
}
if (params && params.pageNumber) {
this.options.pageNumber = params.pageNumber;
}
if (params && params.pageSize) {
this.options.pageSize = params.pageSize;
}
this.initServer(params && params.silent,
params && params.query, params && params.url);
this.trigger('refresh', params);
};
BootstrapTable.prototype.resetWidth = function () {
if (this.options.showHeader && this.options.height) {
this.fitHeader();
}
if (this.options.showFooter) {
this.fitFooter();
}
};
BootstrapTable.prototype.showColumn = function (field) {
this.toggleColumn(getFieldIndex(this.columns, field), true, true);
};
BootstrapTable.prototype.hideColumn = function (field) {
this.toggleColumn(getFieldIndex(this.columns, field), false, true);
};
BootstrapTable.prototype.getHiddenColumns = function () {
return $.grep(this.columns, function (column) {
return !column.visible;
});
};
BootstrapTable.prototype.getVisibleColumns = function () {
return $.grep(this.columns, function (column) {
return column.visible;
});
};
BootstrapTable.prototype.toggleAllColumns = function (visible) {
$.each(this.columns, function (i, column) {
this.columns[i].visible = visible;
});
this.initHeader();
this.initSearch();
this.initPagination();
this.initBody();
if (this.options.showColumns) {
var $items = this.$toolbar.find('.keep-open input').prop('disabled', false);
if ($items.filter(':checked').length <= this.options.minimumCountColumns) {
$items.filter(':checked').prop('disabled', true);
}
}
};
BootstrapTable.prototype.showAllColumns = function () {
this.toggleAllColumns(true);
};
BootstrapTable.prototype.hideAllColumns = function () {
this.toggleAllColumns(false);
};
BootstrapTable.prototype.filterBy = function (columns) {
this.filterColumns = $.isEmptyObject(columns) ? {} : columns;
this.options.pageNumber = 1;
this.initSearch();
this.updatePagination();
};
BootstrapTable.prototype.scrollTo = function (value) {
if (typeof value === 'string') {
value = value === 'bottom' ? this.$tableBody[0].scrollHeight : 0;
}
if (typeof value === 'number') {
this.$tableBody.scrollTop(value);
}
if (typeof value === 'undefined') {
return this.$tableBody.scrollTop();
}
};
BootstrapTable.prototype.getScrollPosition = function () {
return this.scrollTo();
};
BootstrapTable.prototype.selectPage = function (page) {
if (page > 0 && page <= this.options.totalPages) {
this.options.pageNumber = page;
this.updatePagination();
}
};
BootstrapTable.prototype.prevPage = function () {
if (this.options.pageNumber > 1) {
this.options.pageNumber--;
this.updatePagination();
}
};
BootstrapTable.prototype.nextPage = function () {
if (this.options.pageNumber < this.options.totalPages) {
this.options.pageNumber++;
this.updatePagination();
}
};
BootstrapTable.prototype.toggleView = function () {
this.options.cardView = !this.options.cardView;
this.initHeader();
// Fixed remove toolbar when click cardView button.
//that.initToolbar();
this.initBody();
this.trigger('toggle', this.options.cardView);
};
BootstrapTable.prototype.refreshOptions = function (options) {
//If the objects are equivalent then avoid the call of destroy / init methods
if (compareObjects(this.options, options, true)) {
return;
}
this.options = $.extend(this.options, options);
this.trigger('refresh-options', this.options);
this.destroy();
this.init();
};
BootstrapTable.prototype.resetSearch = function (text) {
var $search = this.$toolbar.find('.search input');
$search.val(text || '');
this.onSearch({ currentTarget: $search });
};
BootstrapTable.prototype.expandRow_ = function (expand, index) {
var $tr = this.$body.find(sprintf('> tr[data-index="%s"]', index));
if ($tr.next().is('tr.detail-view') === (expand ? false : true)) {
$tr.find('> td > .detail-icon').click();
}
};
BootstrapTable.prototype.expandRow = function (index) {
this.expandRow_(true, index);
};
BootstrapTable.prototype.collapseRow = function (index) {
this.expandRow_(false, index);
};
BootstrapTable.prototype.expandAllRows = function (isSubTable) {
if (isSubTable) {
var $tr = this.$body.find(sprintf('> tr[data-index="%s"]', 0)),
that = this,
detailIcon = null,
executeInterval = false,
idInterval = -1;
if (!$tr.next().is('tr.detail-view')) {
$tr.find('> td > .detail-icon').click();
executeInterval = true;
} else if (!$tr.next().next().is('tr.detail-view')) {
$tr.next().find(".detail-icon").click();
executeInterval = true;
}
if (executeInterval) {
try {
idInterval = setInterval(function () {
detailIcon = that.$body.find("tr.detail-view").last().find(".detail-icon");
if (detailIcon.length > 0) {
detailIcon.click();
} else {
clearInterval(idInterval);
}
}, 1);
} catch (ex) {
clearInterval(idInterval);
}
}
} else {
var trs = this.$body.children();
for (var i = 0; i < trs.length; i++) {
this.expandRow_(true, $(trs[i]).data("index"));
}
}
};
BootstrapTable.prototype.collapseAllRows = function (isSubTable) {
if (isSubTable) {
this.expandRow_(false, 0);
} else {
var trs = this.$body.children();
for (var i = 0; i < trs.length; i++) {
this.expandRow_(false, $(trs[i]).data("index"));
}
}
};
BootstrapTable.prototype.updateFormatText = function (name, text) {
if (this.options[sprintf('format%s', name)]) {
if (typeof text === 'string') {
this.options[sprintf('format%s', name)] = function () {
return text;
};
} else if (typeof text === 'function') {
this.options[sprintf('format%s', name)] = text;
}
}
this.initToolbar();
this.initPagination();
this.initBody();
};
// BOOTSTRAP TABLE PLUGIN DEFINITION
// =======================
var allowedMethods = [
'getOptions',
'getSelections', 'getAllSelections', 'getData',
'load', 'append', 'prepend', 'remove', 'removeAll',
'insertRow', 'updateRow', 'updateCell', 'updateByUniqueId', 'removeByUniqueId',
'getRowByUniqueId', 'showRow', 'hideRow', 'getHiddenRows',
'mergeCells',
'checkAll', 'uncheckAll', 'checkInvert',
'check', 'uncheck',
'checkBy', 'uncheckBy',
'refresh',
'resetView',
'resetWidth',
'destroy',
'showLoading', 'hideLoading',
'showColumn', 'hideColumn', 'getHiddenColumns', 'getVisibleColumns',
'showAllColumns', 'hideAllColumns',
'filterBy',
'scrollTo',
'getScrollPosition',
'selectPage', 'prevPage', 'nextPage',
'togglePagination',
'toggleView',
'refreshOptions',
'resetSearch',
'expandRow', 'collapseRow', 'expandAllRows', 'collapseAllRows',
'updateFormatText'
];
$.fn.bootstrapTable = function (option) {
var value,
args = Array.prototype.slice.call(arguments, 1);
this.each(function () {
var $this = $(this),
data = $this.data('bootstrap.table'),
options = $.extend({}, BootstrapTable.DEFAULTS, $this.data(),
typeof option === 'object' && option);
if (typeof option === 'string') {
if ($.inArray(option, allowedMethods) < 0) {
throw new Error("Unknown method: " + option);
}
if (!data) {
return;
}
value = data[option].apply(data, args);
if (option === 'destroy') {
$this.removeData('bootstrap.table');
}
}
if (!data) {
$this.data('bootstrap.table', (data = new BootstrapTable(this, options)));
}
});
return typeof value === 'undefined' ? this : value;
};
$.fn.bootstrapTable.Constructor = BootstrapTable;
$.fn.bootstrapTable.defaults = BootstrapTable.DEFAULTS;
$.fn.bootstrapTable.columnDefaults = BootstrapTable.COLUMN_DEFAULTS;
$.fn.bootstrapTable.locales = BootstrapTable.LOCALES;
$.fn.bootstrapTable.methods = allowedMethods;
$.fn.bootstrapTable.utils = {
sprintf: sprintf,
getFieldIndex: getFieldIndex,
compareObjects: compareObjects,
calculateObjectValue: calculateObjectValue,
getItemField: getItemField,
objectKeys: objectKeys,
isIEBrowser: isIEBrowser
};
// BOOTSTRAP TABLE INIT
// =======================
$(function () {
$('[data-toggle="table"]').bootstrapTable();
});
})(jQuery);
上記は、私が皆さんのためにコンパイルしたものです。 , 将来役立つことを願っています 皆さん役に立ちます。 関連記事:
mpvueでvuexを設定してローカルストレージに永続化する グラフィックチュートリアル分析
vue-cliで作成したプロジェクト、複数ページの設定実装メソッド
以上がブートストラップでテーブルサポートの高さのパーセンテージを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか？ マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます
next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AMこの記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します
JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AMJavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。
JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AMJavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AMJavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AMPythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。
JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AMJavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
3週間前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
3週間前By尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前ByDDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
3週間前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：Myriseのすべてのロックを解除する方法
3週間前By尊渡假赌尊渡假赌尊渡假赌
ホットツール
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
ドリームウィーバー CS6
ビジュアル Web 開発ツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
