Question

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

Answer 1

我没有测试过，但你可以试试，像这样：

public void bnb (int from, ArrayList followedRoute) {
    if (followedRoute.size() == distances.getMatrix().get(0).size()) {

        followedRoute.add(sourceCity);
        nodes++;

        // update the route's cost
        routeCost += distances.getCost(from, sourceCity);

        if (routeCost < optimumCost) {
            optimumCost = routeCost;
            optimumRoute = (ArrayList)followedRoute.clone();
            result += followedRoute.toString() + "// Cost: "+ routeCost + "\n";
            System.out.println(result);
        } 

        routeCost -= distances.getCost(from, sourceCity);

    }
    else {
        for (int to=0; to < distances.getMatrix().get(0).size(); to++){
            if (!followedRoute.contains(to)) {

                // update the route's cost
                routeCost += distances.getCost(from, to);


                if((routeCost < optimumCost) ) {
                    ArrayList increasedRoute = (ArrayList)followedRoute.clone();
                    increasedRoute.add(to);
                    nodes++;
                    bnb(to, increasedRoute);    
                } 


                routeCost -= distances.getCost(from, to);
            }
        }
    }        
}

Answer 2

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

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

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

2 个答案: