Question

我有一个angular datatable的嵌套数据，我试图在行点击功能上创建另一个数据表.. 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 table 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);
}

返回角度数据表rowCallback函数的角度数据

1 个答案: