bootstrap table

为什么80%的码农都做不了架构师？>>>   

The table options are defined in jQuery.fn.bootstrapTable.defaults.

Name	Attribute	Type	Default	Description
-	data-toggle	String	'table'	Activate bootstrap table without writing JavaScript.
classes	data-classes	String	'table table-hover'	The class name of table. By default, the table is bordered, you can add 'table-no-bordered' to remove table-bordered style.
sortClass	data-sort-class	String	undefined	The class name of the td elements which are sorted.
height	data-height	Number	undefined	The height of table.
undefinedText	data-undefined-text	String	'-'	Defines the default undefined text.
striped	data-striped	Boolean	false	True to stripe the rows.
sortName	data-sort-name	String	undefined	Defines which column will be sorted.
sortOrder	data-sort-order	String	'asc'	Defines the column sort order, can only be 'asc' or 'desc'.
sortStable	data-sort-stable	Boolean	false	True to get a stable sorting. We will add _position property to the row.
iconsPrefix	data-icons-prefix	String	'glyphicon'	Defines icon set name ('glyphicon' or 'fa' for FontAwesome). By default 'glyphicon' is used.
iconSize	data-icon-size	String	undefined	Defines icon size: undefined => btn xs => btn-xs sm => btn-sm lg => btn-lg
buttonsClass	data-buttons-class	String	'default'	Defines the Bootstrap class (added after 'btn-') of table buttons: EX: 'primary', 'danger', 'warning'...
icons	data-icons	Object	{   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' }	Defines icons used in the toolbar, pagination, and details view.
columns	-	Array	[]	The table columns config object, see column properties for more details.
data	-	Array	[]	The data to be loaded.
dataField	data-data-field	String	'rows'	Key in incoming json containing rows data list.
ajax	data-ajax	Function	undefined	A method to replace ajax call. Should implement the same API as jQuery ajax method.
method	data-method	String	'get'	The method type to request remote data.
url	data-url	String	undefined	A URL to request data from remote site.  Note that the required server response format is different depending on whether the 'sidePagination' option is specified. See the following examples: Without server-side pagination With server-side pagination
cache	data-cache	Boolean	true	False to disable caching of AJAX requests.
contentType	data-content-type	String	'application/json'	The contentType of request remote data.
dataType	data-data-type	String	'json'	The type of data that you are expecting back from the server.
ajaxOptions	data-ajax-options	Object	{}	Additional options for submit ajax request. List of values: http://api.jquery.com/jQuery.ajax.
queryParams	data-query-params	Function	function(params) { return params; }	When requesting remote data, you can send additional parameters by modifying queryParams. If queryParamsType = 'limit', the params object contains:  limit, offset, search, sort, order Else, it contains:  pageSize, pageNumber, searchText, sortName, sortOrder.  Return false to stop request.
queryParamsType	data-query-params-type	String	'limit'	Set 'limit' to send query params width RESTFul type.
responseHandler	data-response-handler	Function	function(res) { return res; }	Before load remote data, handler the response data format, the parameters object contains:  res: the response data.
pagination	data-pagination	Boolean	false	True to show a pagination toolbar on table bottom.
paginationLoop	data-pagination-loop	Boolean	true	True to enable pagination continuous loop mode.
onlyInfoPagination	data-only-info-pagination	Boolean	false	True to show only the quantity of the data that is showing in the table. It needs the pagination table options is set to true.
sidePagination	data-side-pagination	String	'client'	Defines the side pagination of table, can only be 'client' or 'server'. Using 'server' side requires either setting the 'url' or 'ajax' option.  Note that the required server response format is different depending on whether the 'client' or 'server' option is specified. See the following examples: Without server-side pagination With server-side pagination
pageNumber	data-page-number	Number	1	When set pagination property, initialize the page number.
pageSize	data-page-size	Number	10	When set pagination property, initialize the page size.
pageList	data-page-list	Array	[10, 25, 50, 100]	When set pagination property, initialize the page size selecting list. If you include the 'All' option, all the records will be shown in your table.
selectItemName	data-select-item-name	String	'btSelectItem'	The name of radio or checkbox input.
smartDisplay	data-smart-display	Boolean	true	True to display pagination or card view smartly.
escape	data-escape	Boolean	false	Escapes a string for insertion into HTML, replacing &, <, >, ", `, and ' characters.
search	data-search	Boolean	false	Enable the search input.
searchOnEnterKey	data-search-on-enter-key	Boolean	false	The search method will be executed until the Enter key is pressed.
strictSearch	data-strict-search	Boolean	false	Enable the strict search.
searchText	data-search-text	String	''	When set search property, initialize the search text.
searchTimeOut	data-search-time-out	Number	500	Set timeout for search fire.
trimOnSearch	data-trim-on-search	Boolean	true	True to trim spaces in search field.
showHeader	data-show-header	Boolean	true	False to hide the table header.
showFooter	data-show-footer	Boolean	false	True to show the summary footer row.
showColumns	data-show-columns	Boolean	false	True to show the columns drop down list.
showRefresh	data-show-refresh	Boolean	false	True to show the refresh button.
showToggle	data-show-toggle	Boolean	false	True to show the toggle button to toggle table / card view.
showPaginationSwitch	data-show-pagination-switch	Boolean	false	True to show the pagination switch button.
minimumCountColumns	data-minimum-count-columns	Number	1	The minimum number of columns to hide from the columns drop down list.
idField	data-id-field	String	undefined	Indicate which field is an identity field.
uniqueId	data-unique-id	String	undefined	Indicate an unique identifier for each row.
cardView	data-card-view	Boolean	false	True to show card view table, for example mobile view.
detailView	data-detail-view	Boolean	false	True to show detail view table.
detailFormatter	data-detail-formatter	Function	function(index, row, element) { return ''; }	Format your detail view when detailView is set to true. Return a String and it will be appended into the detail view cell, optionally render the element directly using the third parameter which is a jQuery element of the target cell.
searchAlign	data-search-align	String	'right'	Indicate how to align the search input. 'left', 'right' can be used.
buttonsAlign	data-buttons-align	String	'right'	Indicate how to align the toolbar buttons. 'left', 'right' can be used.
toolbarAlign	data-toolbar-align	String	'left'	Indicate how to align the custom toolbar. 'left', 'right' can be used.
paginationVAlign	data-pagination-v-align	String	'bottom'	Indicate how to align the pagination. 'top', 'bottom', 'both' (put the pagination on top and bottom) can be used.
paginationHAlign	data-pagination-h-align	String	'right'	Indicate how to align the pagination. 'left', 'right' can be used.
paginationDetailHAlign	data-pagination-detail-h-align	String	'left'	Indicate how to align the pagination detail. 'left', 'right' can be used.
paginationPreText	data-pagination-pre-text	String	'‹'	Indicate the icon or text to be shown in the pagination detail, the previous button.
paginationNextText	data-pagination-next-text	String	'›'	Indicate the icon or text to be shown in the pagination detail, the next button.
clickToSelect	data-click-to-select	Boolean	false	True to select checkbox or radiobox when clicking rows.
singleSelect	data-single-select	Boolean	false	True to allow checkbox selecting only one row.
toolbar	data-toolbar	String | Node	undefined	A jQuery selector that indicates the toolbar, for example: #toolbar, .toolbar, or a DOM node.
checkboxHeader	data-checkbox-header	Boolean	true	False to hide check-all checkbox in header row.
maintainSelected	data-maintain-selected	Boolean	false	True to maintain selected rows on change page and search.
sortable	data-sortable	Boolean	true	False to disable sortable of all columns.
silentSort	data-silent-sort	Boolean	true	Set false to sort the data silently. This options works when the sidePagination option is set to server.
rowStyle	data-row-style	Function	{}	The row style formatter function, takes two parameters:  row: the row record data. index: the row index. Support classes or css. Example usage: function rowStyle(row, index) { return { classes: 'text-nowrap another-class', css: {"color": "blue", "font-size": "50px"} }; }
rowAttributes	data-row-attributes	Function	{}	The row attribute formatter function, takes two parameters:  row: the row record data. index: the row index. Support all custom attributes.
customSearch	data-custom-search	Function	$.noop	The custom search function is executed instead of built-in search function, takes one parameters:  text: the search text. Example usage: function customSearch(text) { //Search logic here. //You must use `this.data` array in order to filter the data. NO use `this.options.data`. }
customSort	data-custom-sort	Function	$.noop	The custom sort function is executed instead of built-in sort function, takes two parameters:  sortName: the sort name. sortOrder: the sort order. Example usage: function customSort(sortName, sortOrder) { //Sort logic here. //You must use `this.data` array in order to sort the data. NO use `this.options.data`. }
locale	data-locale	String	undefined	Sets the locale to use (i.e. 'fr-CA'). Locale files must be pre-loaded. Allows for fallback locales, if loaded, in the following order: First tries for the locale as specified, Then tries the locale with '_' translated to '-' and the region code upper cased, Then tries the the short locale code (i.e. 'fr' instead of 'fr-CA'), And finally will use the last locale file loaded (or the default locale if no locales loaded). If left undfined or an empty string, uses the last locale loaded (or 'en-US' if no locale files loaded).
footerStyle	data-footer-style	Function	{}	The footer style formatter function, takes two parameters:  row: the row record data. index: the row index. Support classes or css. Example usage: function footerStyle(value, row, index) { return { css: { "font-weight": "bold" } }; }

Column optionsEdit on GitHub

 

 

The column options is defined in jQuery.fn.bootstrapTable.columnDefaults.

 

 

 

Name	Attribute	Type	Default	Description
radio	data-radio	Boolean	false	True to show a radio. The radio column has fixed width.
checkbox	data-checkbox	Boolean	false	True to show a checkbox. The checkbox column has fixed width.
field	data-field	String	undefined	The column field name.
title	data-title	String	undefined	The column title text.
titleTooltip	data-title-tooltip	String	undefined	The column title tooltip text. This option also support the title HTML attribute.
class	class / data-class	String	undefined	The column class name.
rowspan	rowspan / data-rowspan	Number	undefined	Indicate how many rows a cell should take up.
colspan	colspan / data-colspan	Number	undefined	Indicate how many columns a cell should take up.
align	data-align	String	undefined	Indicate how to align the column data. 'left', 'right', 'center' can be used.
halign	data-halign	String	undefined	Indicate how to align the table header. 'left', 'right', 'center' can be used.
falign	data-falign	String	undefined	Indicate how to align the table footer. 'left', 'right', 'center' can be used.
valign	data-valign	String	undefined	Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.
width	data-width	Number {Pixels or Percentage}	undefined	The width of column. If not defined, the width will auto expand to fit its contents. Though if the table is left responsive and sized too small this 'width' might be ignored (use min/max-width via class or such then). Also you can add '%' to your number and the bootstrapTable will use the percentage unit, otherwise, leave as number (or add 'px') to make it use pixels.
sortable	data-sortable	Boolean	false	True to allow the column can be sorted.
order	data-order	String	'asc'	The default sort order, can only be 'asc' or 'desc'.
visible	data-visible	Boolean	true	False to hide the columns item.
cardVisible	data-card-visible	Boolean	true	False to hide the columns item in card view state.
switchable	data-switchable	Boolean	true	False to disable the switchable of columns item.
clickToSelect	data-click-to-select	Boolean	true	True to select checkbox or radio when the column is clicked.
formatter	data-formatter	Function	undefined	The context (this) is the column Object.  The cell formatter function, take three parameters:  value: the field value.  row: the row record data. index: the row index.
footerFormatter	data-footer-formatter	Function	undefined	The context (this) is the column Object.  The function, take one parameter:  data: Array of all the data rows.  the function should return a string with the text to show in the footer cell.
events	data-events	Object	undefined	The cell events listener when you use formatter function, take four parameters:  event: the jQuery event.  value: the field value.  row: the row record data. index: the row index.  Example code: <th .. data-events="operateEvent"> var operateEvents = {'click .like': function (e, value, row, index) {}};
sorter	data-sorter	Function	undefined	The custom field sort function that used to do local sorting, take two parameters:  a: the first field value. b: the second field value.
sortName	data-sort-name	String	undefined	Provide a customizable sort-name, not the default sort-name in the header, or the field name of the column. For example, a column might display the value of fieldName of "html" such as "<b><span style="color:red">abc</span></b>", but a fieldName to sort is "content" with the value of "abc".
cellStyle	data-cell-style	Function	undefined	The cell style formatter function, take three parameters:  value: the field value. row: the row record data. index: the row index. field: the row field. Support classes or css. Example usage: function cellStyle(value, row, index, field) { return { classes: 'text-nowrap another-class', css: {"color": "blue", "font-size": "50px"} }; }
searchable	data-searchable	Boolean	true	True to search data for this column.
searchFormatter	data-search-formatter	Boolean	true	True to search use formated data.

EventsEdit on GitHub

 

 

To use event syntax:

Copy

$('#table').bootstrapTable({
    onEventName: function (arg1, arg2, ...) {
        // ...
    }
});

$('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) {
    // ...
});

 

 

 

Option Event	jQuery Event	Parameter	Description
onAll	all.bs.table	name, args	Fires when all events trigger, the parameters contain:  name: the event name,  args: the event data.
onClickRow	click-row.bs.table	row, $element, field	Fires when user click a row, the parameters contain:  row: the record corresponding to the clicked row,  $element: the tr element,  field: the field name corresponding to the clicked cell.
onDblClickRow	dbl-click-row.bs.table	row, $element, field	Fires when user double click a row, the parameters contain:  row: the record corresponding to the clicked row,  $element: the tr element,  field: the field name corresponding to the clicked cell.
onClickCell	click-cell.bs.table	field, value, row, $element	Fires when user click a cell, the parameters contain:  field: the field name corresponding to the clicked cell,  value: the data value corresponding to the clicked cell,  row: the record corresponding to the clicked row,  $element: the td element.
onDblClickCell	dbl-click-cell.bs.table	field, value, row, $element	Fires when user double click a cell, the parameters contain:  field: the field name corresponding to the clicked cell,  value: the data value corresponding to the clicked cell,  row: the record corresponding to the clicked row,  $element: the td element.
onSort	sort.bs.table	name, order	Fires when user sort a column, the parameters contain:  name: the sort column field name order: the sort column order.
onCheck	check.bs.table	row, $element	Fires when user check a row, the parameters contain:  row: the record corresponding to the clicked row. $element: the DOM element checked.
onUncheck	uncheck.bs.table	row, $element	Fires when user uncheck a row, the parameters contain:  row: the record corresponding to the clicked row. $element: the DOM element unchecked.
onCheckAll	check-all.bs.table	rows	Fires when user check all rows, the parameters contain:  rows: array of records corresponding to newly checked rows.
onUncheckAll	uncheck-all.bs.table	rows	Fires when user uncheck all rows, the parameters contain:  rows: array of records corresponding to previously checked rows.
onCheckSome	check-some.bs.table	rows	Fires when user check some rows, the parameters contain:  rows: array of records corresponding to previously checked rows.
onUncheckSome	uncheck-some.bs.table	rows	Fires when user uncheck some rows, the parameters contain:  rows: array of records corresponding to previously checked rows.
onLoadSuccess	load-success.bs.table	data	Fires when remote data is loaded successfully.
onLoadError	load-error.bs.table	status, res	Fires when some errors occur to load remote data.
onColumnSwitch	column-switch.bs.table	field, checked	Fires when switch the column visible.
onColumnSearch	column-search.bs.table	field, text	Fires when search by column.
onPageChange	page-change.bs.table	number, size	Fires when change the page number or page size.
onSearch	search.bs.table	text	Fires when search the table.
onToggle	toggle.bs.table	cardView	Fires when toggle the view of table.
onPreBody	pre-body.bs.table	data	Fires before the table body is rendered
onPostBody	post-body.bs.table	data	Fires after the table body is rendered and available in the DOM
onPostHeader	post-header.bs.table	none	Fires after the table header is rendered and availble in the DOM
onExpandRow	expand-row.bs.table	index, row, $detail	Fires when click the detail icon to expand the detail view.
onCollapseRow	collapse-row.bs.table	index, row	Fires when click the detail icon to collapse the detail view.
onRefreshOptions	refresh-options.bs.table	options	Fires after refresh the options and before destroy and init the table
onResetView	reset-view.bs.table		Fires when reset view of the table.
onRefresh	refresh.bs.table	params	Fires after the click the refresh button.

MethodsEdit on GitHub

 

 

The calling method syntax: $('#table').bootstrapTable('method', parameter);.

 

 

 

Name	Parameter	Description	Example
getOptions	none	Return the options object.
getSelections	none	Return selected rows, when no record selected, an empty array will return.
getAllSelections	none	Return all selected rows contain search or filter, when no record selected, an empty array will return.
showAllColumns	none	Show All the columns.
hideAllColumns	none	Hide All the columns.
getData	useCurrentPage	Get the loaded data of table at the moment that this method is called. If you set the useCurrentPage to true the method will return the data in the current page.
getRowByUniqueId	id	Get data from table, the row that contains the id passed by parameter.
load	data	Load the data to table, the old rows will be removed.
append	data	Append the data to table.
prepend	data	Prepend the data to table.
remove	params	Remove data from table, the params contains two properties:  field: the field name of remove rows.  values: the array of values for rows which should be removed.
removeAll	-	Remove all data from table.
removeByUniqueId	id	Remove data from table, the row that contains the id passed by parameter.
insertRow	params	Insert a new row, the param contains following properties: index: the row index to insert into. row: the row data.
updateRow	params	Update the specified row(s), each param contains following properties:  index: the row index to be updated.  row: the new row data.
updateByUniqueId	params	Update the specified row(s), each param contains following properties:  id: a row id where the id should be the uniqueid field assigned to the table.  row: the new row data.
showRow	params	Show the specified row. The param must contain at least one of the following properties: index: the row index. uniqueId: the value of the uniqueId for that row.
hideRow	params	Hide the specified row. The param must contain at least one of the following properties: index: the row index. uniqueId: the value of the uniqueId for that row.
getRowsHidden	boolean	Get all rows hidden and if you pass the show parameter true the rows will be shown again, otherwise, the method only will return the rows hidden.
mergeCells	options	Merge some cells to one cell, the options contains following properties:  index: the row index.  field: the field name. rowspan: the rowspan count to be merged.  colspan: the colspan count to be merged.
updateCell	params	Update one cell, the params contains following properties:  index: the row index.  field: the field name. value: the new field value.  To disable table re-initialization you can set {reinit: false}
refresh	params	Refresh the remote server data, you can set {silent: true} to refresh the data silently, and set {url: newUrl} to change the url. To supply query params specific to this request, set {query: {foo: 'bar'}}
refreshOptions	options	Refresh the options
resetSearch	text	Set the search text
showLoading	none	Show loading status.
hideLoading	none	Hide loading status.
checkAll	none	Check all current page rows.
uncheckAll	none	Uncheck all current page rows.
checkInvert	none	Invert check of current page rows. Triggers onCheckSome and onUncheckSome events.
check	index	Check a row, the row index start with 0.
uncheck	index	Uncheck a row, the row index start with 0.
checkBy	params	Check a row by array of values, the params contains: field: name of the field used to find records values: array of values for rows to check Example:  $("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})
uncheckBy	params	Uncheck a row by array of values, the params contains: field: name of the field used to find records values: array of values for rows to uncheck Example:  $("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]})
resetView	params	Reset the bootstrap table view, for example reset the table height.
resetWidth	none	Resizes header and footer to fit current columns width
destroy	none	Destroy the bootstrap table.
showColumn	field	Show the specified column.
hideColumn	field	Hide the specified column.
getHiddenColumns	-	Get hidden columns.
getVisibleColumns	-	Get visible columns.
scrollTo	value	Scroll to the number value position, the unit is 'px', set 'bottom' means scroll to the bottom.
getScrollPosition	none	Get the current scroll position, the unit is 'px'.
filterBy	params	(Can use only in client-side) Filter data in table, e.g. you can filter {age: 10}to show the data only age is equal to 10. You can also filter with an array of values, as in: {age: 10, hairColor: ["blue", "red", "green"]} to find data where age is equal to 10 and hairColor is either blue, red, or green.
selectPage	page	Go to the a specified page.
prevPage	none	Go to previous page.
nextPage	none	Go to next page.
togglePagination	none	Toggle the pagination option.
toggleView	none	Toggle the card/table view.
expandRow	index	Expand the row that has the index passed by parameter if the detail view option is set to True.
collapseRow	index	Collapse the row that has the index passed by parameter if the detail view option is set to True.
expandAllRows	is subtable	Expand all rows if the detail view option is set to True.
collapseAllRows	is subtable	Collapse all rows if the detail view option is set to True.

LocalizationsEdit on GitHub

 

 

 

 

 

Name	Parameter	Default
formatLoadingMessage	-	'Loading, please wait…'
formatRecordsPerPage	pageNumber	'%s records per page'
formatShowingRows	pageFrom, pageTo, totalRows	'Showing %s to %s of %s rows'
formatDetailPagination	totalRows	'Showing %s rows'
formatSearch	-	'Search'
formatNoMatches	-	'No matching records found'
formatRefresh	-	'Refresh'
formatToggle	-	'Toggle'
formatColumns	-	'Columns'
formatAllRows	-	'All'

 

 

PS:

We can import all locale files what you need:

Copy

<script src="bootstrap-table-en-US.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
...

And then use JavaScript to switch locale:

Copy

$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US']);
// $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
// ...

Or use data attributes to set locale for table:

Copy

<table data-toggle="table" data-locale="en-US">
</table>

Or use JavaScript to set locale for table:

Copy

$('table').bootstrapTable({locale:'en-US'});

•  

转载于:https://my.oschina.net/Cosco/blog/820296