Bootstrap-Table事件和方法

本文章為整理之后的，僅供參考

官方文檔地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

事件的調用方法，前面有過案例

$('#table').bootstrapTable({
    data: "",
    uniqueId: "id",          
    locale: "zh-CN",   
    columns: [],
    .......
});

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

 

 方法調用語法：

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

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

 多語言用法：

在頁面中引入所有需要的本地腳本

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

然后通過JavaScript對本地腳本進行切換

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

 原文鏈接：https://blog.csdn.net/pengjunlee/article/details/80659747

 

 

 

 博主使用到的小技巧都會更新上來，下期更精彩。