Bootstrap table方法，Bootstrap table事件，配置

谁践踏了优雅 2021-06-22 15:38 724阅读 0赞

调用 BootStrap Table 方法的语法：

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

例如：

$('\#my\_table').bootstrapTable('refreshOptions', \{ data: tabledata \}); 　　//刷新表格  tabledata 为数据

$("\#my\_table").bootstrapTable('removeAll');　　//清空表格数据

$('\#my\_table').bootstrapTable('destroy');           //销毁表格数据

$("\#my\_table").bootstrapTable('refresh') 　　　//刷新表格

$("\#my\_table").bootstrapTable('getSelections'); //获取选中数据

调用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, ...) \{

\})

**一、方  法**

<table> 
 <tbody> 
 <tr> 
 <td>方法名</td> 
 <td>参数</td> 
 <td>描述</td> 
 </tr> 
 <tr> 
 <td>getOptions</td> 
 <td>none</td> 
 <td>获取表格的参数</td> 
 </tr> 
 <tr> 
 <td>getSelections</td> 
 <td>none</td> 
 <td>获取当前被选中的行</td> 
 </tr> 
 <tr> 
 <td>getAllSelections</td> 
 <td>none</td> 
 <td>获取当前被选中的行数据，包含搜索和过滤前的</td> 
 </tr> 
 <tr> 
 <td>showAllColumns</td> 
 <td>none</td> 
 <td>展示所有列</td> 
 </tr> 
 <tr> 
 <td>hideAllColumns</td> 
 <td>none</td> 
 <td>隐藏所有列</td> 
 </tr> 
 <tr> 
 <td>getData</td> 
 <td>useCurrentPage</td> 
 <td>获取当前表格中加载的数据，参数useCurrentPage为true 将返回当前页内的数据</td> 
 </tr> 
 <tr> 
 <td>getRowByUniqueId</td> 
 <td>id</td> 
 <td>根据唯一ID获取行数据</td> 
 </tr> 
 <tr> 
 <td>load</td> 
 <td>data</td> 
 <td>将新数据加载到表格中</td> 
 </tr> 
 <tr> 
 <td>append</td> 
 <td>data</td> 
 <td>将新数据追加到表格末尾</td> 
 </tr> 
 <tr> 
 <td>prepend</td> 
 <td>data</td> 
 <td>将新数据插入到表格头部</td> 
 </tr> 
 <tr> 
 <td>remove</td> 
 <td>params</td> 
 <td>从表格中移除列名为指定值的数据，包含2个参数 field: 列名 values: 列名取值数组</td> 
 </tr> 
 <tr> 
 <td>removeAll</td> 
 <td>-</td> 
 <td>移除表格中的所有数据</td> 
 </tr> 
 <tr> 
 <td>removeByUniqueId</td> 
 <td>id</td> 
 <td>根据唯一ID移除行数据</td> 
 </tr> 
 <tr> 
 <td>insertRow</td> 
 <td>params</td> 
 <td>插入多个新行到指定位置，每一行包含以下参数 index:要插入到行的索引 row: 要插入的行数据</td> 
 </tr> 
 <tr> 
 <td>updateRow</td> 
 <td>params</td> 
 <td>更新指定的行，每一行包含以下参数 index:要插入到行的索引 row: 要插入的行数据</td> 
 </tr> 
 <tr> 
 <td>updateByUniqueId</td> 
 <td>params</td> 
 <td>根据唯一ID更新行数据每一行包含以下参数 id: 唯一ID row: 新的行数据</td> 
 </tr> 
 <tr> 
 <td>showRow</td> 
 <td>params</td> 
 <td>显示指定行，至少需包含以下任意参数 index:行索引uniqueId:行唯一ID</td> 
 </tr> 
 <tr> 
 <td>hideRow</td> 
 <td>params</td> 
 <td>隐藏指定行，至少需包含以下任意参数 index:行索引</td> 
 </tr> 
 <tr> 
 <td>getHiddenRows</td> 
 <td>boolean</td> 
 <td>获取所有隐藏的行数据，当参数为 true 会将隐藏行进行显示</td> 
 </tr> 
 <tr> 
 <td>mergeCells</td> 
 <td>options</td> 
 <td>合并多个单元格，包含以下参数 index: 行索引 field: 列名称 rowspan: 合并多少行 colspan: 合并多少列</td> 
 </tr> 
 <tr> 
 <td>updateCell</td> 
 <td>params</td> 
 <td>更新一个单元格数据，包含以下参数 index: 行索引 field: 列名称 value: 新列值 禁止表格重新初始化需添加参数{reinit: false}</td> 
 </tr> 
 <tr> 
 <td>refresh</td> 
 <td>params</td> 
 <td>重新加载远程数据，可以设置 {silent: true}静默加载数据，同时设置 {url: newUrl, pageNumber: pageNumber, pageSize: pageSize} 改变数据请求地址和分页参数，请求参数通过 {query: {foo: 'bar'}} 修改</td> 
 </tr> 
 <tr> 
 <td>refreshOptions</td> 
 <td>options</td> 
 <td>刷新表格的参数</td> 
 </tr> 
 <tr> 
 <td>resetSearch</td> 
 <td>text</td> 
 <td>设置搜索内容</td> 
 </tr> 
 <tr> 
 <td>showLoading</td> 
 <td>none</td> 
 <td>显示数据加载状态提示</td> 
 </tr> 
 <tr> 
 <td>hideLoading</td> 
 <td>none</td> 
 <td>隐藏数据加载状态提示</td> 
 </tr> 
 <tr> 
 <td>checkAll</td> 
 <td>none</td> 
 <td>选中当前页的所有行</td> 
 </tr> 
 <tr> 
 <td>uncheckAll</td> 
 <td>none</td> 
 <td>取消选中当前页的所有行</td> 
 </tr> 
 <tr> 
 <td>checkInvert</td> 
 <td>none</td> 
 <td>对当前页内行数据进行反选，会触发onCheckSome 和 onUncheckSome 事件</td> 
 </tr> 
 <tr> 
 <td>check</td> 
 <td>index</td> 
 <td>选中某一行，索引从0开始</td> 
 </tr> 
 <tr> 
 <td>uncheck</td> 
 <td>index</td> 
 <td>取消选中某一行，索引从0开始</td> 
 </tr> 
 <tr> 
 <td>checkBy</td> 
 <td>params</td> 
 <td>根据列名选则行数据 field: 列名称 values:列取值数组 $("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})</td> 
 </tr> 
 <tr> 
 <td>uncheckBy</td> 
 <td>params</td> 
 <td>根据列名取消选中行数据 field: 列名称 values:列取值数组 $("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]})</td> 
 </tr> 
 <tr> 
 <td>resetView</td> 
 <td>params</td> 
 <td>重置表格视图</td> 
 </tr> 
 <tr> 
 <td>resetWidth</td> 
 <td>none</td> 
 <td>重新设置列头和列尾的宽度去适应当前列的宽度</td> 
 </tr> 
 <tr> 
 <td>destroy</td> 
 <td>none</td> 
 <td>销毁表格</td> 
 </tr> 
 <tr> 
 <td>showColumn</td> 
 <td>field</td> 
 <td>显示指定列</td> 
 </tr> 
 <tr> 
 <td>hideColumn</td> 
 <td>field</td> 
 <td>隐藏指定列</td> 
 </tr> 
 <tr> 
 <td>getHiddenColumns</td> 
 <td>-</td> 
 <td>获取隐藏的列</td> 
 </tr> 
 <tr> 
 <td>getVisibleColumns</td> 
 <td>-</td> 
 <td>获取可见的列</td> 
 </tr> 
 <tr> 
 <td>scrollTo</td> 
 <td>value</td> 
 <td>使滚动条滚动到指定位置，单位像素，'bottom' 滚动条滚动到底</td> 
 </tr> 
 <tr> 
 <td>getScrollPosition</td> 
 <td>none</td> 
 <td>获取当前滚动条的位置，单位像素</td> 
 </tr> 
 <tr> 
 <td>filterBy</td> 
 <td>params</td> 
 <td>在client模式下，对表格数据进行过滤，语法示例如下 {age: 10, hairColor: ["blue", "red", "green"]}</td> 
 </tr> 
 <tr> 
 <td>selectPage</td> 
 <td>page</td> 
 <td>跳转到指定页</td> 
 </tr> 
 <tr> 
 <td>prevPage</td> 
 <td>none</td> 
 <td>上一页</td> 
 </tr> 
 <tr> 
 <td>nextPage</td> 
 <td>none</td> 
 <td>下一页</td> 
 </tr> 
 <tr> 
 <td>togglePagination</td> 
 <td>none</td> 
 <td>切换分页参数</td> 
 </tr> 
 <tr> 
 <td>toggleView</td> 
 <td>none</td> 
 <td>切换 card/table 视图</td> 
 </tr> 
 <tr> 
 <td>expandRow</td> 
 <td>index</td> 
 <td>当详细视图设置为True时，展开指定索引的行的详细视图</td> 
 </tr> 
 <tr> 
 <td>collapseRow</td> 
 <td>index</td> 
 <td>当详细视图设置为True时，收起指定索引的行的详细视图</td> 
 </tr> 
 <tr> 
 <td>expandAllRows</td> 
 <td>is subtable</td> 
 <td>当详细视图设置为True时，展开所有行的详细视图</td> 
 </tr> 
 <tr> 
 <td>collapseAllRows</td> 
 <td>is subtable</td> 
 <td>当详细视图设置为True时，收起所有行的详细视图</td> 
 </tr> 
 <tr> 
 <td>updateCellById</td> 
 <td>params</td> 
 <td>根据唯一ID更新指定单元格，包含以下参数 id: 唯一ID field: 要更新的列的列名称 value: 新值</td> 
 </tr> 
 </tbody> 
</table>

**二、事    件**

<table> 
 <tbody> 
 <tr> 
 <td>事件名称</td> 
 <td>JQuery事件</td> 
 <td>参数</td> 
 <td> 描述 </td> 
 </tr> 
 <tr> 
 <td>onAll</td> 
 <td>all.bs.table</td> 
 <td>name, args</td> 
 <td>任何事件触发都会同时触发该事件, 包含2个参数 name: 事件名称 args: 事件参数</td> 
 </tr> 
 <tr> 
 <td>onClickRow</td> 
 <td>click-row.bs.table</td> 
 <td>row, $element, field</td> 
 <td>当点击某一行时触发，包含3个参数&nbsp; row: 点击行的数据 $element: 对应的&lt;tr&gt;元素 field:所点击的单元格对应的列名称</td> 
 </tr> 
 <tr> 
 <td>onDblClickRow</td> 
 <td>dbl-click-row.bs.table</td> 
 <td>row, $element, field</td> 
 <td>当双击击某一行时触发，包含3个参数&nbsp; row: 点击行的数据 $element: 对应的&lt;tr&gt;元素 field:所点击的单元格对应的列名称</td> 
 </tr> 
 <tr> 
 <td>onClickCell</td> 
 <td>click-cell.bs.table</td> 
 <td>field, value, row, $element</td> 
 <td>当点击某一个单元格时触发，包含4个参数 field: 所点击的单元格对应的列名称&nbsp; value: 所点击的单元格对应列的值 row:单元格所在行数据 $element: 对应的&lt;td&gt;元素</td> 
 </tr> 
 <tr> 
 <td>onDblClickCell</td> 
 <td>dbl-click-cell.bs.table</td> 
 <td>field, value, row, $element</td> 
 <td>当双击某一个单元格时触发，包含4个参数 field: 所点击的单元格对应的列名称&nbsp; value: 所点击的单元格对应列的值 row:单元格所在行数据 $element: 对应的&lt;td&gt;元素</td> 
 </tr> 
 <tr> 
 <td>onSort</td> 
 <td>sort.bs.table</td> 
 <td>name, order</td> 
 <td>当用户点击列头对某一列进行排序时触发，包含2个参数 name: 排序的列名称 order: 排序方式</td> 
 </tr> 
 <tr> 
 <td>onCheck</td> 
 <td>check.bs.table</td> 
 <td>row, $element</td> 
 <td>当用户选中一行时触发，包含2个参数 row: 所选中行的行数据 $element: 选中的&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td>onUncheck</td> 
 <td>uncheck.bs.table</td> 
 <td>row, $element</td> 
 <td>当用户取消选中一行时触发，包含2个参数 row: 所取消选中的行数据 $element: 选中的&lt;input&gt;元素</td> 
 </tr> 
 <tr> 
 <td>onCheckAll</td> 
 <td>check-all.bs.table</td> 
 <td>rows</td> 
 <td>当用户点击全选框时触发，包含1个参数&nbsp; rows: 选中的行数据数组</td> 
 </tr> 
 <tr> 
 <td>onUncheckAll</td> 
 <td>uncheck-all.bs.table</td> 
 <td>rows</td> 
 <td>当用户点击全选框取消选择时触发，包含1个参数&nbsp; rows: 取消选中的行数据数组</td> 
 </tr> 
 <tr> 
 <td>onCheckSome</td> 
 <td>check-some.bs.table</td> 
 <td>rows</td> 
 <td>当用户选中某些行时触发，包含1个参数&nbsp; rows: 选中的行数据数组</td> 
 </tr> 
 <tr> 
 <td>onUncheckSome</td> 
 <td>uncheck-some.bs.table</td> 
 <td>rows</td> 
 <td>当用户取消选中某些行时触发，包含1个参数&nbsp; rows: 取消选中的行数据数组</td> 
 </tr> 
 <tr> 
 <td>onLoadSuccess</td> 
 <td>load-success.bs.table</td> 
 <td>data</td> 
 <td>当远程数据被加载完成后触发</td> 
 </tr> 
 <tr> 
 <td>onLoadError</td> 
 <td>load-error.bs.table</td> 
 <td>status, res</td> 
 <td>当远程数据被加载出错后触发</td> 
 </tr> 
 <tr> 
 <td>onColumnSwitch</td> 
 <td>column-switch.bs.table</td> 
 <td>field, checked</td> 
 <td>当切换列的显示状态（可见或不可见）时触发</td> 
 </tr> 
 <tr> 
 <td>onColumnSearch</td> 
 <td>column-search.bs.table</td> 
 <td>field, text</td> 
 <td>对列内容进行搜索时触发</td> 
 </tr> 
 <tr> 
 <td>onPageChange</td> 
 <td>page-change.bs.table</td> 
 <td>number, size</td> 
 <td>当切换每页条数时触发</td> 
 </tr> 
 <tr> 
 <td>onSearch</td> 
 <td>search.bs.table</td> 
 <td>text</td> 
 <td>当对表格内容进行搜索时触发</td> 
 </tr> 
 <tr> 
 <td>onToggle</td> 
 <td>toggle.bs.table</td> 
 <td>cardView</td> 
 <td>当切换表格的显示视图时触发</td> 
 </tr> 
 <tr> 
 <td>onPreBody</td> 
 <td>pre-body.bs.table</td> 
 <td>data</td> 
 <td>在对表格体进行渲染前触发</td> 
 </tr> 
 <tr> 
 <td>onPostBody</td> 
 <td>post-body.bs.table</td> 
 <td>data</td> 
 <td>在表格体渲染完成，并在 DOM 中可见后触发</td> 
 </tr> 
 <tr> 
 <td>onPostHeader</td> 
 <td>post-header.bs.table</td> 
 <td>none</td> 
 <td>在表格列头渲染完成，并在 DOM 中可见后触发</td> 
 </tr> 
 <tr> 
 <td>onExpandRow</td> 
 <td>expand-row.bs.table</td> 
 <td>index, row, $detail</td> 
 <td>当点击详情按钮展开详情视图时触发</td> 
 </tr> 
 <tr> 
 <td>onCollapseRow</td> 
 <td>collapse-row.bs.table</td> 
 <td>index, row</td> 
 <td>当点击关闭详情按钮收起详情视图时触发</td> 
 </tr> 
 <tr> 
 <td>onRefreshOptions</td> 
 <td>refresh-options.bs.table</td> 
 <td>options</td> 
 <td>当刷新表格选项时，在销毁当前表格并重新初始化新表格之前触发</td> 
 </tr> 
 <tr> 
 <td>onResetView</td> 
 <td>reset-view.bs.table</td> 
 <td>&nbsp;</td> 
 <td>当重置表格视图时触发</td> 
 </tr> 
 <tr> 
 <td>onRefresh</td> 
 <td>refresh.bs.table</td> 
 <td>params</td> 
 <td>当点击刷新按钮对表格进行刷新时触发</td> 
 </tr> 
 <tr> 
 <td>onScrollBody</td> 
 <td>scroll-body.bs.table</td> 
 <td>&nbsp;</td> 
 <td>当对表格体进行滚动时触发</td> 
 </tr> 
 </tbody> 
</table>

参考api:[https://bootstrap-table.com/docs/api/table-options/\#height][https_bootstrap-table.com_docs_api_table-options_height]

[https_bootstrap-table.com_docs_api_table-options_height]: https://bootstrap-table.com/docs/api/table-options/#height