如何解决Childrows 中的嵌套表不适用于动态数据
我正在尝试将 5 层数据转换为数据表。我想实现类似的目标 -> http://live.datatables.net/mukirowi/247/edit。所以我试图在 AngularJS 应用程序的 childrow 中显示一个新的数据表。我的问题是：
当我尝试它工作一半 - 它显示表格但没有数据：
vm.example_dtOptions = create_dt_options();
vm.example_dtColumns = create_dt_columns();
vm.example_dtInstance = {};
function create_dt_options() {
var _data = data;
var _dt_options = DataTableService.create_dt_options_local_data(vm,_data);
_dt_options.rowCallback = rowCallback;
_dt_options.createdRow = createdRow;
return _dt_options;
}
function create_dt_columns() {
var _columns = [
{
className: 'details-control',orderable: false,data: null,defaultContent: ''
},{data: "clientID"},{data: "wip"},{data: "ar"},{data: "ar0_30"},{data: "ar31_60"},{data: "ar61_90"},{data: "ar91_120"},{data: "ar121_"},{data: "suspense"}
];
return _columns;
}
// Callback-Funktion für ganze Zeile (hier: Click-Event auf Zeile)
// Add event listener for opening and closing first level childdetails
function rowCallback( tabrow,data,dataIndex ){
var a;
$( tabrow ).unbind( "click" );
$( tabrow).bind( "click",function(){
$scope.$apply( function(){
// event.stopImmediatePropagation();
var tr = $(tabrow);
var table = vm.example_dtInstance.DataTable;
var row = table.row(tr);
a = row;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
displayChildOfTable1( row);
tr.addClass('shown');
}
});
$timeout(function(){
// vm.show_child1 = true;
});
} );
}
function createdRow(row,dataIndex) {
// Recompiling so we can bind Angular directive
$compile(angular.element(row).contents())($scope);
}
/* -------------------------------- Child1 --------------------------------------------*/
function displayChildOfTable1(row,data){
var string = '<table id="dataTable_child1" class="DTTable2 table kiss-grid">';
string = string + '</table>';
var table = $(string);
// display it in the child row
row.child(table).show();
/*
var a = row.child(table);
console.log("a",a);*/
// Initialise as a DataTable
var Table2 = table.DataTable({
processing: true,data: vm.data,searching: true,paging: true,pageLength: 10,ordering: true,options: vm.child1_dtOptions,// 676
columns: vm.child1_dtColumns,instance: vm.child1_dtInstance
})
}
vm.child1_dtOptions = create_dt_options_child1();
vm.child1_dtColumns = create_dt_columns_child1();
vm.child1_dtInstance = {};
function create_dt_options_child1(){
var _data = data_child;
var _dt_options = DataTableService.create_dt_options_local_data( vm,_data );
_dt_options.rowCallback_child = rowCallback_child1;
_dt_options.createdRow_child = createdRow_child1;
return _dt_options;
}
function create_dt_columns_child1(){
var _columns = [
{
className: 'details-control',{ data: "wip",title: "wip"},{ data: "ar" },{ data: "ar0_30" },{ data: "ar31_60" },{ data: "ar61_90" },{ data: "ar91_120" },{ data: "ar121_" },{ data: "suspense" }
];
return _columns;
}
function createdRow_child1(row,dataIndex) {
// Recompiling so we can bind Angular directive
$compile(angular.element(row).contents())($scope);
}
// Callback-Funktion für ganze Zeile (hier: Click-Event auf Zeile)
// Add event listener for opening and closing second level childdetails
function rowCallback_child1( tabrow,dataIndex ){
console.log("hiiii")
$( tabrow ).unbind( "click" );
$( tabrow).bind( "click",function(){
$scope.$apply( function(){
event.stopImmediatePropagation();
console.log("row",row);
console.log("data",data);
console.log("index",dataIndex);
console.log("click");
var tr = $(tabrow);
console.log("tr",tr);
var table = vm.child1_dtInstance.DataTable;
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
// Destroy the Child Datatable
// $('#cl' + data.clientID).DataTable().destroy();
}
else {
// Open this row
//displayChildOfTable2( row);
tr.addClass('shown');
}
});
} );
}
但不是那样：
vm.example_dtOptions = create_dt_options();
vm.example_dtColumns = create_dt_columns();
vm.example_dtInstance = {};
function create_dt_options() {
var _data = data;
var _dt_options = DataTableService.create_dt_options_local_data(vm,function(){
$scope.$apply( function(){
// event.stopImmediatePropagation();
/*console.log("row",dataIndex);
console.log("click");
*/
var tr = $(tabrow);
// console.log("tr",tr);
var table = vm.example_dtInstance.DataTable;
var row = table.row(tr);
a = row;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
// Destroy the Child Datatable
// $('#cl' + data.clientID).DataTable().destroy();
}
else {
// Open this row
displayChildOfTable1( row);
//a.child.show();
tr.addClass('shown');
}
});
$timeout(function(){
// vm.show_child1 = true;
});
} );
}
function createdRow(row,dataIndex) {
// Recompiling so we can bind Angular directive
$compile(angular.element(row).contents())($scope);
}
/* ---------------------------------------------------------------------------------------------------------------*/
/* -------------------------------- Anfang DeFinition Child1 Tabelle--------------------------------------------*/
function displayChildOfTable1(row,data){
console.log("hi vom child")
var string = '<table id="dataTable_child1"' +
' datatable=""' + ' dt-options="vm.child1_dtOptions"' +
' dt-columns="vm.child1_dtColumns"' +
' dt-instance="vm.child1_dtInstance"' +
' class="DTTable2 kiss-grid" >';
string = string + '</table>';
var table = $(string);
// display it in the child row
row.child(table).show();
}
vm.child1_dtOptions = create_dt_options_child1();
vm.child1_dtColumns = create_dt_columns_child1();
vm.child1_dtInstance = {};
function create_dt_options_child1(){
var _data = data_child;
var _dt_options = DataTableService.create_dt_options_local_data( vm,dataIndex) {
// Recompiling so we can bind Angular directive
$compile(angular.element(row).contents())($scope);
}
/* ---------------------------------------------------------------------------------------------------------------
-------------------------------- Anfang DeFinition Child1 Tabelle--------------------------------------------*/
// Callback-Funktion für ganze Zeile (hier: Click-Event auf Zeile)
// Add event listener for opening and closing second level childdetails
function rowCallback_child1( tabrow,tr);
var table = vm.child1_dtInstance.DataTable;
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
// Destroy the Child Datatable
// $('#cl' + data.clientID).DataTable().destroy();
}
else {
// Open this row
//displayChildOfTable2( row);
tr.addClass('shown');
}
});
} );
}
我认为 angular 不会注册新的子表。我该如何解决？预先感谢您的帮助
环境：-角度版本：AngularJS v1.5.7
- jquery 版本：jQuery JavaScript 库 v2.2.1
- 数据表版本：dt-1.10.18
- 角度数据表版本：角度数据表 - v0.5.4
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
