Bootstrap Table API Chinese version (translation document)

I saw that there are Chinese versions online, but some of them are literal translations, and some are not translated, so I plan to translate them again myself, and I will try my best to combine each one. Translate as much information as possible. If you find that the translated content is more than English, add a more detailed description. The name, attributes, types, and default values ​​of the table will not be translated. For example: "class", "id", etc. will not be translated. Please report any mistakes and they will be corrected in time, thank you.

Recommended tutorial: bootstrap tutorial

##1. "Name" can be written in $('# table').bootstrapTable({});, you can define some desired values, such as:

$("#realTime_Table").bootstrapTable({
		       search: true,
	            pagination: false,
	            pageSize: 15,
	            pageList: [5, 10, 15, 20],
	            showColumns: true,
	            showRefresh: false,
	            showToggle: true,
	            locale: "zh-CN",
	            striped: true
        });

2. "Attributes" are placed in the declaration table, such as ：

<!--例子应该很好看懂Table options和Column options 所放的位置不同，随便写的，主要为了懂得如何用--!>

 <table id="realTime_Table" data-click-to-select="true" class="table table-bordered" data-page-size="20">
      <thead>
          <tr >
              <th data-sortable="true" data-field="realTimeDate">日期</th>
              <th data-sortable="true" data-field="newPlayerNum">新增用户</th>
              <th data-sortable="true" data-field="activePlayerNum">活跃用户</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
</table>

3. If the name and attribute function are similar, then any place is enough. There is no need to repeat the definition. Some attributes are written in js rather than the name in the statement. The table is simpler, or vice verse (some attributes must be written, the corresponding name just indicates whether to enable that attribute)

---

The items of the table (Table options)

Defined in jQuery.fn.bootstrapTable.defaults file

##columns-Array[]The default empty array is defined in JS, field is the data-field, title is the header name of each column, etc. data-Array[ ]The loaded data. dataFielddata-data-fieldStringrows - In the name, write the field name of each column defined by yourself, that is, key, through Key can assign a value to a column of a row. ajaxdata-ajaxFunctionundefined - ajax method, similar to jQuery's ajax method##searchdata-searchBooleanfalse The default false does not display the search box in the upper right corner of the table. It can be set to true. As long as you enter content in the search box, the search will start.searchOnEnterKeydata-search-on- enter-keyBooleanfalseThe default false is not enabled, set to true to enable it, the function is compared with the above, enter the content in the search box and press Press the Enter key to start searchingstrictSearchdata-strict-searchBooleanfalse Set to true to enable precise searchsearchTextdata-search-textString"" Prerequisite: search is set to true and the search function is enabled. searchTimeOutdata- search-time-outNumber500Prerequisite: search is set to true and the search function is enabled.

Name	Attribute	Type	Default value	Function description
-	data-toggle	String	table	Just introduce the jquery, bootstrap, bootstrap-table packages, no need to add them in js You can use if defined inside.By default, data-toggle="table" is written. You should know the data-toggle. Commonly used ones include "tooltip, popover, etc.", which I won't go into here.
classes	data-classes	String	table table-hover	The class attribute of the table, if not defined by yourself, has a border by default, and when the mouse is hovered In that row, the background will turn to light gray.
sortClass	data-sort-class	String	undefined	Declare the class name of table td, which represents the class name of the elements in this column that will be sorted
height	data-height	Number	undefined	Height of the table
undefinedText	data-undefined-text	String	-	When no content is written, the default display is '-'
striped	data-striped	Boolean	false	The default is false. When set to true, the background of each row of the table will display gray and white
sortName	data- sort-name	String	undefined	Define which column's values ​​will be sorted. Write the custom name of the data-field. If it is not defined, it will not be sorted by default. Same as below. Used in combination with sortOrder. If not written, the column will be incremented by default (asc)
sortOrder	data-sort-order	String	asc	Used in conjunction with the above, the default is increasing (asc), and can also be set to decrementing (desc)
sortStable	data-sort -stable	Boolean	false	(Don’t read it wrong, it is sortStable, sortable is below) The default is false, if set to true, it is the same as the sort part, the difference is : During the sorting process, if there are equal elements, the original order will not change. There is another sentence in the original text: (If you set this attribute to true) We will add the '_position' attribute to this row
iconsPrefix	data-icons-prefix	String	glyphicon	Define the font library ('Glyphicon' or 'fa' for FontAwesome). When using "fa", you need to reference FontAwesome and cooperate with the icons attribute to achieve the effect. Glyphicon is integrated into Bootstrap and can be used for free
iconSize	data-icon-size	String	undefined	Defined icon size: - undefined =>Default indicates the default button size (btn) - xs =>Size of ultra-small button (btn-xs) - sm =>Small button size (btn-sm) - lg =>Large button size (btn-lg)
buttonsClass	data-buttons-class	String	default	The class of the button, the default is default. - The options are: primary, danger, warning, etc. - After writing, it will be automatically converted into btn-primary (blue), btn-danger (red), btn-warning (yellow) and other formats, so the front Do not add "btn-", the default is btn-default (white) - Refer to the novice tutorial: Bootstrap button
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' }	Define icons used in toolbars, paging, and detail views - There is no way to explain, please refer to the icon of the novice tutorial: Bootstrap font icon
				- Please refer to: Check the Usage of Bootstrap-table
				- That is, the data obtained from the server is obtained through the "." operator, such as "data.date/data.anything", followed by the field name sent by the server
				- Original text: Get the key in each row of data json - For example: {"name":"zz","age":20}, name and age are the keys, if this is requested from the server json, that may be different from the fields defined in each column, but they are all unique
