调用 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   当对表格体进行滚动时触发

、配    

  前往: 基于bootstrap table配置的二次封装

参考api:https://bootstrap-table.com/docs/api/table-options/#height

Bootstrap table方法,Bootstrap table事件,配置的更多相关文章

  1. 【转载】BootStrap表格组件bootstrap table详解

    (转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...

  2. Bootstrap表格组件 Bootstrap Table

    Bootstrap Table是Bootstrap的一个组件 Bootstrap Table Demo:http://issues.wenzhixin.net.cn/bootstrap-table/i ...

  3. Bootstrap Blazor 组件介绍 Table (三)列数据格式功能介绍

    Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用.通过本套组件可以大大缩短开发周期,节约开发成本.目前已经开发.封装了 70 多个组 ...

  4. 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; ...

  5. 借鉴bootstrap的方法,快速实现响应式开发

    响应式开发 注意:任何框架都是一个辅助手段,只需借鉴其中的核心思想,把其中核心的东西提炼出来即可.不要因为,提到响应式就想到只能够用bootstrap来实现,框架现有的东西是可以提高我们的效率,但是其 ...

  6. 使用vxe table组件时,edit-render配置$select',选中option后关闭cell的激活状态,显示选中option的value问题

    在我的项目中使用vxe table组件时,edit-render配置{name: '$select', options: [{label:"脉搏",value:"maib ...

  7. ThinkPHP CURD方法盘点:table方法

    table方法也属于模型类的连贯操作方法之一,主要用于指定操作的数据表. 用法 一般情况下,操作模型的时候系统能够自动识别当前对应的数据表,所以,使用table方法的情况通常是为了:切换操作的数据表: ...

  8. vue-cli+webpack在生成的项目中使用bootstrap的方法

    在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行.那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下 ...

  9. layui框架中关于table方法级渲染和自动化渲染之间的区别简单介绍

    方法级渲染: <table class="layui-hide" id="LAY_table_user" lay-filter="user&qu ...

随机推荐

  1. postman Could not get any response。

    浏览器输入地址可以返回结果,但是由于返回的json没有格式,看起来比较麻烦,用postman却报错Could not get any response. 可以注意到下面写了可能的情况:比如服务器无响应 ...

  2. Java基于opencv—透视变换矫正图像

    很多时候我们拍摄的照片都会产生一点畸变的,就像下面的这张图 虽然不是很明显,但还是有一点畸变的,而我们要做的就是把它变成下面的这张图 效果看起来并不是很好,主要是四个顶点找的不准确,会有一些偏差,而且 ...

  3. uniapp如何将微信小程序API封装为Promise

    var SYNC_API_RE = /requireNativePlugin|upx2px|hideKeyboard|canIUse|^create|Sync$|Manager$/; var CALL ...

  4. 小妖精的完美游戏教室——东方PROJECT,同人,th12灵梦A

    ╮(╯▽╰)╭没办法,小妖精Balous也很讨厌学院化的教育呀,一点意义都没有. 这次就上传东方地灵殿灵梦A逻辑部分的核心代码吧,估计连老师都看不懂.动画部分的代码就不放上来了. //======== ...

  5. Python 模块调用的变量与路径

    自己编写的python代码经常需要分模块文件以及包,梳理一下调用顺序.执行顺序.工作路径.函数与变量等 工作路径 首先是工作路径,当模块代码放在统一的包内的时候,其路径和外层的包路径不同,当作为主调用 ...

  6. 学习笔记TF066:TensorFlow移动端应用,iOS、Android系统实践

    TensorFlow对Android.iOS.树莓派都提供移动端支持. 移动端应用原理.移动端.嵌入式设备应用深度学习方式,一模型运行在云端服务器,向服务器发送请求,接收服务器响应:二在本地运行模型, ...

  7. anki vector robot入门语音指令大全

    vector机器人功能不断完善. 一:刚开始支持一些基础指令,你跟他说话他能在本机识别,然后做出相应的响应.在说这部分指令之前,需要加上Hey Vector.(嘿,维课的),然后他会准备听取你的指令, ...

  8. CentOS7之Rsync+Inotify架构实现实时同步文件和文件夹

    简介:rsync是用来同步文件和文件夹的,inotify是用来实现监听变动而自动同步的 OS:Centos7.3 服务器端:172.16.13.157 客 户 端  :172.16.13.156 目  ...

  9. 05-树8 File Transfer (25 分)

    We have a network of computers and a list of bi-directional connections. Each of these connections a ...

  10. 当yum安装出现Error: Package: glibc-headers .....时

    环境 CentOS Linux release 7.4.1708 (Core)   当使用yum源安装时,出现以下报错 Error: Package: glibc-headers-.el7_4..x8 ...