接着研究bootstrap-table... ...

这一篇研究bootstrap-table的事件及回调函数

先上一个demo

HTML

    <div class="alert alert-danger" id="eventInfo"></div>
<table id="goods"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-sortable="true" data-field="goodsName">商品名称</th>
<th data-sortable="true" data-field="price">价格</th>
<th data-field="date">日期</th>
</tr>
</thead>
</table>

js

$(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('搜索事件');
});
});

demo数据以json加载数据自己写... ... ...

分析事件及回调函数

bootstrap-table事件基本以on绑定,bootstrap-table的事件都有.bs.table后缀 bs即bootstrap 显然.bs.table是申明boostrap-table。

click-row:行点击事件,callback获取个参数 : e 事件对象 , row 当前行数据对象 , ele 当前单元格对象 , field 当前单元格的field值。(row是数据对象,ele是DOM对象)

dbl-click-row:行双击事件,callback获取个参数 : e 事件对象 , row 当前行数据对象 , ele 当前单元格对象 , field 当前单元格的field值。(row是数据对象,ele是DOM对象)

check:单个checkbox选中事件,callback获取个参数 : e 事件对象 , row 当前行数据对象 , ele 当前单元格对象。(row是数据对象,ele是DOM对象)

uncheck:单个checkbox取消选中事件,callback获取个参数 : e 事件对象 , row 当前行数据对象 , ele 当前单元格对象。(row是数据对象,ele是DOM对象)

check-all:全选checkbox事件,callback获取个参数 :e 事件对象 ,dataArr 选中行数据对象集合(dataArr的对象是数据对象)

uncheck-all:全选checkbox取消事件,callback获取个参数 :e 事件对象 ,dataArr 选中行数据对象集合(dataArr的对象是数据对象)

sort:列排序事件,callback获取3个参数 : e 事件对象 , field 当前列的field值 , order 当前列是升序还是降序(enum值,desc , asc)。

load-success:数据加载成功事件,callback获取个参数:e 事件对象 , data 成功加载的数据对象集合。(dataArr的对象是数据对象)

load-error:数据加载失败事件,callback获取2个参数:e 事件对象 , status 失败状态码。

column-switch:显示隐藏列选择事件,callback获取个参数:e 事件对象 ,field 当前列的field值 ,checked 是否勾选(bool值)。

page-change:翻页事件,callback获取3个参数 : e 事件对象 ,number 当前页码(不是下标,是页码) ,size 当前页数据条数。

search:搜索事件,callback获取2个参数 : e 事件对象 ,text 搜索框输入内容。

这个demo包含几乎所有bootstrap-table的事件。

bootstrap-table填坑之旅<二>事件的更多相关文章

  1. Git 深度学习填坑之旅二(文件三种状态、打标签)

    0x01 三种状态 Git 有三种状态,你的文件可能处于其中之一: 已提交(committed).已修改(modified)和已暂存(staged). 已提交表示数据已经安全的保存在本地数据库中. 已 ...

  2. bootstrap-table填坑之旅<一>认识bootstrap-table

    应公司需求,改版公司ERP的数据显示样式.由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大, ...

  3. React Native填坑之旅--与Native通信之iOS篇

    终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...

  4. React Native填坑之旅--布局篇

    代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...

  5. 使用vue开发微信公众号下SPA站点的填坑之旅

    原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...

  6. stm32填坑之旅 - stm32f103c8t6点亮板载贴片蓝色LED

    转载请注明:https://www.cnblogs.com/rockyf/p/11691622.html 开篇 开篇一定要精彩,不然路人不理睬!下述是笔者作为arm小白的填坑之旅 没错,这个之前一直从 ...

  7. React Native填坑之旅--Flow篇(番外)

    flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...

  8. https填坑之旅

    Boss说,我们买了个权威证书,不如做全站式的https吧,让用户打开主页就能看到受信任的绿标.于是我们就开始了填坑之旅. [只上主域好不好?] 不好...console会报出一大堆warning因为 ...

  9. [Xamarin]我的Xamarin填坑之旅(二)

    上一篇交代了我Xamarin填坑的背景,大概聊了聊第一步环境配置,第二步创建项目和开发框架选择.如果有一个可用的梯子,这部分基本不会出错. 接下来就具体聊一聊写代码的过程中遇到的一些事儿. 第三步是码 ...

随机推荐

  1. Java被忽略的基本知识(二)

    14.字符串的内容不可改变,不能修改某个下标的字符值.字符串之间的"+"连接是通过"断开--再连接",修改变量的栈中的引用地址指向. 15.对于数组.类(类的属 ...

  2. Linux下gcc与gdb简介

    gcc编译器可以将C.C++等语言源程序.汇编程序编译.链接成可执行程序.gdb是 GNU 开发的一个Unix/Linux下强大的程序调试工具. linux下没有后缀名的概念.但 gcc 根据文件的后 ...

  3. ORACLE设置id自增长

    1.创建序列create sequence sequence_userinfo start with 1 increment by 1 minvalue 1 maxvalue 999999 nocyc ...

  4. vs2010问题:未能安装xxx包

    打开vs2010新建c++工程,出现问题如图 原因是重复安装了,之前安装的没有删除干净,导致冲突. 如果你的vs2010安装在c盘,解决方法:http://blog.sina.com.cn/s/blo ...

  5. 加密connectionStrings

    开始菜单>>所有程序>>Microsoft visual studio 2010 >> Visual Studio Tools >> Visual St ...

  6. 浅谈 Scrapy 爬虫(二)

    越写越像官方文档的翻译,偏离了初衷.写一些官方文档里没有的内容吧.   在不限制宽带的环境下,根据页面的大小, Scrapy 一秒能爬取40-70个页面,一天在400万到600万页面.也就是说 Scr ...

  7. Android 获取版本号

    啥也不是,直接看代码 public int getVersionCode(){ int versionCode = 0; try { PackageInfo packageInfo = getPack ...

  8. 非root用户 gcc安装

    亲测 可以安装 过程并不复杂 但可能需要一些时间 认真一点 按照步骤 一定可以成功哒 其他版本可以将ftp.gnu.org/gnu/gcc/敲入浏览器,找到自己需要的文件:[安装过4.9.0:成功:用 ...

  9. Autumn is a second spring when every leaf is a flower.

    Autumn is a second spring when every leaf is a flower. 秋天即是第二个春天,每片叶子都是花朵.——阿尔贝·加缪

  10. Mysql查询重复记录

    第一步 使用group by 和 having cout 查找重复字段 SELECT t1.`order_book_id` FROM `quant_stock_info` t1 GROUP BY t1 ...