目录
一、方 法
| 方法名 | 参数 | 描述 |
|---|---|---|
| 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: 新值 |
⏹方法用法
// 刷新表格 tabledata 为数据
$("#table").bootstrapTable('load', [{'后端传入数据1'}, {'后端传入数据2'}]);
// 清空表格数据
$("#table").bootstrapTable('removeAll');
// 销毁表格数据
$('#table').bootstrapTable('destroy');
// 刷新表格
$("#table").bootstrapTable('refresh')
// 获取选中数据
$("#table").bootstrapTable('getSelections');
二、事 件
| 事件名称 | JQuery事件 | 参数 | 描述 |
|---|---|---|---|
| onAll | all.bs.table | name, args | 任何事件触发都会同时触发该事件, 包含2个参数 name: 事件名称 args: 事件参数 |
| onClickRow | click-row.bs.table | row, $element, field | 当点击某一行时触发，包含3个参数 row: 点击行的数据 $element: 对应的 |
| onDblClickRow | dbl-click-row.bs.table | row, $element, field | 当双击击某一行时触发，包含3个参数 row: 点击行的数据 $element: 对应的 |
| onClickCell | click-cell.bs.table | field, value, row, $element | 当点击某一个单元格时触发，包含4个参数 field: 所点击的单元格对应的列名称 value: 所点击的单元格对应列的值 row:单元格所在行数据 $element: 对应的元素 |
| onDblClickCell | dbl-click-cell.bs.table | field, value, row, $element | 当双击某一个单元格时触发，包含4个参数 field: 所点击的单元格对应的列名称 value: 所点击的单元格对应列的值 row:单元格所在行数据 $element: 对应的元素 |
| onSort | sort.bs.table | name, order | 当用户点击列头对某一列进行排序时触发，包含2个参数 name: 排序的列名称 order: 排序方式 |
| onCheck | check.bs.table | row, $element | 当用户选中一行时触发，包含2个参数 row: 所选中行的行数据 $element: 选中的元素 |
| onUncheck | uncheck.bs.table | row, $element | 当用户取消选中一行时触发，包含2个参数 row: 所取消选中的行数据 $element: 选中的元素 |
| 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 | 当对表格体进行滚动时触发 |
⏹bootstrapTable事件
$('#table').bootstrapTable({
onEventName1: function (arg1, arg2, ...) {
// ......
},
onEventName2: function (arg1, arg2, ...) {
// ......
}
})
⏹JQuery事件
$('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) {
// ......
})
原文地址:
1.Bootstrap table方法，Bootstrap table事件，配置
2.基于bootstrap table配置的二次封装
