单击复选框时可扩展和可折叠功能正在工作 [英] Expandable and collapsible feature is working when clicking the checkbox
问题描述
我使用 jquery datatable 创建了一个表。我也使用 datatable 的响应功能来使其响应。代码工作正常，但我面临的问题是，表的第一列是有一个复选框，当我们调整表宽度到较小的宽度可折叠选项将出现如下所示
< table id =exampleclass =table table-striped table-hover dt-responsive display nowrapcellspacing =0>
< thead>
< tr>
< th>< / th>
< th>名称< / th>
< th>位置< / th>
< th> Office< / th>
< th>年龄< / th>
< th>开始日期< / th>
工资< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td><输入类型=复选框>< / td>
< td>泰克尼克森< / td>
< td>系统架构师< / td>
< td>爱丁堡< / td>
< td> 61< / td>
< td> 2011/04/25< / td>
< td> $ 320,800< / td>
< / tr>
< tr>
< td><输入类型=复选框>< / td>
< td>加勒特温特斯< / td>
< td>会计师< / td>
< td>东京< / 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 src =dataTables.responsive.jstype =text / javascript>< / script>
< script>
$（document）.ready（function（）{
$（'＃example'）
.DataTable（{
responsive：true，
dom：'<toplf> t<bottompi><clear>'
}）;
}）;
< / script>
任何人都可以告诉我如何在单击时防止可折叠和展开， checkbox
<$ p $ {
responsive：true，
$（$＃$） dom：'<topif> t<bottompi><clear>'
}）;
}）;
by
$（document）.ready（function（）{
$（'＃example'）。DataTable（{
responsive：true，
dom：'< （'click mousedown mouseup'）;topif> t <clear>'
}）;
'（'td'）。 ，函数（e）{
if（e.target.type ==='checkbox'）{
e.stopPagagation（）;
}
}）;
}）;
如果您点击复选框，此部分将停止点击传播。
$ （'点击mousedown mouseup'，函数（e）{
if（e.target.type ==='b $ b pre'code> $''td'复选框'）{
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;
光标：指针;
top：9px;
left：4px;
height：14px;
width：14px;
位置：绝对;
颜色：白色;
border：2px纯白色;
border-radius：14px;
box-shadow：0 0 3px＃444;
box-sizing：content-box;
text-align：center;
font-family：'Courier New'，Courier，等宽;
line-height：14px;
背景颜色：＃337ab7;
}
并删除旧的：
table.dataTable.dtr-inline.collapsed> tbody> tr> td：first-child：before，table.dataTable.dtr-inline.collapsed> tbody> tr>第一个孩子：在{
display：none;
}
现在我需要更改单元格单击行为，只有当您单击（''点击mousedown mouseup'，函数（e）'）。如果（e.target.innerText ==='+'）{
e.target.innerText = ' - ';
e.target.style.backgroundColor ='red';
} else {
e.target.innerText ='+';
e.target.style （）;
}
}）;
单击单元格时，如果点击的目标不是具有'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：
<要删除蓝色部分，这是文本选择，我不得不将这个CSS添加到按钮：
-webkit- touch-callout：无;
-webkit-user-select：none;
-khtml-user-select：none;
-moz-user-select：none;
-ms-user-select：none;
user-select：none;
I have created a table using jquery datatable. I am also using the responsive feature of the datatable for making it responsive. The code is working fine but the issue I am facing is that the the first column of the table is having a check-box and when we resize the table width to a lesser width collapsible option will appear like as shown below
Now when we click the checkbox the collapsible feature is working.
My code is as given below
<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>
Can anyone please tell me how to prevent collapsible and expandable when we click the checkbox
just replace
$(document).ready(function () {
$('#example').DataTable({
"responsive": true,
"dom": '<"top"lf>t<"bottom"pi><"clear">'
});
});
by
$(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();
}
});
});
this part will stop click propagation if you clicked on a checkbox
$('td').on('click mousedown mouseup', function(e) {
if (e.target.type === 'checkbox') {
e.stopPropagation();
}
});
plunker: http://plnkr.co/edit/PCHdDM7UGD0BLXoDhhD6?p=preview
EDIT:
To remove cell click functionnality and add it only to collapse/expend button, I had to create a new html element and put it in the cell: '<div class="clickBtn">+</div>'
Why? Because the old button was a before pseudo:element so it was not actually in the dom. I needed an element in the dom to only allow expend/collapse when this particular element is clicked and not the whole cell.
Then I'm giving this button the css of the old button
.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;
}
and remove the old one:
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
display: none;
}
Now I need to change the cell click behavior, to only occur if you click on the collapse/expend button.
$('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();
}
});
When you click on the cell, if the target of your click is not an element with 'clickBtn' and 'showBtn' class it stops the event propagation. That's why only the clickBtn can expend/collapse now.
this part just recreate the old button color and text changing :
if (e.target.innerText === '+') {
e.target.innerText = '-';
e.target.style.backgroundColor = 'red';
} else {
e.target.innerText = '+';
e.target.style.backgroundColor = '#337ab7';
}
EDIT 2 :
To remove the blue part, which is text selecting, I had to add this css to the button:
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
这篇关于单击复选框时可扩展和可折叠功能正在工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
