html表格选中行事件,bootstrap table onCheck选中行事件

bootstrap table onCheck选中行事件

当bootstrap table开启选择列时用户点击复选框而产生的事件，onCheck事件返回选择行的数据和被点击的元素对象。

onCheck选中行事件

点击复选框的事件注意这里是选择的事件，取消选中的事件是onUncheck，返回参数如下。

参数名称说明

row选中行的数据对象json格式如{id:1,playe:true}

$element被点击的jquery对象

绑定onCheck事件方法一$('#table').bootstrapTable({

columns: columns, //列对象

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

onCheck:function(row, $element){

alert(JSON.stringify(row));

}

});

绑定onCheck事件方法二$('#table').on('check.bs.table', function (e,row, $element) {

alert(JSON.stringify(row));

});

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

完整代码

bootstrap table onCheck选中行事件在线例子

.table-demo {

width: 80%;

margin: 30px auto 0px auto;

}

//设置需要显示的列

var columns = [{

checkbox: true

}, {

field: 'ProductName',

title: '产品名称'

}, {

field: 'StockNum',

title: 'Item 库存'

}];

//需要显示的数据

var data = [{

Id: 1,

ProductName: '香蕉',

StockNum: '100'

}, {

Id: 2,

ProductName: '苹果',

StockNum: '200'

}];

//bootstrap table初始化数据

$('#table').bootstrapTable({

singleSelect: false,

clickToSelect: true,

columns: columns,

data: data,

onCheck: function (row, $element) {

alert(JSON.stringify(row));

}

});

// $('#table').on('check.bs.table', function (e,row, $element) {

// alert(JSON.stringify(row));

// })