BootStrap Table：事件、方法、多语言

偏执的太偏执、 2022-05-22 00:58 53阅读 0赞

> 官方文档地址：[http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/][http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation]

# 事件 #

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

# 方法 #

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

# 多语言 #

> <table style="table-layout:fixed;border:1px solid rgb(204,204,204);width:596px;"> 
> <tbody> 
> <tr> 
> <td style="width:172px;height:14px;font-weight:bold;vertical-align:bottom;color:rgb(0,112,192);">Name</td> 
> <td style="width:211px;height:14px;font-weight:bold;vertical-align:bottom;color:rgb(0,112,192);">Parameter</td> 
> <td style="width:213px;height:14px;font-weight:bold;vertical-align:bottom;color:rgb(0,112,192);">Default</td> 
> </tr> 
> <tr> 
> <td style="width:172px;height:14px;vertical-align:top;color:rgb(51,51,51);">formatLoadingMessage</td> 
> <td style="width:211px;height:14px;vertical-align:top;color:rgb(51,51,51);">-</td> 
> <td style="width:213px;height:14px;vertical-align:top;color:rgb(51,51,51);">'Loading, please wait…'</td> 
> </tr> 
> <tr> 
> <td style="width:172px;height:14px;vertical-align:top;color:rgb(51,51,51);">formatRecordsPerPage</td> 
> <td style="width:211px;height:14px;vertical-align:top;color:rgb(51,51,51);">pageNumber</td> 
> <td style="width:213px;height:14px;vertical-align:top;color:rgb(51,51,51);">'%s records per page'</td> 
> </tr> 
> <tr> 
> <td style="width:172px;height:14px;vertical-align:top;color:rgb(51,51,51);">formatShowingRows</td> 
> <td style="width:211px;height:14px;vertical-align:top;color:rgb(51,51,51);">pageFrom, pageTo, totalRows</td> 
> <td style="width:213px;height:14px;vertical-align:top;color:rgb(51,51,51);">'Showing %s to %s of %s rows'</td> 
> </tr> 
> <tr> 
> <td style="width:172px;height:14px;vertical-align:top;color:rgb(51,51,51);">formatDetailPagination</td> 
> <td style="width:211px;height:14px;vertical-align:top;color:rgb(51,51,51);">totalRows</td> 
> <td style="width:213px;height:14px;vertical-align:top;color:rgb(51,51,51);">'Showing %s rows'</td> 
> </tr> 
> <tr> 
> <td style="width:172px;height:14px;vertical-align:top;color:rgb(51,51,51);">formatSearch</td> 
> <td style="width:211px;height:14px;vertical-align:top;color:rgb(51,51,51);">-</td> 
> <td style="width:213px;height:14px;vertical-align:top;color:rgb(51,51,51);">'Search'</td> 
> </tr> 
> <tr> 
> <td style="width:172px;height:14px;vertical-align:top;color:rgb(51,51,51);">formatNoMatches</td> 
> <td style="width:211px;height:14px;vertical-align:top;color:rgb(51,51,51);">-</td> 
> <td style="width:213px;height:14px;vertical-align:top;color:rgb(51,51,51);">'No matching records found'</td> 
> </tr> 
> <tr> 
> <td style="width:172px;height:14px;vertical-align:top;color:rgb(51,51,51);">formatRefresh</td> 
> <td style="width:211px;height:14px;vertical-align:top;color:rgb(51,51,51);">-</td> 
> <td style="width:213px;height:14px;vertical-align:top;color:rgb(51,51,51);">'Refresh'</td> 
> </tr> 
> <tr> 
> <td style="width:172px;height:14px;vertical-align:top;color:rgb(51,51,51);">formatToggle</td> 
> <td style="width:211px;height:14px;vertical-align:top;color:rgb(51,51,51);">-</td> 
> <td style="width:213px;height:14px;vertical-align:top;color:rgb(51,51,51);">'Toggle'</td> 
> </tr> 
> <tr> 
> <td style="width:172px;height:14px;vertical-align:top;color:rgb(51,51,51);">formatColumns</td> 
> <td style="width:211px;height:14px;vertical-align:top;color:rgb(51,51,51);">-</td> 
> <td style="width:213px;height:14px;vertical-align:top;color:rgb(51,51,51);">'Columns'</td> 
> </tr> 
> <tr> 
> <td style="width:172px;height:14px;vertical-align:top;color:rgb(51,51,51);">formatAllRows</td> 
> <td style="width:211px;height:14px;vertical-align:top;color:rgb(51,51,51);">-</td> 
> <td style="width:213px;height:14px;vertical-align:top;color:rgb(51,51,51);">'All'</td> 
> </tr> 
> <tr> 
> <td style="width:172px;height:14px;vertical-align:top;color:rgb(51,51,51);background-color:rgb(245,245,245);">formatFullscreen</td> 
> <td style="width:211px;height:14px;vertical-align:top;color:rgb(51,51,51);background-color:rgb(245,245,245);">-</td> 
> <td style="width:213px;height:14px;vertical-align:top;color:rgb(51,51,51);background-color:rgb(245,245,245);">'Fullscreen'</td> 
> </tr> 
> </tbody> 
> </table>
> 
> 我们可以在页面中引入所有需要的本地化脚本。
> 
> <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']);
> 
> 
> 
>

[http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/