数据表 - 忽略使用 colspan 向下钻取的行

DataTables - Ignore drill down rows with colspan

本文关键字：钻取 colspan 数据表      更新时间：2023-09-26

我正在将数据表用于我的Web应用程序中的表。该表列出了数据库中的一些数据。

我决定向下钻取，当您单击该行时，它将切换下面的另一行以显示更多详细信息。

我现在有这个。

<tr class="main-row">
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr class="drill-down-row">
    <td colspan="3">
        // Drill down content here
    </td>
</tr>

.JS：

$(document).on('click', '.main-row', function(event){   
    var $line = $(this);
        $line.next('.drill-down-row').toggle();
});

添加向下钻取行后，数据表中断，因为新行只有 1 个单元格。我到处搜索，找不到忽略该行的方法。

我真的需要使用 django 的模板渲染器，并且不喜欢使用 JavaScript 模板。

数据表要求表中的每一行具有相同数量的单元格。

这是您需要做的：

  1. 缓存所有向下钻取行
  2. 将 jQuery 数据中的缓存行放入.main-row
  3. 从表中删除所有向下钻取行
  4. 初始化数据表
  5. 单击时绑定.main-row以将数据中的缓存行插入其自身。

Javascript：

$(function(){
    // CACHE THEN DELETE ALL DRILL DOWN ROWS !!
    $('.main-row').each(function(){
        var $row = $(this);
        var $rowmore = $row.next('.drill-down-row');
        if($rowmore.length>0){
            $row.data('cached-row', $rowmore);
        }
    });
    $('.drill-down-row').remove();
    // INITIALIZE YOUR DATATABLE HERE !!!!

    $(document).on('click', '.main-row', function(event){   
        var $line = $(this);
        if($line.data('cached-row')){
            $line.data('cached-row').toggle().insertAfter($line);
        }
    });
});
相关文章：