单击复选框时，可扩展和可折叠功能正在工作

Posted 2023-03-05

【中文标题】单击复选框时，可扩展和可折叠功能正在工作

【英文标题】：Expandable and collapsible feature is working when clicking the checkbox

【发布时间】：2016-11-29 19:35:58

【问题描述】：

我使用jquery datatable 创建了一个表。我还使用datatable 的响应功能使其响应。代码工作正常，但我面临的问题是表格的第一列有一个复选框，当我们将表格宽度调整为宽度较小时，可折叠选项将如下所示

现在，当我们单击checkbox 时，可折叠功能正在工作。

我的代码如下所示

Working Demo

<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>

谁能告诉我点击checkbox时如何防止折叠和展开

【问题讨论】：

由于某种原因无法在您的示例中运行，所以我没有发布答案，但这看起来很有希望 - 创建一个新列，然后将其用作详细信息选项的目标 datatables.net/reference/option/responsive.details.target

原因是你放了collapsible button和checkbox是同一个td。这就是为什么通过检查Checkbox 它启用Collapsible 功能..

和collapsible option 适用于整个first td，而不仅仅是点击plus sign button。

@user55 可折叠按钮是数据表响应插件的一部分，也是第一列的点击功能，我们可以覆盖数据表响应插件

只需在位置 0 添加一个 td，here 是它的工作演示。

【参考方案1】：

只是替换

$(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：

要删除蓝色部分，即文本选择，我必须将这个 css 添加到按钮：

-webkit-touch-callout: none;
-webkit-user-select: none; 
-khtml-user-select: none;
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 

【讨论】：

我们能否从单元格中移除点击功能，并将点击功能仅应用于折叠和展开按钮

可折叠和可展开按钮的颜色变为海军蓝色，单元格的光标可点击仍然存在（但没有动作）

刚刚更新了我的 plunker，你明白我做了什么，为了让所有这些工作，或者你需要解释吗？

如果能给我就更好了。我还看到的另一个问题是，当我双击可折叠的可扩展按钮时，我得到的是蓝色，例如 this

添加一些解释并删除文本选择的蓝色，对不起我的英语，我不是母语人士

【参考方案2】：

只需在位置 0 处再添加一个 td

Here 是它的工作演示

【讨论】：

但是当折叠按钮被隐藏时，新添加的列没有隐藏，我们可以覆盖插件吗

是的，您可以覆盖插件。您可以更改其 CSS 等，但不要更改插件文件。只是多余插件中使用的类/ID，在您的设计文件中添加更改，例如 HTML 文件。

here - 为子 tr 更改 css

我的意思是如果没有可折叠按钮，如何隐藏列，即如果可折叠，新添加的列应该是可见的，如果不是应该隐藏，这将解决我们的问题

我们可以用css实现吗