0

私は、教師または生徒になることができる人のリストを持っています (ただし、両方ではない)。私は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 ' : '') + '>';
            }

Teacher 列には別のフォーマッタがあります。ブートストラップ テーブルは行ごとに 2 つのチェックボックスで適切にレンダリングされますが、チェックボックスをクリックすると、「undefined の 'click' のプロパティを読み取れません。

4

1 に答える 1

1

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

ドキュメントはこちら: http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options

于 2015-04-21T15:03:43.270 に答える