单击复选框时禁用行隐藏/显示
[英]Disable row hide/show when click on the checkbox
问题描述
结合数据表，我使用以下代码隐藏/显示更多细节，它适用于行级而不是第一列（我希望这样）。 同时我也在其中一个列中有复选框。
问题是，当我点击复选框时，它将显示/隐藏整行。
如何让我点击复选框而不触发隐藏/显示？
$(document).ready(function() { $('#myTable').DataTable({ responsive: { details: { type: 'column', target: 'tr' } }, columnDefs: [{ className: 'control', targets: 0, orderable: false }], searching: false }); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Company</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.bootstrap.min.css" rel="stylesheet"/> <style> .big-checkbox { width: 20px; height: 20px; } </style> </head> <body> <div class="table-responsive"> <table id="myTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"> <thead> <tr> <th></th> <th></th> <th>ID</th> <th>Company</th> <th>Invoice No.</th> <th>Due Date</th> <th>Invoice Amount</th> <th>Outstanding Amount</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td></td> <td><input type="checkbox" class="big-checkbox"></td> <td>1</td> <td>ABC Company</td> <td>C1010</td> <td>2017-09-27 00:00:00</td> <td>111</td> <td>28</td> <td>PENDING</td> <td> <a href="#" data-id="1" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a> </td> </tr> <tr> <td></td> <td><input type="checkbox" class="big-checkbox"></td> <td>2</td> <td>Zoozle Inc</td> <td>C0432</td> <td>2017-09-27 00:00:00</td> <td>111</td> <td>28</td> <td>Completed</td> <td> <a href="#" data-id="1" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a> </td> </tr> </tbody> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2017-10-18 16:55:35
现在试试
你需要绑定click事件的复选框，需要使用stopPropagation（）; 防止传递给其父级的单击事件。
$(document).ready(function() { $("input[type='checkbox']").click(function(e){ debugger; e.stopPropagation(); }); $('#myTable').DataTable({ responsive: { details: { type: 'column', target: 'tr' } }, columnDefs: [{ className: 'control', targets: 0, orderable: false }], searching: false }); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Company</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.bootstrap.min.css" rel="stylesheet"/> <style> .big-checkbox { width: 20px; height: 20px; } </style> </head> <body> <div class="table-responsive"> <table id="myTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"> <thead> <tr> <th></th> <th></th> <th>ID</th> <th>Company</th> <th>Invoice No.</th> <th>Due Date</th> <th>Invoice Amount</th> <th>Outstanding Amount</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td></td> <td><input type="checkbox" class="big-checkbox"></td> <td>1</td> <td>ABC Company</td> <td>C1010</td> <td>2017-09-27 00:00:00</td> <td>111</td> <td>28</td> <td>PENDING</td> <td> <a href="#" data-id="1" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a> </td> </tr> <tr> <td></td> <td><input type="checkbox" class="big-checkbox"></td> <td>2</td> <td>Zoozle Inc</td> <td>C0432</td> <td>2017-09-27 00:00:00</td> <td>111</td> <td>28</td> <td>Completed</td> <td> <a href="#" data-id="1" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a> </td> </tr> </tbody> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script> </body> </html>
解决方案2
1 2017-10-18 18:11:31
问题是每次绘制表时，响应式扩展都会将四个事件处理程序附加到<tbody> 。
因此，必须在每次绘制后重新生成覆盖响应的处理程序：
drawCallback: function() {
$('#example tbody td').on('keyup mouseup mousedown click', function(e) {
if (e.target.type == 'checkbox') {
e.stopPropagation()
}
})
},
当另一列为真/假时，数据表编辑器显示/隐藏编辑行中复选框列表的复选框
[英]Datatables Editor show/hide a checkbox of a list of checkbox in edit row when another column is true/false
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.