我使用
@L_404_0@ datatable创建了一个表.我还使用数据表的响应功能来使其响应.代码工作正常,但我面临的问题是表的第一列有一个复选框,当我们将表宽度调整为较小宽度时,可折叠选项将如下所示
现在,当我们单击复选框时,可折叠功能正在运行.
我的代码如下所示
<table id="example" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0"> <thead> <tr> <th></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td><input type="checkBox"></td> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td><input type="checkBox"></td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> : </tbody> </table> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script> <script src="dataTables.responsive.js" type="text/javascript"></script> <script> $(document).ready(function () { $('#example') .DataTable({ "responsive": true,"dom": '<"top"lf>t<"bottom"pi><"clear">' }); }); </script>
当我们点击复选框时,任何人都可以告诉我如何防止可折叠和可扩展
解决方法
只是替换
$(document).ready(function () { $('#example').DataTable({ "responsive": true,"dom": '<"top"lf>t<"bottom"pi><"clear">' }); });
通过
$(document).ready(function () { $('#example').DataTable({ "responsive": true,"dom": '<"top"lf>t<"bottom"pi><"clear">' }); $('td').on('click mousedown mouseup',function(e) { if (e.target.type === 'checkBox') { e.stopPropagation(); } }); });
如果单击复选框,此部分将停止点击传播
$('td').on('click mousedown mouseup',function(e) { if (e.target.type === 'checkBox') { e.stopPropagation(); } });
plunker:http://plnkr.co/edit/PCHdDM7UGD0BLXoDhhD6?p=preview
编辑:
要删除单元格单击功能并将其仅添加到折叠/扩展按钮,我必须创建一个新的html元素并将其放在单元格中:’< div class =“clickBtn”> < / DIV>”
为什么?因为旧的按钮是一个之前的伪元素,所以它实际上并不在dom中.我需要dom中的一个元素,只允许在单击此特定元素时消耗/崩溃,而不是整个单元格.
然后我给这个按钮旧按钮的CSS
.clickBtn { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; top: 9px; left: 4px; height: 14px; width: 14px; position: absolute; color: white; border: 2px solid white; border-radius: 14px; Box-shadow: 0 0 3px #444; Box-sizing: content-Box; text-align: center; font-family: 'Courier New',Courier,monospace; line-height: 14px; background-color: #337ab7; }
并删除旧的:
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before { display: none; }
现在我需要更改单元格单击行为,只有在单击折叠/消耗按钮时才会发生.
$('td').on('click mousedown mouseup',function(e) { if (e.target.className === 'clickBtn showBtn') { if (e.target.innerText === '+') { e.target.innerText = '-'; e.target.style.backgroundColor = 'red'; } else { e.target.innerText = '+'; e.target.style.backgroundColor = '#337ab7'; } } else { e.stopPropagation(); } });
单击单元格时,如果单击的目标不是具有“clickBtn”和“showBtn”类的元素,则会停止事件传播.这就是为什么现在只有clickBtn可以消耗/崩溃的原因.
这部分只是重新创建旧的按钮颜色和文本更改:
if (e.target.innerText === '+') { e.target.innerText = '-'; e.target.style.backgroundColor = 'red'; } else { e.target.innerText = '+'; e.target.style.backgroundColor = '#337ab7'; }
编辑2:
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;