method	data-method	String	get	向服务器请求远程数据的方式，默认为'get'，可选'post'
url	data-url	String	undefined	向服务器请求的url。       - 例如：server + "get_app_player"和server + 'get_channel_list'，两者都是向server（server是自己定义的，例如"http://kanshakan.nichousha.com/"）请求数据，只是接口不同，一个是请求该游戏玩家信息，一个是请求渠道信息 下面看看原文：       - 向远程站点请求数据的URL       - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：       Without server-side pagination（没有启用服务端分页 - data1.json）       With server-side pagination（启用服务端分页 - data2.json）
cache	data-cache	Boolean	true	默认缓存ajax请求，设为false则禁用缓存
contentType	data-content-type	String	application/json	请求数据的contentType（内容类型），用于定义文件的类型，决定接收方以什么形式读取这个文件。       - 默认application/json，用来告诉接收端从服务器发来的消息是序列化后的json字符串
dataType	data-data-type	String	json	期望从服务器获取的数据的类型，默认为json格式字符串
ajaxOptions	data-ajax-options	Object	{}	向服务器请求ajax时的附加项，默认无附加       - 参考 jQuery.ajax()
queryParams	data-query-params	Function	function(params){ return params;}	当请求数据时，你可以通过修改queryParams向服务器发送其余的参数。       - queryParamsType="limit"，它的参数包括：limit，offset，search，sort，order Else       - params包括：pageSize，pageNumber，searchText，sortName，sortOrder       - 当return false，请求则终止
queryParamsType	data-query-params-type	String	limit	默认"limit"，设置该属性用来发送符合RESTful格式的参数
responseHandler	data-response-handler	Function	function(res){ return res;}	在加载服务器发送来的数据之前，处理数据的格式，参数res表示the response data（获取的数据）
pagination	data-pagination	Boolean	false	默认为false，表格的底部工具栏不会显示分页条（pagination toolbar），可以设为true来显示
paginationLoop	data-pagination-loop	Boolean	true	默认true，分页条无限循环
onlyInfoPagination	data-only-info-pagination	Boolean	false	前提：pagination设为true，启用了分页功能。       - 默认false，设为true显示总记录数
sidePagination	data-side-pagination	String	client	设置在哪进行分页，默认"client"，可选"server"，如果设置 "server"，则必须设置url或者重写ajax方法       - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：       Without server-side pagination（没有启用服务端分页）       With server-side pagination（启用服务端分页）
pageNumber	data-page-number	Number	1	前提：pagination设为true，启用了分页功能。       - 默认第1页，用于设置初始的页数
pageSize	data-page-size	Number	10	前提：pagination设为true，启用了分页功能。 - By default, 10 records are displayed per page, which is used to set the initial number of records displayed on each page
pageList	data-page-list	Array	[10, 25, 50, 100]	Prerequisite: pagination is set to true and the paging function is enabled. - The default is [10, 25, 50, 100], that is, you can select "Display 10/25/50/100 records per page" to set the number of records displayed per page
selectItemName	data-select-item-name	String	btSelectItem	radio (radio button) or checkbox (complex Field name of the selection box
smartDisplay	data-smart-display	Boolean	true	The default is true, which willtactfully(2727ebd6ff48f68915627d0245ec4f78,",`,'
				- The content initially displayed in the search box, the default empty string
				-Set the timeout for search files (original text: Set timeout for search fire, I don’t know if I wrote it wrong or my knowledge is too narrow. What does "search fire" mean? Is the official API wrong?Give me a hard time)
trimOnSearch	data-trim-on-search	Boolean	true	Default true, automatically ignore spaces
showHeader	data-show-header	Boolean	true	The default is true to display the header, set to false to hide
showFooter	data-show-footer	Boolean	false	The default is false to hide the table footer, set to true to display
showColumns	data-show-columns	Boolean	false	The default is false to hide a column drop-down menu, set to true to display
showRefresh	data-show-refresh	Boolean	false	The default is false to hide the refresh button, set to true to display
showToggle	data-show-toggle	Boolean	false	The default is false to hide the view switching button, set to true to display
showPaginationSwitch	data-show-pagination-switch	Boolean	false	The default is false to hide the selection of the number of data items per page, set to true to display
minimumCountColumns	data-minimum-count-columns	Number	1	The drop-down menu for each column is minimum The number
idField	data-id-field	String	undefined	indicates which field is Identification field
uniqueId	data-unique-id	String	undefined	indicates that each row is unique The identifier of
cardView	data-card-view	Boolean	false	default is false, Set to true to display card view
detailView	data-card-view	Boolean	false	Default is false, set to true to display detail view
detailFormatter	data-detail-formatter	Function	function(index, row, element){ return '';}	Prerequisite: detailView is set to true and the display of detail view is enabled. - Used to format the detail view - Returns a string, which is directly added to the cell (a certain grid) of the detail view through the third parameter element, where element is the jQuery element of the target cell
searchAlign	data-search-align	String	right	The position of the search box, default right (rightmost), optional left
buttonsAlign	data-buttons-align	String	right	The position of the toolbar button, default right (rightmost) , optional left
toolbarAlign	data-toolbar-align	String	left	Customized The position of the toolbar, default right (rightmost), optional left
paginationVAlign	data-pagination-v-align	String	bottom	The vertical position of the paging bar, the default is bottom (bottom), optional top, both (both top and bottom have paging bars)
paginationHAlign	data-pagination-h-align	String	right	The horizontal position of the paging bar, default right (rightmost), optional left
paginationDetailHAlign	data-pagination-detail-h-align	String	left	if The explanation is too long. For example, paginationDetail is "display the 1st to 8th records, a total of 15 records and display 8 records per page". The default is left (the leftmost), and the optional right
paginationPreText	data-pagination-pre-text	String	‹	Still giving an example, if you have too much content, The rightmost corner of the bottom will display: "‹ 1 2 3 4 5 ›" to select the number of pages. The default is the leftmost symbol, the same as below
paginationNextText	data- pagination-next-text	String	›	Refer to the above item
clickToSelect	data-click -to-select	Boolean	false	The default false is no response. If set to true, when you click somewhere in this row, the checkbox of this row will be automatically selected ( checkbox) or radiobox (radio button)
singleSelect	data-single-select	Boolean	#false	Default is false, set to true to allow the check box to select only one row
toolbar	data-toolbar	String | Node	undefined	jQuery selector, for example: #toolbar, .toolbar , or DOM node
checkboxHeader	data-checkbox-header	Boolean	true	If you have a declaration check box, the select all check box of the header row will be displayed by default. Set it to false to hide it (that is, the first row of the table will not be displayed, and everything from the second row onwards will be displayed)
maintainSelected	data-maintain-selected	Boolean	false	Set to true to maintain the status of the selected row
sortable	data-sortable	Boolean	true	Default true, set to false to disable all Row arrangement (that is, the sorting button will not be displayed in the header of each column. This needs to be declared in th data-sortable="true", written in js but only enabled or not)
slientSort	data-silent-sort	Boolean	true	Prerequisite: sidePagination is set to server (server) - Default true, set to If false, the data will be sorted silently
rowStyle	data-row-style	Function	{}	Changing the format of a row requires two parameters: - row: The data of this row - index: The index of this row Supports classes and css. The usage is as follows: function rowStyle(row, index){ return { classes: 'text-nowrap another-class', css: {"color": "blue", "font-size": "50px"} }; }
rowAttributes	data-row-attributes	Function	{}	Change the Attributes require two parameters: - row: the data of this row - index: the index of this row Supports all custom attributes.
customSearch	data-custom-search	Function	$.noop	Custom search function (Used to replace the built-in search function), one parameter is required: - text: the content you want to search for The usage is as follows: function customSearch(text){ //You must use 'this.data' to filter the data (filter the data, I feel that this word does not need to be translated), do not use 'this.options.data' }
customSort	data-custom-sort	Function	$.noop	Custom sort function (used to replace the built-in sorting function), requires two parameters (you can refer to the previous one): - sortName: the column that needs to be sorted - sortOrder: sorting method Usage: the same as above, Don’t worry, the comments are exactly the same
locale	data-locale	String	undefined	Localization (verb). Localized files must be preloaded to allow fallback (simply put, if the file to be used is not available, you can replace it with something else, such as a substitute on the pitch. If there is no substitute, if someone is injured, the game will not stop. (deprecated), if loaded, it will be in the following order: - First try to load the specified "localization" file - Then '_' (underscore) is written as '-' (dash), and the region The code is capitalized - then the short locale code (e.g. 'fr' instead of 'fr-CA') - and finally the remaining localization file is used (the default is used when there is no file to load ) If the remaining undefined or empty characters are used, the last used file will be used (when no localization file can be loaded, the built-in 'en_US' will be used)
footerStyle	data-footer-style	Function	{}	Changing the footer format requires two parameters: - row: the data of this row - index: the index of this row Supports classes and css, the usage is as follows: function rowStyle(value, row, index){ return { css: { "font-weight": "bold" } }; }

---

##Column options

Defined in the jQuery.fn.bootstrapTable.columnDefaults file

footerFormatterdata-footer-formatterFunctionundefinedThe object that requires this column.​ sorterdata-sorterFunctionundefinedCustom sorting function, to implement local sorting, requires two parameters: sortNamedata-sort-nameStringundefinedExcept for the header The default sort-name or the field name of the column, you can also use a customized sort-name## cellStyledata-cell-styleFunctionundefinedTo change the display style (style) in a certain cell, three functions are required: function cellStyle(value, row, index, field) { return { classes: 'text-nowrap another-class', css: {"color": "blue", "font-size": "50px"} }; }BooleantrueThe default is true, which means this column of data Can be queriedsearchFormatterdata-search-formatterBooleantrueDefault true, Can use formatted data queryescapedata-escapeBooleanfalse jump By inserting the string in HTML, replace the special characters (no commas in the following symbols): &, 95ec6993dc754240360e28e0de8de30a, ", `, '

---

Events

定义事件的格式：

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

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

Name	Attribute	Type	Default value	Function description
radio	data-radio	Boolean	false	The default false is not to display the radio (radio button), if set to true Display, the radio width is fixed
checkbox	data-checkbox	Boolean	#false	Default false does not display the checkbox (checkbox), set to true to display, the width of each column of the checkbox has been fixed
field	data-field	String	undefined	is the field name of each column, not the name displayed in the table header. You can assign a value to it through this field name, which is equivalent to the key and is unique in the table
title	data-title	String	undefined	This is the name displayed in the header, it is not unique. If you like, you can set all headers to the same name
titleTooltip	data-title-tooltip	String	undefined	When hovering over a control, a prompt appears - Refer to Bootstrap Tooltip plugin
class	class/data-class	String	undefined	Nothing to say, just class
rowspan	rowspan/data-rowspan	Number	undefined	The number of rows occupied by each cell
colspan	colspan/data-colspan	Number	undefined	The number of columns occupied by each cell
align	data-align	String	undefined	The alignment of data in each cell includes: left (left), right (right), center (center)
halign	data-halign	String	undefined	The alignment of table header (table header) includes: left (left), right (right) , center (center)
falign	data-falign	String	undefined	table footer（ Table foot, just translate it like this, willfully, in fact, you can translate it casually, just know it) The alignment methods are: left (left), right (right), center (center)
valign	data-valign	String	undefined	The alignment of each grid of data includes: top (top), middle (centered) ), bottom (bottom)
width	data-width	Number (unit: px or %)	undefined	The width of each column. - If there is no custom width, the width will adapt according to the width of the content. - If the table is left responsive or the set width is smaller than the width of the content, then the width will still be adaptive (min-width or max-width can be used in class or other attributes). - You can also use "%" as the unit, in this case, the bootstapTable will be divided by percentages. If you want to use "pixels (pixel value)", you can just write numbers (as long as you don't add "%", the unit defaults to "px" , if you don’t mind it, or if you want it to be clearer, you can also add "px")
sortable	data-sortable	Boolean	false	The default is false and it will be displayed by default. If set to true, it will be sorted
order	data-order	String	asc	The default sorting method is "asc (ascending order)", which can also be set to "desc (descending order)". - Use it in conjunction with the above, otherwise it won't be sorted. What else do you think about lifting and lowering.
visible	data-visible	Boolean	true	The default is true to display this column, set If false, the column will be hidden.                          - It is still very useful, for example, hiding the custom index column, which will be messed up after sorting by a certain attribute, you can read the index of a certain row to assign the value
cardVisible	data-card-visible	Boolean	true	The default is true to display this column, and set it to false to hide it.
switchable	data-switchable	Boolean	true	The default is true to display this column, set False disables the column item's tab.
clickToSelect	data-click-to-select	Boolean	true	Default true does not respond , set to false, when you click somewhere in this row, the checkbox (checkbox) or radiobox (radio button) of this row will not be automatically selected
formatter	data-formatter	Function	undefined	An object that requires this column. The data conversion function of a certain grid requires three parameters: -value: field (field name) -row: row data -index: row (index) index
				​ ​ The data conversion function of a certain grid requires one parameter: ​ ​ ​ ​ -data: an array of all row data ​ The function needs to return (return) the format of the string to be displayed in a certain cell of the footer, and also include the content
events	data-events	Object	undefined	When a certain grid uses the formatter function, the event listener will respond and requires four parameters:    —event: jQuery event (refer to Events). -Value: Field name -row: line data - Index: The line of this line for example: & lt; th .. data -events = "operateEvent" & gt; var operateEvents = {'click .like': function (e, value, row, index) {}};
				Field names
				the default sort-name but the field name of the column to be used. 0bbd5cc33b622ada7b9ba1b438e60276abc54bdf357c58b8a65c66d7c19c8e4d1140d36329ec37a2cc24d42c7229b69747a, but the content in the html code is arranged: abc
			# Supports classes and css, usage is as follows:	searchable data-searchable

onUncheckuncheck.bs.tablerow, $elementTriggered when this row is unselected (uncheck), the required parameters are as follows: onCheckAllcheck-all.bs.tablerowsTriggered when all rows are selected, the required parameters are as follows:     uncheck-all.bs.tableTriggered when certain rows (multiple rows, rows) are selected (check), the required parameters are as follows:           rowsWhen unchecking some rows ( Triggered when multiple lines, rows), the required parameters are as follows: ## on #dataTriggered when all data is loadedonLoadErrorload-error.bs.tablestatus, res Triggered when an error occurs while loading some dataonColumnSwitchcolumn-switch.bs.tablefield, checked Triggered when a column changes the visible statusonColumnSearchcolumn-search.bs.tablefield, textTriggered when a column is queriedonPageChangepage-change.bs.tablenumber, sizeTriggered when the number of data items displayed on this page is changed or the page number is changedonSearchsearch.bs.table textTriggered when querying this tableonToggletoggle.bs.tablecardView Fired when the view of the table is changedonPreBodypre-body.bs.tabledataWhen 26e624a08e787224f4286a80ac33e6ae Triggers before the content in is displayedonPostBodypost-body.bs.tabledataIt will be triggered when the content in 92cee25da80fac49f6fb6eec5fd2c22aca745a59da05f784b8811374296574e1 is loaded or defined in the DOM you are usingonPostHeader post-header.bs.tablenoneTriggered when the content in ae20bdd317918ca68efdc799512a9b397943277d65306330563feb42dc8c705a is loaded or defined in the DOM you are usingonExpandRowexpand-row.bs.tableindex, row, $detailWhen viewing the detailed view (click to view detail icon)onCollapseRowcollapse-row.bs.tableindex, rowis triggered when detail is closed Triggered when view (click the icon to view details again) onRefreshOptionsrefresh-options.bs.tableoptions Triggered after refreshing items or before initializing the table (including destruction and re-initialization)##Fired when the view of the table is resetonRefresh                                                                                                 refresh.bs.tableparamsWhen you click the refresh button (refresh, not the browser, but the upper right corner of the table Triggered after the refresh button)

---

Methods

#Define the syntax of method response $('#table').bootstrapTable(' method', parameter);

事件名	定义在jQuery中的事件名	参数	作用描述
onAll	all.bs.table	name, args	当所有触发器被触发时都执行此函数，就是所有的事件都会触发该事件，参数包括：                - name：事件名          - args：事件的数据
onClickRow	click-row.bs.table	row, $element, field	当单击此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为单击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）：                - row：哪一行（从0开始）            - $element：该行（tr）              - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名
onDblClickRow	dbl-click-row.bs.table	row, $element, field	和上面差不多，当双击（666）此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为双击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）：                - row：哪一行（从0开始）            - $element：该行（tr）              - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名
onClickCell	click-cell.bs.table	field, value, row, $element	当单击某一格，就会触发该事件，所需参数如下：                - field：此格所在列的字段名            - value：此格的数据              - $element：此行的此列，就是此格（td）
onDblClickCell	dbl-click-cell.bs.table	field, value, row, $element	当双击某一格，就会触发该事件，所需参数如下：                - field：此格所在列的字段名            - value：此格的数据              - $element：此行的此列，就是此格（td）
onSort	sort.bs.table	name, order	当对某列进行排序时触发该事件，所需参数如下：                - name：所排序的列的字段名   - order: The order
onCheck	check.bs.table	row, $element	when selected ( Triggered when checking) this row, the required parameters are as follows: - row: the field name of the selected row - $element: the DOM element of this row
			- row : The field name of the deselected row        - $element: The DOM element of this row
			#onUncheckAll
rows	Triggered when all rows are unselected, the required parameters are as follows:                                                                                                                                       . : An array of field names of the previously or previously selected rows		onCheckSome
# Array		onUncheckSome	uncheck-some.bs.table
-s: the field name of the line name selected by Previously before or last time
onResetView	reset-view.bs.table

##removeByUniqueId-Remove a certain row of data (set the id of a certain row)$table.bootstrapTable('removeByUniqueId', 1);The following 1 is the ID of the row you want to remove insertRowparamsAdd a new row, the required parameters are as follows:$table.bootstrapTable(' insertRow', {index: 1, row: row}); ##updateRow - index: the index of the row to be updated - Please check: updateByUniqueId - id: What do you want to update? The id of the row (unique), (as long as you are willing, change whichever one you want to change) - Please see: ##showRowparamsShow specific rows, The required parameters include at least one of the following: - uniqueId: the id of that row showRow/hideRowparams - id: the index of the row to be hidden ##mergeCellsoptionsMerge~ (merge multiple cells into one), the required parameters are as follows:mergeCellsupdateCellparamsUpdate a certain cell of data, the required parameters are as follows: - field: the field name of the column refreshparams Refresh server data: Secretly (<_<) refreshoptionsrefreshOptionstextresetSearchnone Show loading... - Please check: none Hide loading... - Please check: none Select all rows of the current page$table.bootstrapTable('checkAll');checkAll/uncheckAllnoneUnselect all rows on the current page$table.bootstrapTable('uncheckAll');checkAll/uncheckAllInverse selection, it’s not difficult to understandSelect a row, the index starts from 0- Please check: check/uncheck##showColumnfield Show specific columns$table.bootstrapTable('showColumn', 'name');hideColumnfieldHide specific columns$table.bootstrapTable('hideColumn', 'name');getHiddenColumns-Get all hidden columns$ table.bootstrapTable('getHiddenColumns');getVisibleColumns-Get all displayed columns$table.bootstrapTable ('getVisibleColumns');scrollTovalueScroll...to which position, the unit is 'px', if set to 'bottom ', Whoosh, congratulations, you have reached the end of the table$table.bootstrapTable('scrollTo', 0);getScrollPositionnoneGet the current scroll position, you know the unit is 'px'$table.bootstrapTable('getScrollPosition'); filterBynone can only be used on the client side (client-side, relative to server-side) to filter the data in the table ##selectPagepageJump to a specific page$table.bootstrapTable('selectPage', 1);prevPagenoneJump to the previous page$table.bootstrapTable('prevPage');nextPagenoneJump to the next page$table.bootstrapTable('nextPage');togglePaginationnoneIf you are short of words, please see the example paper $table.bootstrapTable('togglePagination');toggleViewnone Change View$table.bootstrapTable('toggleView'); expandRowindexUsable conditions: detail view is set to true, otherwise the view function cannot be used, and this is useless - Please check: collapseRowindexAvailable conditions: detail view setting In order to be true - Please see: expandAllRows is subtableUsable conditions: detail view is set to true$table.bootstrapTable('expandAllRows'); collapseAllRowsis subtableUsable conditions: detail view is set to true$table.bootstrapTable ('collapseAllRows');

---

本地化，切换为另一种语言(Localizations)

默认显示英文，如果想使用中文，首先引入：

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

然后是三种声明使用的方法（个人只使用第二、三种），如下：

第一种：

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

第二种：

<table data-toggle="table" data-locale="zh-CN"></table>

第三种：

$('table').bootstrapTable({locale:'zh-CN'});

---

以下说明除了数字外均为中文默认显示，本来不用写的，只要引入就显示中文了

Method name	Parameters	Description	Example
getOptions	none	Return the object of each item	$table.bootstrapTable('getOptions'); - Please check: getOptions
getSelections	none	Returns the selected rows. When no rows are selected, an empty array is returned (but it is not undefined or null, it is the length. An empty array of 0, so you can determine whether the length is greater than 0 to determine whether a row is selected)	$table.bootstrapTable('getSelections'); - Please check: getSelections
getAllSelections	none	Return all selected rows (in the original text: contain search or filter, which is actually the filtered data you selected ), when no row is selected, an empty array is returned	$table.bootstrapTable('getAllSelections'); - Please see: getAllSelections
showAllColumns	none	Show all columns	$table.bootstrapTable('showAllColumns'); - Just show all columns, nothing Sayable
hideAllColumns	none	Hide all columns	$table.bootstrapTable('hideAllColumns');        - That is to hide all columns
getData	useCurrentPage	Get the data of the loaded table, if you set the use of the current page data (useCurrentPage), then return the data of the current page	$table.bootstrapTable('getData'); - Please check: getData
getRowByUniqueId	id	Get the data of a row you want (set the id of a row)	$table.bootstrapTable('getRowByUniqueId', 1) ;The following 1 is the ID of the row you want - Please check: getRowByUniqueId
load	data	Load data into the table, the original data will be removed	$table.bootstrapTable('load', data); - Please see: load
append	data	Append data after the last line	$table.bootstrapTable('append', data);data can be an array - Please check: append
prepend	data	It is also appended, just before the first line	$table.bootstrapTable('prepend', data);data can be an array - Please check: prepend
remove	params	Remove one or more rows of data you selected	$table.bootstrapTable(' remove', {field: 'id', values: ids}); - id: the field of the row (rows, one or more rows) that needs to be removed - values: the row to be removed Array of - Please view: remove
removeAll	-	Remove all data in the table	$table.bootstrapTable('removeAll'); - Please see: removeAll
			- Please check: removeByUniqueId
		- index: Where do you want to insert (as long as you are willing, you can insert wherever you want, insert whoever you want) - row: The data you want to insert	- Please see: insertRow
params	Update row data, the required parameters are as follows:	- row: the new data you want to change $table .bootstrapTable('updateRow', {index: 1, row: row});	updateRow
params	Update a row of data, the required parameters are as follows:	- row: the new data you want to change $table.bootstrapTable('updateByUniqueId', {id: 3, row: row});	updateByUniqueId
	- id: the index of the row to be displayed	$table.bootstrapTable('showRow ', {index:1}); - Please view:	##hideRow
Hide a specific row. The required parameters include at least one of the following:	- uniqueId: the id of that row	$table.bootstrapTable('hideRow', {index:1}); - Please check: showRow/hideRow
getRowsHidden	boolean	Get the hidden rows (there are many official words, but in fact, the previous sentence is the summary)	$table.bootstrapTable( 'getRowsHidden');
		- Index: The index of the grid to be merged (INDEX) - Field: The field name of the list - rowspan: ##$table.bootstrapTable('mergeCells', {index: 1, field: 'name', colspan: 2, rowspan: 3}); - Please view:
	- index: The index of the row where the cell to be merged is located (index)	- value: the new data to be replaced You can also set {reinit:false} to disable re-initialization of the table $table.bootstrapTable('updateCell',{index:index,field:'id',value:value});
	- You can set {silent:true} to	Refresh - Set {url:newUrl,pageNumber:pageNumber,pageSize:pageSize} to change the requested address, page number, and number of items displayed on each page - You can set {query:{foo:'bar'}} to increase Specific parameters $table.bootstrapTable('refresh'); - Please see:	##refreshOptions
Let’s see an example	- Please view:		resetSearch
Reset the search text (text)	- Please see:		##showLoading
	showLoading/hideLoading		hideLoading
	showLoading/hideLoading		checkAll
	- Please check:		uncheckAll
	- Please check:		##checkInvertnone
$ table.bootstrapTable('checkInvert');		check	index
$table.bootstrapTable('check', 1);
uncheck	index	Unselect a row, the index is from 0 Start	$table.bootstrapTable('uncheck', 1); - Please check: check/uncheck
checkBy	params	Select a row through an array. The required parameters are as follows: - field: the name of the field to be selected - values: the values ​​(array) to be selected	No official, ah, there is an example: - $("#table").bootstrapTable("checkBy", { field:"field_name", values:["value1","value2"," value3"]}); - Please check: checkBy/uncheckBy
uncheckBy	params	Pass array To select a row, the required parameters are as follows: - field: the field name to be deselected - values: the values ​​(array) to be deselected	$("#table") .bootstrapTable("uncheckBy", { field:"field_name", values:["value1","value2","value3"]}); - Please check: checkBy/uncheckBy
resetView	params	Change the style of the table, such as changing the height of the table	$table.bootstrapTable('resetView '); - Please check: resetView
resetWidth	none	Automatically change the header and footer (Translated into feet, arbitrary) width to adapt to the width of each column	$table.bootstrapTable('resetWidth');
destroy	none	Destroy Form A! T! T! Ah! C! K!	$table.bootstrapTable('destroy'); - Please view: destroy
			- Please check: showColumn/hideCoulumn
			- Please check: showColumn/hideCoulumn
			- Please check: scrollTo
		For example: - You can set {age:10} to only display data with age 10 - Not only single, you can also fly in pairs, or even multiple people, set {age: 10, hairColor: ["blue", "red", "green"]}, so that you get a group of 10-year-olds with hair colors of Blue, red, green...data	$table.bootstrapTable('filterBy', { id: [1, 2, 3] }); - Please check: filterBy
			- Please view: selectPage/prevPage/nextPage
			- Please check: selectPage/prevPage/nextPage
			- Please check: selectPage/prevPage/nextPage
			- Please view: togglePagination
			- Please view: toggleView
		- Expand the detailed view of this column through the parameter index	expandRow-collapseRow
		- Close the detailed view of this column through the parameter index	expandRow-collapseRow
There are changes in the new version (originally "expandAllRow"), the same as below Thanks @zhq449681061		- Expand all columns Detailed view	- Refer to the above example, the above is the view of expanding (collapsing) a certain row, this is the view of all rows
		- Close the detailed view of all columns	- Refer to the above

名称	参数	默认	说明
formatLoadingMessage	-	'Loading, please wait…'	“加载中，请等待……”
formatRecordsPerPage	pageNumber	'%s records per page'	“每页显示 15  条记录”
formatShowingRows	pageFrom, pageTo, totalRows	'Showing %s to %s of %s rows'	“显示第 1 到第 15 条记录”
formatDetailPagination	totalRows	'Showing %s rows'	“总共 15 条记录”
formatSearch	-	'Search'	“搜索”（占位符）
formatNoMatches	-	'No matching records found'	“没有找到匹配的记录”
formatRefresh	-	'Refresh'	“刷新”（鼠标悬浮显示的文字，下同）
formatToggle	-	'Toggle'	“切换”
formatColumns	-	'Columns'	“列”

　　有错请留言，看到后会及时更改，如果像那种翻译的行写成列或漏字等低级错误，看英文名称就知道有没有错了，主要就是为了让你们知道怎么用，会持续检查哪有误、漏译，如果认为有译得不妥的地方，也可以留言一起讨论，谢谢

The above is the detailed content of Bootstrap Table API Chinese version (translation document). For more information, please follow other related articles on the PHP Chinese website!