bootstraptable 汇总_bootstrap-table事件汇总
今天在开发过程中遇到了一个问题,就是关于bootstrap-table全选按钮事件的问题,翻了一下它的开发文档,发现只有全选按钮选中事件,没有取消选中事件,因为要做的是一个商品选择功能,没有取消全选事件就没办法做价格实时更新,然后打开万能的百度查了一下,看到了前辈的一篇文章,然后写篇文章备份一下。
$(function(){
/*初始化表格*/
$("#goods").bootstrapTable({
data: data
});
/*加载事件*/
$("#goods")
.on('click-row.bs.table', function (e, row, ele,field) {
$("#eventInfo").text('点击行事件 当前商品名:'+ row.goodsName
+ ',价格:' + row.price
+ ',效期:' + row.date
+ '当前点击单元格field值为:' + field);
})
.on('dbl-click-row.bs.table', function (e, row, ele,field) {
$("#eventInfo").text('双击行事件');
})
.on('check.bs.table', function (e, row,ele) {
$("#eventInfo").text('checkbox选中事件');
})
.on('uncheck.bs.table', function (e, row,ele) {
$("#eventInfo").text('checkbox取消选中事件');
})
.on('sort.bs.table', function (e, field, order) {
var o;
switch(order){
case "desc":
o = "降序";
break;
case "asc":
o = "升序";
break;
}
$("#eventInfo").text('排序事件 当前' + name + '列,以' + o + "排列");
})
.on('check-all.bs.table', function (e,dataArr) {
$("#eventInfo").text('全选事件');
})
.on('uncheck-all.bs.table', function (e,dataArr) {
$("#eventInfo").text('取消全选事件');
})
.on('load-success.bs.table', function (e, data) {
$("#eventInfo").text('加载成功事件');
})
.on('load-error.bs.table', function (e, status) {
$("#eventInfo").text('加载错误事件');
})
.on('column-switch.bs.table', function (e, field, checked) {
var colName;
switch(field){
case "goodsName":
colName = "商品名称";
break;
case "price":
colName = "价格";
break;
case "date":
colName = "日期";
break;
}
if(checked){
$("#eventInfo").text('筛选列事件 ' + colName + '列显示');
}else{
$("#eventInfo").text('筛选列事件 ' + colName + '列隐藏');
}
})
.on('page-change.bs.table', function (e, number, size) {
$("#eventInfo").text('切换页事件 当前页数:第' + number + "页,每页显示数量" + size + "条");
})
.on('search.bs.table', function (e, text) {
$("#eventInfo").text('搜索事件');
});
});
分析事件及回调函数
bootstrap-table事件基本以on绑定,bootstrap-table的事件都有.bs.table后缀 bs即bootstrap 显然.bs.table是申明boostrap-table。
click-row:行点击事件,callback获取4个参数 : e 事件对象 , row 当前行数据对象 , ele 当前单元格对象 , field 当前单元格的field值。(row是数据对象,ele是DOM对象)
dbl-click-row:行双击事件,callback获取4个参数 : e 事件对象 , row 当前行数据对象 , ele 当前单元格对象 , field 当前单元格的field值。(row是数据对象,ele是DOM对象)
check:单个checkbox选中事件,callback获取3个参数 : e 事件对象 , row 当前行数据对象 , ele 当前单元格对象。(row是数据对象,ele是DOM对象)
uncheck:单个checkbox取消选中事件,callback获取3个参数 : e 事件对象 , row 当前行数据对象 , ele 当前单元格对象。(row是数据对象,ele是DOM对象)
check-all:全选checkbox事件,callback获取2个参数 :e 事件对象 ,dataArr 选中行数据对象集合(dataArr的对象是数据对象)
uncheck-all:全选checkbox取消事件,callback获取2个参数 :e 事件对象 ,dataArr 选中行数据对象集合(dataArr的对象是数据对象)
sort:列排序事件,callback获取3个参数 : e 事件对象 , field 当前列的field值 , order 当前列是升序还是降序(enum值,desc , asc)。
load-success:数据加载成功事件,callback获取2个参数:e 事件对象 , data 成功加载的数据对象集合。(dataArr的对象是数据对象)
load-error:数据加载失败事件,callback获取2个参数:e 事件对象 , status 失败状态码。
column-switch:显示隐藏列选择事件,callback获取3个参数:e 事件对象 ,field 当前列的field值 ,checked 是否勾选(bool值)。
page-change:翻页事件,callback获取3个参数 : e 事件对象 ,number 当前页码(不是下标,是页码) ,size 当前页数据条数。
search:搜索事件,callback获取2个参数 : e 事件对象 ,text 搜索框输入内容。
感谢前辈,原文出处:点击直达
bootstraptable 汇总_bootstrap-table事件汇总相关推荐
- bootstraptable 手册_bootstrap table表格使用方法详解
本文实例为大家分享了bootstrap table表格的使用方法,供大家参考,具体内容如下 1.进入页面,根据指定的URL加载数据(json格式) 2.加载成功,根据$table.bootstrapT ...
- bootstraptable 居中_bootstrap table表格内容居中对齐
在开发项目的时候,发现了一款JS组件系列--表格组件神器 ,官方文档也比较简单,总结了一些常遇到的问题 实现一个简单的表格和分页,内容居中对齐 图片.png Dashboard | Nadhif - ...
- bootstraptable 居中_bootstrap table合并行数据并居中对齐效果
本文实例为大家分享了bootstrap table合并行数据并居中对齐的具体代码,供大家参考,具体内容如下 渲染表格后进行数据行合并 onLoadSuccess: function (data) { ...
- Javascript事件汇总
Javascript事件汇总 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture ...
- oracle gc chain,ORACLE GC 类等待事件汇总分析
ORACLE GC 类等待事件汇总分析 作者简介: ---------------------------------------------------------------------- @ 孙 ...
- vue3-video-play视频组件的使用(一)——基本使用 HTML5中Video标签的属性、方法和事件汇总
vue3-video-play视频组件的使用(一)--基本使用 & HTML5中Video标签的属性.方法和事件汇总 npm地址:https://www.npmjs.com/package/v ...
- JS事件汇总,addEventListener添加事件监听
JS事件汇总 JavaScript 事件 JS事件汇总 鼠标事件 键盘事件 表单事件 读取事件 onload与onpageshow事件区别 其它事件 addEventListener()添加事件监听 ...
- 移动端H5 input移动端事件汇总
移动端H5 input事件汇总 这里汇总了Android和IOS端的input事件汇总 Android 端的H5 input事件 1. focus事件 2. input事件 3. keydown事件 ...
- 9月13号魔兽服务器维护,魔兽世界9月13号重点事件汇总 魔兽世界下周要点一览...
魔兽世界9月13号重点事件汇总 魔兽世界下周要点一览 2018-09-12 15:08:44来源:游戏下载编辑:野狐禅评论(0) <魔兽世界8.0>下周(9.13-9.19)即将迎来M奥迪 ...
最新文章
- 情感分析:基于卷积神经网络
- 3D车道线检测:Gen-LaneNet
- Git(创建版本库)
- 教程-DelphiXE7如何调用Java Class,JAR等文件?
- adb实时获取屏幕_实时数仓 | 你需要的是一款合适且强大的OLAP数据库(上)
- linux新建好文件后怎么编译,使用autoconf生成Makefile并编译工程的步骤
- Mware HA实战攻略之五VMwareHA测试验收
- 【Foreign】采蘑菇 [点分治]
- 想要成为架构师?先看看这些条件满不满足!
- java project整合spring和hibernate
- Python 进阶 —— 使用 map reduce
- linux set命令例子,学习一个 Linux 命令:declare/typeset 命令
- Vizard基础操作
- 苹果自带浏览器服务器无响应,苹果safari浏览器打开网页,因为服务器已停止响应...
- 免挂码支付零度码支付intl码支付app监控码支付
- 持久化模型_建立领域模型-持久性不可知论简介
- 11. Nginx HTTPS
- RSA实现对文件的加密解密
- ALtera DE2开发板学习03
- YAD2K中test_yolo报错PermissionError: [Errno 13] Permission denied: 'images\\out'
热门文章
- Hadoop Install
- PHP框架 Phalcon 1.0.0 beta发布,实测性能强劲
- 桌面快捷键和桌面livefolder
- Linux下Socket 函数集(三)
- 各浏览器内核与C#WinForm开发Demo
- Spring使用@Required注解依赖检查
- C# HttpWebRequest提交数据方式
- 如何定义和建立架构?
- 离线环境安装Django2.2(亲测)
- Python MySQLdb 循环插入execute与批量插入executemany性能分析(list批量写法亲测成功)