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

Question

我正在使用jQuery dataTables插件为我们的应用程序构建高级表.其中一个要求是拥有"可折叠"行(不是组!):例如,行代表广告系列,他们可能有子广告系列.子行的结构(在基本情况下)与父表中的相同 - 相同的单元格,相同的数据类型.

但是,子行不应该影响父表本身:我的意思是,每页的行数应该保持不变,子行不应该与父行分开排序,它们应该始终保持绑定.因此我不能使用fnAddData() API函数.

另一个棘手的要求是可能有多级可折叠行(例如儿童活动的儿童活动等)

我正在使用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中实现可折叠行？

Answer 1

数据表已经以某种方式进行了更新,现在将子行添加到父行非常简单:http://datatables.net/reference/api/row().child()

其中一个不太明显的事情是,如果你想为你的子行使用相同的布局,比如父行,你需要使用jquery选择器来传递节点而不是字符串(在文档中写但是我第一次错过了它).

Doint是正确的:

.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>'
)

Answer 2

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