javascript - 在 Angular 数据表 rowCallback 函数上返回 Angular 数据表

Question

我有一个带有嵌套数据的 angular 数据表，我正在尝试在行点击函数上创建另一个数据表。父数据表的 rowCallBack 函数。

这是我的外部数据表 html；

<table id="tblEmailsByCase" datatable="" dt-options="dtCaseOptions" dt-columns="dtCaseColumns" dt-instance="dtCaseInstance" class="display table table-striped table-bordered table-hover">
    <!-- THIS TABLE IS GENERATED DYNAMICALLY -->
</table>

这是我生成数据表的方式；

    // adding btn column to list

    if($scope.lstEmailsByCases[i].users != null && $scope.lstEmailsByCases[i].users.length > 0 )
    {
        $scope.lstEmailsByCases[i].btn = '<button id="' + 'btn' + i + '">+</button>';
    }

// creating table's column..

    $scope.dtCaseInstance = {};
    $scope.dtCaseOptions = DTOptionsBuilder.fromSource($scope.lstEmailsByCases)
        .withOption('data', $scope.lstEmailsByCases) //pass data source here
        .withOption('dataSrc', '')
        .withOption('rowCallback', rowCallbackCases)
        .withOption('createdRow', createdRowCases)

    //define columns
    $scope.dtCaseColumns = [
        DTColumnBuilder.newColumn('btn').withTitle(''), //this is to show the '+' button
        DTColumnBuilder.newColumn('caseId').withTitle('Case Id'),


    ];

//CALLED WHEN ROW IS CREATED
function createdRowCases(row, data, dataIndex) {
    // Recompiling so we can bind Angular directive
    $compile(angular.element(row).contents())($scope);
}

//HERE IT IS CALLED WHENEVER ROW IS CLICKED
function rowCallbackCases(tabRow, data, dataIndex) {
    if(tabRow.cells[0].firstChild != null)
        {
            $(tabRow).unbind('click');
            $(tabRow).on('click', function() {

                $(this).find('.a1-icon').toggleClass('fa-rotate-180');
                var tr = $(tabRow);
                var table = $scope.dtCaseInstance.DataTable;
                var row = table.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                    tabRow.cells[0].firstChild.innerHTML = "+"; //change button value to +
                } else if (typeof row.child(formatCaseUsersTable(row.data())) != "undefined") {
                    // Open this row
                    row.child(formatCaseUsersTable(row.data())).show();
                    tr.addClass('shown');
                    tabRow.cells[0].firstChild.innerHTML = "-"; //change button value to -
                }

            });
        }
}

它工作得很好，生成的数据表是这样的；

现在我正尝试在 + 按钮点击时生成另一个数据表。这就是我在从 调用的 formatCaseUsersTable 函数中所做的此数据表的 rowCallBack 函数。这是该函数；

//CALLED TO CREATE SUB GRID
function formatCaseUsersTable(d) {

    //if detail does not exist
    if (typeof d.users == "undefined") return;

    //defining table
    var html2 = '<table id="tblCaseUsers" datatable="" dt-options="dtCaseUsersOptions" dt-columns="dtCaseUsersColumns" dt-instance="dtCaseUsersInstance" class="display table table-striped table-bordered table-hover">';

    $scope.dtCaseUsersInstance = {};
    $scope.dtCaseUsersOptions = DTOptionsBuilder.fromSource(d.users)
        .withOption('data', d.users) //pass data source here
        .withOption('dataSrc', '')
        .withOption('rowCallback', rowCallbackCaseUsers)
        .withOption('createdRow', createdRowCaseUsers)

    //define columns
    $scope.dtCaseUsersColumns = [
        DTColumnBuilder.newColumn('btn').withTitle(''), //this is to show the '+' button
        DTColumnBuilder.newColumn('userId').withTitle('User Id'),
        DTColumnBuilder.newColumn('userName').withTitle('User Name'),


    ];

  //add button in each row.. this button will be used to show user that the row is expandable
    for (i = 0; i < d.users.length; i++) {
        if(d.users[i].emailsDetail != null && d.users[i].emailsDetail.length > 0 )
        {
            d.users[i].btn = '<button id="' + 'btn' + i + '">+</button>';
        }
    }

    return html2;
}

但它没有相应地工作..这是在 + 按钮点击时创建的 html..

当我检查生成的 html 时，表格定义是这样的；

但它没有显示在网格中，也没有任何列的详细信息。

有人知道我错过了什么吗？？

Answer 1

正如我们从您的代码中看到的那样 - formatCaseUsersTable 方法只是将 html2 作为字符串返回，没有 compiling it ，所以 AngularJS 可以附加 datatable directive到表 element .你必须使用 $compile service将字符串编译成模板，所以这应该适用于您的情况:

function formatCaseUsersTable(d) {
    //..

    //defining table
    var html2 = '<table id="tblCaseUsers" datatable="" dt-options="dtCaseUsersOptions" dt-columns="dtCaseUsersColumns" dt-instance="dtCaseUsersInstance" class="display table table-striped table-bordered table-hover">';
    //....

    return $compile(angular.element(html2))($scope);
}