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

Posted 2023-05-07

【中文标题】如何处理数据表中的复选框单击事件

【英文标题】：How to handle checkbox click event in datatables

【发布时间】：2015-07-24 11:48:49

【问题描述】：

我有一个布尔字段，比如一个标志来说明该行是否在表中被删除。它使用复选框显示，因此如果数据已被删除，则复选框值为true，反之亦然。

下面是显示表格的代码：

<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"]]
    );
);

在表格中，我可以单击复选框，但我不知道如何处理单击事件，因为我正在使用数据表来显示数据。如何使用数据表处理复选框事件？

【问题讨论】：

$('#tblEvent input[type="checkbox"]).click(function() ...

【参考方案1】：

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

cmets 中建议的解决方案适用于 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/

【讨论】：

谢谢，它也可以，我认为数据表有一个特殊/内置的函数来处理这个问题，但是从我得到的答案来看，它可以通过使用 jQuery 来完成

@Willy，不——不是真的。另一种方法是监听 dataTables draw.dt 事件。 dataTables 从一组缓存的行和列中呈现所有内容，这通常与开发人员希望向 DOM 元素添加特殊功能的愿望相冲突。但很高兴听到你让它工作:)

@Willy，如果对您有帮助，请接受答案！将其标记为已接受会关闭问题并向遇到相同问题的未来用户表明这是一个有效的解决方案。

【参考方案2】：

如果您使用datatables with selection capabilities，您可以使用监听器（select 和deselect 事件）。

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

【讨论】：

请在您的回答中包含您链接中的相关代码或信息，因为链接容易损坏