角度数据表嵌套行渲染

Posted 2023-05-07

【中文标题】角度数据表嵌套行渲染

【英文标题】：Angular datatables nested rows rendering

【发布时间】：2015-08-06 06:59:27

【问题描述】：

有没有更好的方法在角度数据表中显示嵌套表？ 我通过使用 rowCallback 和设置点击事件解决了我的问题：

$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
    .withOption('rowCallback', rowCallback)

在点击处理程序中，我得到 dt-instance 并使用来自数据表实例的行数据构建 html。

function rowCallback(tabRow, data, dataIndex) 
    $(tabRow).unbind('click');
    $(tabRow).on('click', function () 
        console.log('click');
        $(this).find('.a1-icon').toggleClass('fa-rotate-180');
        var tr = $(tabRow);
        var table = $scope.dtInstance.DataTable;
        var row = table.row(tr);

        if ( row.child.isShown() ) 
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        
        else 
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        
    );

但感觉有点奇怪，特别是对于 Angular。这是带有完整简化代码的 Plunker http://plnkr.co/edit/gVf926obJKTXvXU7fLdA?p=preview

【参考方案1】：

 $(tabRow).on('click', function () )

//instead of this "on" event Use "load"

 $(tabRow).load('click', function () )