如何处理数据表中的复选框点击事件

Question

我有一个布尔字段，如标志，用于说明 table 中的行是否已删除。它显示使用复选框，所以如果数据已被删除，则复选框值为真，反之亦然。

下面是显示 table:

的代码

<table id="tblEvent" class="display" cellspacing="0" style="width: 100%">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.PIC)</th>
            <th>@Html.DisplayNameFor(model => model.Name)</th>
            <th>@Html.DisplayNameFor(model => model.StartDate)</th>
            <th>@Html.DisplayNameFor(model => model.Status)</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.PIC)</td>
                <td>@Html.DisplayFor(modelItem => item.Name)</td>
                <td>@Html.DisplayFor(modelItem => item.StartDate)</td>
                <td>@Html.EditorFor(modelItem => item.Status)</td>
            </tr>
        }
    </tbody>
</table>

$(document).ready(function () {
    $("#tblEvent").dataTable({
        "order": [[1, "desc"]]
    });
});

在table中我可以点击复选框但是我不知道如何处理点击事件因为我正在使用数据tables来显示数据。如何使用datatable?

处理复选框事件

Answer 1

我猜您使用的是分页 table，并且遇到了当您更改页面时点击处理程序无法正常工作的问题？

评论中建议的解决方案适用于 1 页数据表，但如果您更改页面或数据表被重绘则无用：

$('#tblEvent input[type="checkbox"]').click(function() {
    console.log('suggested-in-comment', 'click');
});

...仅适用于第一页。您必须使用 委托事件 以确保复选框始终绑定到点击处理程序：

$('#tblEvent').on('click', 'input[type="checkbox"]', function() {
    console.log('best', 'click');
});

同时演示/概念证明 -> http://jsfiddle.net/o4mhqpr3/

Answer 2

如果您正在使用 datatables with selection capabilities you can use listeners (select and deselect 个事件）。

table.on( 'deselect', function ( e, dt, type, indexes ) {});
table.on( 'select', function ( e, dt, type, indexes ) {});

如何处理数据表中的复选框点击事件

How to handle checkbox click event in datatables

javascript

asp.net-mvc

jquery

datatables