bootstrap-table填坑之旅<二>事件
接着研究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填坑之旅<二>事件的更多相关文章
- Git 深度学习填坑之旅二(文件三种状态、打标签)
0x01 三种状态 Git 有三种状态,你的文件可能处于其中之一: 已提交(committed).已修改(modified)和已暂存(staged). 已提交表示数据已经安全的保存在本地数据库中. 已 ...
- bootstrap-table填坑之旅<一>认识bootstrap-table
应公司需求,改版公司ERP的数据显示样式.由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大, ...
- React Native填坑之旅--与Native通信之iOS篇
终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...
- React Native填坑之旅--布局篇
代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...
- 使用vue开发微信公众号下SPA站点的填坑之旅
原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...
- stm32填坑之旅 - stm32f103c8t6点亮板载贴片蓝色LED
转载请注明:https://www.cnblogs.com/rockyf/p/11691622.html 开篇 开篇一定要精彩,不然路人不理睬!下述是笔者作为arm小白的填坑之旅 没错,这个之前一直从 ...
- React Native填坑之旅--Flow篇(番外)
flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...
- https填坑之旅
Boss说,我们买了个权威证书,不如做全站式的https吧,让用户打开主页就能看到受信任的绿标.于是我们就开始了填坑之旅. [只上主域好不好?] 不好...console会报出一大堆warning因为 ...
- [Xamarin]我的Xamarin填坑之旅(二)
上一篇交代了我Xamarin填坑的背景,大概聊了聊第一步环境配置,第二步创建项目和开发框架选择.如果有一个可用的梯子,这部分基本不会出错. 接下来就具体聊一聊写代码的过程中遇到的一些事儿. 第三步是码 ...
随机推荐
- httpclient4 文档翻译
前言超文本传输协议(HTTP)也许是当今互联网上使用的最重要的协议了.Web服务,有网络功能的设备和网络计算的发展,都持续扩展了HTTP协议的角色,超越了用户使用的Web浏览器范畴,同时,也增加了需要 ...
- 终端更新ubuntu系统
1.sudo apt-get update 2. sudo apt-get dist-upgrade
- 数据库备份checksum选项你会用么?
SQL SERVER有好多好多功能,选项也一大堆,很多功能选项并不常用.但是如果真有这种需求的时候又想不起来~ 本篇我们就来聊聊备份里的选项checksum,这是个啥玩意?听都没听过?来看下图: 就是 ...
- windowsAPI遍历文件夹(速度高于递归)
#region API 遍历文件夹及其子文件夹和子文件 #region 声明WIN32API函数以及结构 ************************************** [DllImpo ...
- AsyncTask 异步处理
1 package com.ch.day8_asynctaskdemo; 2 3 import java.util.ArrayList; 4 5 import com.ch.myutils.NetWo ...
- 赶时髦过了一遍Swift 语言....
Swift 语言 2014年6月3日发布,替代OBJECT-C Swift is a new programming language for creating iOS and OS X apps. ...
- HTML入门教程
什么是 HTML? HTML(Hyper Text Markup Language)超文本标记语言,是用来描述网页的一种语言,不是一种编程语言,而是一种标记语言 (markup languag ...
- 报表控件NCreport教程:报表高级设计
本次文章中将讲解NCreport一些高级功能的应用,我们会先定义一个组,接下来会添加summary变量到示例报表中. 一.对summary添加变量 对于提供的数量和总量来说,变量是特殊的数值项,它们每 ...
- Linux中tcpdump的编译和使用
tcpdump官网:http://www.tcpdump.org/ 转载于:http://www.cnblogs.com/hzl6255/p/6147985.html 目录 1. 介绍 2. 编译 2 ...
- maven项目和普通项目转换