html 表格单元格点击事件,bootstrap table onClickCell点击单元格事件

bootstrap table onClickCell点击单元格事件

当我们想获取用户点击的是那个单元格并获取该单元格对应的数据时，我们可以使用bootstrap table onClickCell事件。

onClickCell点击行事件

bootstrap table用户点击表格某个的事件，事件名称 onClickCell，返回参数如下。

参数名称

说明

field

被点击的字段名称，如id

value

被点击的字段的值

row

被点击单元格对应的原始数据如{id:1,name:"cat",age:12}

$element

被点的td元素对象

初始化时绑定onClickCell事件

$('#table').bootstrapTable({

columns: columns, //列对象

data: data, //要显示的数据对象

onClickCell:function(field, value, row, $element)

{

alert(JSON.stringify(field));

}

});

初始化后绑定onClickCell事件

$('#table').on('click-cell.bs.table', function (e,field, value, row, $element) {

alert(JSON.stringify(field));

})

注意：初始化时注册和初始化后注册的第一个返回参数对象是不一样的

完整代码

bootstrap table onClickCell点击单元格事件例子

.table-demo {

width: 80%;

margin: 30px auto 0px auto;

}

//设置需要显示的列

var columns = [{

field: 'Id',

title: 'ID'

}, {

field: 'ProductName',

title: '水果'

}, {

field: 'Num',

title: '销量'

}];

//需要显示的数据

var data = [{

Id: 1,

ProductName: '香蕉',

Num: '110'

}, {

Id: 2,

ProductName: '樱桃',

Num: '220'

}];

//bootstrap table初始化数据

$('#table').bootstrapTable({

columns: columns,

data: data,

onClickCell: function (field, value, row, $element) {

alert(JSON.stringify(value));

}

});

$('#table').on('click-cell.bs.table', function (e, field, value, row, $element) {

alert(JSON.stringify(field));

})

html 表格单元格点击事件,bootstrap table onClickCell点击单元格事件相关推荐

java 右键事件_java table右键点击事件
1 给表格添加监听addMouseListener 2 使用MouseAdapter类的mouseClicked方法 3 通过MouseEvent类对象的getbutton方法来判断鼠标操作 BUT ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
一、bootstrap table 初体验
http://blog.csdn.net/yin767833376/article/details/52153487 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法 ...
[转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
CSS设置表格行列,给bootstrap table设置行列单元格样式
1.根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center" ...
前端：bootstrap table表格属性、列属性、事件、方法
目录一.使用前提二.基本属性列参数事件方法多语言一.使用前提 1. 在html中引用table相应的包 <link rel="stylesheet" ...
成功解决在excel表格中仅在某列内插入一个空白单元格，使其下部的数据整体下移一格
成功解决在excel表格中仅在某列内插入一个空白单元格,使其下部的数据整体下移一格目录解决问题解决方法解决问题在excel表格中仅在某列内插入一个空白单元格,使其下部的数据整体下移一格解决 ...
button layui 点击事件_Layui 带多选框表格监听事件以及按钮自动点击写法实例
不话不多说了,直接上代码吧: 获取选中行数据获取选中数目验证是否全选提交选择 id运动名运动时长运动类型 var msg=""; var idlist="" ...
VUE Table复杂表格生成带格式的excel（多表头、合并单元格、边框、居中、背景）
VUE Table复杂表格生成带格式的excel(多表头.合并单元格.边框.居中.背景) 因为工作需要,在网上找了很多都不太行无意之间看到一个大佬的打码拿过来改了改居然可以用! 原文链接:https: ...
bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

html 表格单元格点击事件,bootstrap table onClickCell点击单元格事件

html 表格单元格点击事件,bootstrap table onClickCell点击单元格事件相关推荐

最新文章

热门文章