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));

})