調(diào)用 BootStrap Table 方法的語法：

$('#table').bootstrapTable('method', parameter);

例如：

$('#my_table').bootstrapTable('refreshOptions', { data: tabledata }); 　　//刷新表格??tabledata 為數(shù)據(jù)

$("#my_table").bootstrapTable('removeAll');　　//清空表格數(shù)據(jù)

?$('#my_table').bootstrapTable('destroy');? ? ? ? ? ?//銷毀表格數(shù)據(jù)

$("#my_table").bootstrapTable('refresh')?　　　//刷新表格

$("#my_table").bootstrapTable('getSelections'); //獲取選中數(shù)據(jù)?

調(diào)用BootStrap Table事件的方法：

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

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

例如：

$('#table').on('click-row.bs.table',?function (e, arg1, arg2, ...) {　

})

一、方? 法

方法名	參數(shù)	描述
getOptions	none	獲取表格的參數(shù)
getSelections	none	獲取當(dāng)前被選中的行
getAllSelections	none	獲取當(dāng)前被選中的行數(shù)據(jù)，包含搜索和過濾前的
showAllColumns	none	展示所有列
hideAllColumns	none	隱藏所有列
getData	useCurrentPage	獲取當(dāng)前表格中加載的數(shù)據(jù)，參數(shù)useCurrentPage為true 將返回當(dāng)前頁內(nèi)的數(shù)據(jù)
getRowByUniqueId	id	根據(jù)唯一ID獲取行數(shù)據(jù)
load	data	將新數(shù)據(jù)加載到表格中
append	data	將新數(shù)據(jù)追加到表格末尾
prepend	data	將新數(shù)據(jù)插入到表格頭部
remove	params	從表格中移除列名為指定值的數(shù)據(jù)，包含2個參數(shù) field: 列名 values: 列名取值數(shù)組
removeAll	-	移除表格中的所有數(shù)據(jù)
removeByUniqueId	id	根據(jù)唯一ID移除行數(shù)據(jù)
insertRow	params	插入多個新行到指定位置，每一行包含以下參數(shù) index:要插入到行的索引 row: 要插入的行數(shù)據(jù)
updateRow	params	更新指定的行，每一行包含以下參數(shù) index:要插入到行的索引 row: 要插入的行數(shù)據(jù)
updateByUniqueId	params	根據(jù)唯一ID更新行數(shù)據(jù)每一行包含以下參數(shù) id: 唯一ID row: 新的行數(shù)據(jù)
showRow	params	顯示指定行，至少需包含以下任意參數(shù) index:行索引uniqueId:行唯一ID
hideRow	params	隱藏指定行，至少需包含以下任意參數(shù) index:行索引
getHiddenRows	boolean	獲取所有隱藏的行數(shù)據(jù)，當(dāng)參數(shù)為 true 會將隱藏行進(jìn)行顯示
mergeCells	options	合并多個單元格，包含以下參數(shù) index: 行索引 field: 列名稱 rowspan: 合并多少行 colspan: 合并多少列
updateCell	params	更新一個單元格數(shù)據(jù)，包含以下參數(shù) index: 行索引 field: 列名稱 value: 新列值 禁止表格重新初始化需添加參數(shù){reinit: false}
refresh	params	重新加載遠(yuǎn)程數(shù)據(jù)，可以設(shè)置 {silent: true}靜默加載數(shù)據(jù)，同時設(shè)置 {url: newUrl, pageNumber: pageNumber, pageSize: pageSize} 改變數(shù)據(jù)請求地址和分頁參數(shù)，請求參數(shù)通過 {query: {foo: 'bar'}} 修改
refreshOptions	options	刷新表格的參數(shù)
resetSearch	text	設(shè)置搜索內(nèi)容
showLoading	none	顯示數(shù)據(jù)加載狀態(tài)提示
hideLoading	none	隱藏數(shù)據(jù)加載狀態(tài)提示
checkAll	none	選中當(dāng)前頁的所有行
uncheckAll	none	取消選中當(dāng)前頁的所有行
checkInvert	none	對當(dāng)前頁內(nèi)行數(shù)據(jù)進(jìn)行反選，會觸發(fā)onCheckSome 和 onUncheckSome 事件
check	index	選中某一行，索引從0開始
uncheck	index	取消選中某一行，索引從0開始
checkBy	params	根據(jù)列名選則行數(shù)據(jù) field: 列名稱 values:列取值數(shù)組 $("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})
uncheckBy	params	根據(jù)列名取消選中行數(shù)據(jù) field: 列名稱 values:列取值數(shù)組 $("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]})
resetView	params	重置表格視圖
resetWidth	none	重新設(shè)置列頭和列尾的寬度去適應(yīng)當(dāng)前列的寬度
destroy	none	銷毀表格
showColumn	field	顯示指定列
hideColumn	field	隱藏指定列
getHiddenColumns	-	獲取隱藏的列
getVisibleColumns	-	獲取可見的列
scrollTo	value	使?jié)L動條滾動到指定位置，單位像素，'bottom' 滾動條滾動到底
getScrollPosition	none	獲取當(dāng)前滾動條的位置，單位像素
filterBy	params	在client模式下，對表格數(shù)據(jù)進(jìn)行過濾，語法示例如下 {age: 10, hairColor: ["blue", "red", "green"]}
selectPage	page	跳轉(zhuǎn)到指定頁
prevPage	none	上一頁
nextPage	none	下一頁
togglePagination	none	切換分頁參數(shù)
toggleView	none	切換 card/table 視圖
expandRow	index	當(dāng)詳細(xì)視圖設(shè)置為True時，展開指定索引的行的詳細(xì)視圖
collapseRow	index	當(dāng)詳細(xì)視圖設(shè)置為True時，收起指定索引的行的詳細(xì)視圖
expandAllRows	is subtable	當(dāng)詳細(xì)視圖設(shè)置為True時，展開所有行的詳細(xì)視圖
collapseAllRows	is subtable	當(dāng)詳細(xì)視圖設(shè)置為True時，收起所有行的詳細(xì)視圖
updateCellById	params	根據(jù)唯一ID更新指定單元格，包含以下參數(shù) id: 唯一ID field: 要更新的列的列名稱 value: 新值

二、事? ? 件

事件名稱	JQuery事件	參數(shù)	描述
onAll	all.bs.table	name, args	任何事件觸發(fā)都會同時觸發(fā)該事件, 包含2個參數(shù) name: 事件名稱 args: 事件參數(shù)
onClickRow	click-row.bs.table	row, $element, field	當(dāng)點擊某一行時觸發(fā)，包含3個參數(shù)? row: 點擊行的數(shù)據(jù) $element: 對應(yīng)的<tr>元素 field:所點擊的單元格對應(yīng)的列名稱
onDblClickRow	dbl-click-row.bs.table	row, $element, field	當(dāng)雙擊擊某一行時觸發(fā)，包含3個參數(shù)? row: 點擊行的數(shù)據(jù) $element: 對應(yīng)的<tr>元素 field:所點擊的單元格對應(yīng)的列名稱
onClickCell	click-cell.bs.table	field, value, row, $element	當(dāng)點擊某一個單元格時觸發(fā)，包含4個參數(shù) field: 所點擊的單元格對應(yīng)的列名稱? value: 所點擊的單元格對應(yīng)列的值 row:單元格所在行數(shù)據(jù) $element: 對應(yīng)的<td>元素
onDblClickCell	dbl-click-cell.bs.table	field, value, row, $element	當(dāng)雙擊某一個單元格時觸發(fā)，包含4個參數(shù) field: 所點擊的單元格對應(yīng)的列名稱? value: 所點擊的單元格對應(yīng)列的值 row:單元格所在行數(shù)據(jù) $element: 對應(yīng)的<td>元素
onSort	sort.bs.table	name, order	當(dāng)用戶點擊列頭對某一列進(jìn)行排序時觸發(fā)，包含2個參數(shù) name: 排序的列名稱 order: 排序方式
onCheck	check.bs.table	row, $element	當(dāng)用戶選中一行時觸發(fā)，包含2個參數(shù) row: 所選中行的行數(shù)據(jù) $element: 選中的<input>元素
onUncheck	uncheck.bs.table	row, $element	當(dāng)用戶取消選中一行時觸發(fā)，包含2個參數(shù) row: 所取消選中的行數(shù)據(jù) $element: 選中的<input>元素
onCheckAll	check-all.bs.table	rows	當(dāng)用戶點擊全選框時觸發(fā)，包含1個參數(shù)? rows: 選中的行數(shù)據(jù)數(shù)組
onUncheckAll	uncheck-all.bs.table	rows	當(dāng)用戶點擊全選框取消選擇時觸發(fā)，包含1個參數(shù)? rows: 取消選中的行數(shù)據(jù)數(shù)組
onCheckSome	check-some.bs.table	rows	當(dāng)用戶選中某些行時觸發(fā)，包含1個參數(shù)? rows: 選中的行數(shù)據(jù)數(shù)組
onUncheckSome	uncheck-some.bs.table	rows	當(dāng)用戶取消選中某些行時觸發(fā)，包含1個參數(shù)? rows: 取消選中的行數(shù)據(jù)數(shù)組
onLoadSuccess	load-success.bs.table	data	當(dāng)遠(yuǎn)程數(shù)據(jù)被加載完成后觸發(fā)
onLoadError	load-error.bs.table	status, res	當(dāng)遠(yuǎn)程數(shù)據(jù)被加載出錯后觸發(fā)
onColumnSwitch	column-switch.bs.table	field, checked	當(dāng)切換列的顯示狀態(tài)（可見或不可見）時觸發(fā)
onColumnSearch	column-search.bs.table	field, text	對列內(nèi)容進(jìn)行搜索時觸發(fā)
onPageChange	page-change.bs.table	number, size	當(dāng)切換每頁條數(shù)時觸發(fā)
onSearch	search.bs.table	text	當(dāng)對表格內(nèi)容進(jìn)行搜索時觸發(fā)
onToggle	toggle.bs.table	cardView	當(dāng)切換表格的顯示視圖時觸發(fā)
onPreBody	pre-body.bs.table	data	在對表格體進(jìn)行渲染前觸發(fā)
onPostBody	post-body.bs.table	data	在表格體渲染完成，并在 DOM 中可見后觸發(fā)
onPostHeader	post-header.bs.table	none	在表格列頭渲染完成，并在 DOM 中可見后觸發(fā)
onExpandRow	expand-row.bs.table	index, row, $detail	當(dāng)點擊詳情按鈕展開詳情視圖時觸發(fā)
onCollapseRow	collapse-row.bs.table	index, row	當(dāng)點擊關(guān)閉詳情按鈕收起詳情視圖時觸發(fā)
onRefreshOptions	refresh-options.bs.table	options	當(dāng)刷新表格選項時，在銷毀當(dāng)前表格并重新初始化新表格之前觸發(fā)
onResetView	reset-view.bs.table	?	當(dāng)重置表格視圖時觸發(fā)
onRefresh	refresh.bs.table	params	當(dāng)點擊刷新按鈕對表格進(jìn)行刷新時觸發(fā)
onScrollBody	scroll-body.bs.table	?	當(dāng)對表格體進(jìn)行滾動時觸發(fā)

?

?三、配? ??置

　　前往：?基于bootstrap table配置的二次封裝

?

參考api:https://bootstrap-table.com/docs/api/table-options/#height

轉(zhuǎn)載于:https://www.cnblogs.com/-hao/p/10579576.html

總結(jié)

以上是生活随笔為你收集整理的Bootstrap table方法，Bootstrap table事件，配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。