bootstrap-table - 引导表在我的数据格式复选框上出现点击错误

Question

我有一个可以是老师或学生（但不能同时是两者）的人的列表。我有json数据

{id:0,name:joe,isStudent:0,IsTeacher:0} 

作为引导表的来源。我已经使用该列的数据格式化程序来格式化 2 列中的复选框

                function formatStudent(value, row, index) {
                return '<input type="checkbox" id="d_' + row["id"] +'"' + ((value != 0) ? ' checked ' : '') + '>';
            }

教师列还有另一个格式化程序。引导表正确呈现，每行有 2 个复选框，但是，当我单击一个复选框时 - 我收到错误“无法读取未定义的 'click' 的属性。

Answer 1

您可以使用“数据事件”来处理您的事件：

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

文档在这里：http ://bootstrap-table.wenzhixin.net.cn/documentation/#column-options