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点击单元格事件
发布评论