5

我正在使用 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 级深度时。

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

4

2 回答 2

6

数据表已以某种方式更新，现在将子行添加到父行非常简单：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”插入到一个“td”中，其 colspan 与您的表格大小相同，并且显然会破坏列对齐）

.child(
    '<tr>'+
        '<td>'+rowIdx+'.1</td>'+
        '<td>'+rowIdx+'.2</td>'+
        '<td>'+rowIdx+'.3</td>'+
        '<td>'+rowIdx+'.4</td>'
    '</tr>'
)
于 2014-05-14T08:36:11.570 回答
0

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

于 2012-09-11T02:53:42.050 回答