Bootstrap table方法,Bootstrap table事件,配置
调用 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, ...) {
})
一、方 法
方法名 | 参数 | 描述 |
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: 新值 |
二、事 件
事件名称 | 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
Bootstrap table方法,Bootstrap table事件,配置的更多相关文章
- 【转载】BootStrap表格组件bootstrap table详解
(转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...
- Bootstrap表格组件 Bootstrap Table
Bootstrap Table是Bootstrap的一个组件 Bootstrap Table Demo:http://issues.wenzhixin.net.cn/bootstrap-table/i ...
- Bootstrap Blazor 组件介绍 Table (三)列数据格式功能介绍
Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- 借鉴bootstrap的方法,快速实现响应式开发
响应式开发 注意:任何框架都是一个辅助手段,只需借鉴其中的核心思想,把其中核心的东西提炼出来即可.不要因为,提到响应式就想到只能够用bootstrap来实现,框架现有的东西是可以提高我们的效率,但是其 ...
- 使用vxe table组件时,edit-render配置$select',选中option后关闭cell的激活状态,显示选中option的value问题
在我的项目中使用vxe table组件时,edit-render配置{name: '$select', options: [{label:"脉搏",value:"maib ...
- ThinkPHP CURD方法盘点:table方法
table方法也属于模型类的连贯操作方法之一,主要用于指定操作的数据表. 用法 一般情况下,操作模型的时候系统能够自动识别当前对应的数据表,所以,使用table方法的情况通常是为了:切换操作的数据表: ...
- vue-cli+webpack在生成的项目中使用bootstrap的方法
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行.那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下 ...
- layui框架中关于table方法级渲染和自动化渲染之间的区别简单介绍
方法级渲染: <table class="layui-hide" id="LAY_table_user" lay-filter="user&qu ...
随机推荐
- 组件_ UIToolbar
组件_ UIToolbar /** 1. 顶部toolbar 2. TextField可以以UIBarButtonItem的自定义视图的方式加入toolbar 3. 三个按钮 4. 将UIBarBu ...
- [R] [Johns Hopkins] R Programming -- week 3
library(datasets) head(airquality) #按月分組 s <- split(airquality, airquality$Month) str(s) summary( ...
- c++中函数指针作为int传递
int f() { ; } typedef int (*method)(); int _tmain(int argc, _TCHAR* argv[]) { int value = (int)& ...
- 一键安装Davinci
官网:https://edp963.github.io/davinci/index.html 下载地址:https://github.com/edp963/davinci 环境:Centos7 ...
- HQL详解
HQL查询:Criteria查询对查询条件进行了面向对象封装,符合编程人员的思维方式,不过HQL(Hibernate Query Lanaguage)查询提供了更加丰富的和灵活的查询特性,因此 Hib ...
- zookeeper启动报错处理记录
zookeeper启动时正常,查看状态时出错 处理,通过 ./zkServer.sh status 报错Error contacting service. It is probably not run ...
- C#用反射实现两个类的对象之间相同属性的值的复制
在进行实体转换操作的时候如果需要在对两个实体之间两个属性字段差不多相同的类要进行一个互相的转换,我们要把a对象的所有字段的值都复制给b对象,我们只能用b.属性=a.属性来写,如果属性字段太多的话,就要 ...
- pandas第一课
pandas第一课 首先是数据的准备 movies.dat user.dat ratings.dat 注意,这些数据都是通过::来隔开每一列的,每一列有各自的含义 现在通过pandas来读入数据 首先 ...
- 创建maven工程的时候卡死的解决办法
在idea的maven,runner,properties里面添加 archetypeCatalog=internal
- 使用 GDB 调试需要命令行参数的程序
使用 gdb 命令提供的 --args 选项可以调试需要命令行参数的程序,如下: gdb --args a.out arg1 arg2 arg3