調用 BootStrap Table 方法的語法：html
$('#table').bootstrapTable('method', parameter);bootstrap
例如：api
$('#my_table').bootstrapTable('refreshOptions', { data: tabledata }); //刷新表格 tabledata 爲數據數組
$("#my_table").bootstrapTable('removeAll'); //清空表格數據app
$('#my_table').bootstrapTable('destroy'); //銷燬表格數據ide
$("#my_table").bootstrapTable('refresh') //刷新表格post
$("#my_table").bootstrapTable('getSelections'); //獲取選中數據 url
調用BootStrap Table事件的方法：spa
$('#table').bootstrapTable({onEventName: function (arg1, arg2, ...){ } })htm
$('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) { })
例如：
$('#table').on('click-row.bs.table', function (e, arg1, arg2, ...) {
})
1、方 法
| 方法名 | 參數 | 描述 |
| getOptions | none | 獲取表格的參數 |
| getSelections | none | 獲取當前被選中的行 |
| getAllSelections | none | 獲取當前被選中的行數據，包含搜索和過濾前的 |
| showAllColumns | none | 展現全部列 |
| hideAllColumns | none | 隱藏全部列 |
| getData | useCurrentPage | 獲取當前表格中加載的數據，參數useCurrentPage爲true 將返回當前頁內的數據 |
| getRowByUniqueId | id | 根據惟一ID獲取行數據 |
| load | data | 將新數據加載到表格中 |
| append | data | 將新數據追加到表格末尾 |
| prepend | data | 將新數據插入到表格頭部 |
| remove | params | 從表格中移除列名爲指定值的數據，包含2個參數 field: 列名 values: 列名取值數組 |
| removeAll | - | 移除表格中的全部數據 |
| removeByUniqueId | id | 根據惟一ID移除行數據 |
| insertRow | params | 插入多個新行到指定位置，每一行包含如下參數 index:要插入到行的索引 row: 要插入的行數據 |
| updateRow | params | 更新指定的行，每一行包含如下參數 index:要插入到行的索引 row: 要插入的行數據 |
| updateByUniqueId | params | 根據惟一ID更新行數據每一行包含如下參數 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: 新值 |
2、事 件
| 事件名稱 | 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 | 當刷新表格選項時，在銷燬當前表格並從新初始化新表格以前觸發 |
| onResetView | reset-view.bs.table | 當重置表格視圖時觸發 | |
| onRefresh | refresh.bs.table | params | 當點擊刷新按鈕對錶格進行刷新時觸發 |
| onScrollBody | scroll-body.bs.table | 當對錶格體進行滾動時觸發 |
三、配 置
參考api:https://bootstrap-table.com/docs/api/table-options/#height