Bootstrap-table Getting click error on my data-formmatter checkboxes - bootstrap-table

Question

I have a list of people that can be teachers or students (but not both). I have json data
{id:0,name:joe,isStudent:0,IsTeacher:0}
as the source for a bootstrap-table. I have used the column's data-formatter to format the the checkboxs in 2 columns
function formatStudent(value, row, index) {
return '<input type="checkbox" id="d_' + row["id"] +'"' + ((value != 0) ? ' checked ' : '') + '>';
}
There is another formatter for the Teacher column.The bootstrap-table renders properly with 2 checkboxes per row however, when I click on a checkbox - i get an error "Cannot read property of 'click' of undefined.

Answer 1

you can use 'data-events' to handle your events:
html:
<table id="table">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="isStudent"
data-formatter="formatStudent"
data-events="studentEvents">Is Student</th>
<th data-field="isTeacher"
data-formatter="teacherStudent"
data-events="teacherEvents">Is Teacher</th>
</tr>
</thead>
</table>
js:
var data = [
{id: 0, name: 'joe1', isStudent: 0, isTeacher: 0},
{id: 1, name: 'joe2', isStudent: 1, isTeacher: 0},
{id: 2, name: 'joe3', isStudent: 0, isTeacher: 1},
{id: 3, name: 'joe4', isStudent: 1, isTeacher: 1},
{id: 4, name: 'joe5', isStudent: 0, isTeacher: 0}
];
$(function () {
$('#table').bootstrapTable({
data: data
});
});
function formatStudent(value, row, index) {
return '<input type="checkbox" id="d_' + row["id"] +'"' + ((value != 0) ? ' checked ' : '') + '>';
}
window.studentEvents = {
'click :checkbox': function (e, value, row, index) {
// do something
}
};
function teacherStudent(value, row, index) {
return '<input type="checkbox" id="d_' + row["id"] +'"' + ((value != 0) ? ' checked ' : '') + '>';
}
window.teacherEvents = {
'click :checkbox': function (e, value, row, index) {
// do something
}
};
Docs here: http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options