html 表格双击事件,bootstrap table onDblClickCell双击单元格事件

bootstrap table onDblClickCell双击单元格事件

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

onDblClickCell双击行事件

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

参数名称说明

field字段名称，如id

value字段的值

row单元格对应的原始数据如{id:66,name:"itxst.com",level:10}

$elementtd元素对象

初始化时绑定onDblClickCell事件$('#table').bootstrapTable({

columns: columns, //列对象

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

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

{

alert(JSON.stringify(value));

}

});

初始化后绑定onDblClickCell事件$('#table').on('dbl-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));

})