接着研究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. httpclient4 文档翻译

    前言超文本传输协议(HTTP)也许是当今互联网上使用的最重要的协议了.Web服务,有网络功能的设备和网络计算的发展,都持续扩展了HTTP协议的角色,超越了用户使用的Web浏览器范畴,同时,也增加了需要 ...

  2. 终端更新ubuntu系统

    1.sudo apt-get update 2. sudo apt-get dist-upgrade

  3. 数据库备份checksum选项你会用么?

    SQL SERVER有好多好多功能,选项也一大堆,很多功能选项并不常用.但是如果真有这种需求的时候又想不起来~ 本篇我们就来聊聊备份里的选项checksum,这是个啥玩意?听都没听过?来看下图: 就是 ...

  4. windowsAPI遍历文件夹(速度高于递归)

    #region API 遍历文件夹及其子文件夹和子文件 #region 声明WIN32API函数以及结构 ************************************** [DllImpo ...

  5. AsyncTask 异步处理

    1 package com.ch.day8_asynctaskdemo; 2 3 import java.util.ArrayList; 4 5 import com.ch.myutils.NetWo ...

  6. 赶时髦过了一遍Swift 语言....

    Swift 语言 2014年6月3日发布,替代OBJECT-C Swift is a new programming language for creating iOS and OS X apps. ...

  7. HTML入门教程

    什么是 HTML?     HTML(Hyper Text Markup Language)超文本标记语言,是用来描述网页的一种语言,不是一种编程语言,而是一种标记语言 (markup languag ...

  8. 报表控件NCreport教程:报表高级设计

    本次文章中将讲解NCreport一些高级功能的应用,我们会先定义一个组,接下来会添加summary变量到示例报表中. 一.对summary添加变量 对于提供的数量和总量来说,变量是特殊的数值项,它们每 ...

  9. Linux中tcpdump的编译和使用

    tcpdump官网:http://www.tcpdump.org/ 转载于:http://www.cnblogs.com/hzl6255/p/6147985.html 目录 1. 介绍 2. 编译 2 ...

  10. maven项目和普通项目转换