jQuery dataTables 使用 fnOpen(） API 函数添加多个可折叠行

jQuery dataTables add multiple collapsible rows using the fnOpen() API function

本文关键字：添加 可折叠 函数 API 使用 dataTables fnOpen jQuery      更新时间：2023-09-26

我正在使用jQuery dataTables插件为我们的应用程序构建高级表。其中一个要求是具有"可折叠"行（而不是组！）：例如，行代表广告系列，并且它们可能具有子广告系列。子行的结构（在基本情况下）与父表中的结构相同 - 相同的单元格，相同的数据类型。

但是，子行

不应影响父表本身：我的意思是，每页的行数应该保持不变，子行不应该与父行分开排序，它们应该始终保持绑定。因此，我不能为此使用 fnAddData（） API func。

另一个棘手的要求是可以拥有多级可折叠的行（例如，子广告系列中的子广告系列等）。

我为此使用了 fnOpen（） API 函数，它允许"打开"任何行，向其附加一个子块，并且您通常可以在那里插入任何您想要的内容。它在 dataTables 1.8.2 中运行良好，我使用这样的代码来生成子行：

$(childRowData).each(function(){
    row = $(oTable.fnOpen(row.get(0), $(this), "child_row"));
    $(row).addClass('child_row');
});
通常，它"打开"

当前行（如上所述），在子行中插入数据，然后在循环中"打开"子行，向其添加子行等。

但是从 dataTables 1.9.0 开始，它似乎只允许"打开"父行，并且只允许"打开"一次。

当然，我可以创建一个子表，将 $.dataTable（） 应用于它并将其插入子行，但这似乎是一个有点蹩脚且昂贵的解决方案，尤其是当我们可能有 3-4 个深度级别时。

有没有其他方法可以在数据表中实现可折叠行？

数据表已经以某种方式更新，现在将子行添加到父行非常简单：http://datatables.net/reference/api/row（）.child（）

有

一件事不是很明显，如果你想对你的子行使用相同的布局，就像对父行一样，你需要使用 jquery 选择器，用于传递节点而不是字符串（写在文档中，但我第一次错过了）。

正确的是：

.child(
    $(
        '<tr>'+
            '<td>'+rowIdx+'.1</td>'+
            '<td>'+rowIdx+'.2</td>'+
            '<td>'+rowIdx+'.3</td>'+
            '<td>'+rowIdx+'.4</td>'
        '</tr>'
    )
)

但是这样做是错误的：（它会将您的"tr"插入到带有表格大小的 colspan 的"td"中，并且显然会破坏列对齐）

.child(
    '<tr>'+
        '<td>'+rowIdx+'.1</td>'+
        '<td>'+rowIdx+'.2</td>'+
        '<td>'+rowIdx+'.3</td>'+
        '<td>'+rowIdx+'.4</td>'
    '</tr>'
)

当您创建具有子子项的子行时，您可能最好推出自己的解决方案。几周前，我正在用数据表做一些类似的事情，这是我能想到的最好的。

相关文章：