具有可选行和下拉列表的数据表

Datatables with selectable rows and a dropdown

本文关键字：下拉列表 数据表      更新时间：2023-09-26

1）在我当前的项目中，我使用了一个具有可选行的数据表（单击以突出显示/选择一行）。

2） 每一行在最后一列中都包含一个引导下拉列表。

问题：

当我点击该行时，该行被选中，这很好。但是当我点击下拉菜单时，行也会被选中。我不想那样。我怎样才能做到这一点？！当我单击最后一列中的下拉列表时，有什么方法可以防止选中该行吗？

我的下拉代码：

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Aktion <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">OptionA</a></li>
        <li><a href="#">OptionB</a></li>
        <li><a href="#">OptionC</a></li>
    </ul>
</div>

我的数据表代码：

$('#invoiceList').dataTable({
    "displayLength": -1,
    "paginate": true,
    "order": [[3, "desc"]],
    "lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "Alle"]],
    "ajax": "get_invoices.php",
    "deferRender": true
});
$('#invoiceList tbody').on('click', 'tr', function () {
    $(this).toggleClass('active');
})
    });

我还没有测试过，但你可以尝试一下，比如

$('.dropdown-menu').click(function(e)) {
    e.preventDefault(); //or e.stopPropagation(); which should work better
});

我找到了解决方案。通过使用事件委派，我收到了ajax加载的下拉列表的点击事件的通知。然后我可以从表中的所有行中删除活动类。

$(document).on("click", '.dropdown-toggle', function(event) { 
            console.log('clicked dropdown');
            $('#invoiceList tbody tr').removeClass('active');
        });
相关文章：