Javascript 使用jQuery Datatable显示分层数据

我从服务器上得到的是一个父对象列表，每个父对象由零个或多个子对象组成。有点像下面

var data = [{
    "Id" : 1,
    "permissionValue" : 7,
    "child" : { //only one child object for simplicity
      "Id" :2,
      "permissionValue" : 7
    }
  }];

我想将此数据加载到jQuery数据表中。实现一个rowCallback函数（添加一些CSS类），如下所示：

tableOptions.rowCallBack = function(row,data,index){
    var api = this.api();
    api.rows.add(data.child).draw(); //not sure whether draw is necessary
  };
tableOptions.data = data;
that.dataTable = $("#dataTable").DataTable(tableOptions);

---

毫不奇怪，只有父对象加载。我明白这不是数据传递的方式。尽管如此，了解这种层次结构数据是否可以通过努力来显示还是很好的。

请参阅下面的片段，以演示潜在的解决方案。您需要对其进行调整以匹配您的数据结构，因为您在问题中对其进行了一些简化

此代码使用这些方法首先检查行是否已显示，如果已显示，则隐藏它，否则显示它

$（文档）.ready（函数（）{
var dataInJson=[{
“数据”：{
“名称”：“b1”，
“街道”：“s1”，
“城市”：“c1”，
“部门”：10，
“办事处”：15
},
“儿童”：[{
“数据”：{
“部门”：“人力资源部”，
“主管”：“Isidor Bristol”，
“地板”：1，
“雇员”：15
},
“儿童”：[{
“数据”：{
“名称”：“Klement Nikodemos”，
“电话”：“+938462”，
“雇用日期”：“2010年1月1日”，
“id”：3456
},
“儿童”：[]
}, {
“数据”：{
“姓名”：“Madhava Helmuth”，
“电话”：“+348902”，
“雇用日期”：“2002年5月23日”，
“id”：1234
},
“儿童”：[]
}, {
“数据”：{
“姓名”：“安德里亚·杰西”，
“电话”：“456123”，
“雇用日期”：“2011年10月23日”，
“id”：9821
},
“儿童”：[]
}
]
}, {
“数据”：{
“部门”：“发展”，
“主管”：“吉姆·林伍德”，
“地板”：2，
“雇员”：18
},
“儿童”：[{
“数据”：{
“姓名”：“Origenes Maxwell”，
“电话”：“345892”，
“雇用日期”：“2004年2月1日”，
“身份证”：6234
},
“儿童”：[]
}
]
}, {
“数据”：{
“部门”：“测试”，
“主管”：“Zekeriya Seok”，
“楼层”：4，
“雇员”：11
},
“儿童”：[]
}]
}, {
“数据”：{
“名称”：“b2”，
“街道”：“s10”，
“城市”：“c2”，
"部门":三,，
“办公室”：10
},
“儿童”：[{
“数据”：{
“部门”：“发展”，
“主管”：“Gallagher Howie”，
“楼层”：8，
“雇员”：24
},
“儿童”：[{
“数据”：{
“名称”：“达科他州”
},
“儿童”：[]
}
]
}, {
“数据”：{
“部门”：“测试”，
“主管”：“雪莉·盖尔”，
“楼层”：4，
“雇员”：11
},
“儿童”：[]
}]
}, {
“数据”：{
“名称”：“b3”，
“街道”：“s3”，
“城市”：“c3”，
"部门":二,，
“办公室”：1
},
“儿童”：[{
“数据”：{
“部门”：“发展”
},
“儿童”：[{
“数据”：{
“名称”：“达科他州”
},
“儿童”：[]
}
]
}, {
}]
},
{
“数据”：{
“名称”：“b4”，
“城市”：“c4”
},
“儿童”：[]
}
];
函数构建表（idOfTableParentElement，tableDataInJson）{
var deepCopyOfData=JSON.parse（JSON.stringify（tableDataInJson））；
var countrowOccurrence=（idOfTableParentElement.match（/row/g）| |[]）长度；
var表_id=0；
var tabledString=“”；
如果（CountRowOccurrence>0）{
var rowIds=新数组（）；
var copyIdOfTableParentElement=idOfTableParentElement
对于（var i=CountRowOccurrence；i>0；i--）{
var firstIndexOfTabPosition=copyIdOfTableParentElement.indexOf（“制表符”）+“制表符”。长度；
copyIdOfTableParentElement=copyIdOfTableParentElement.substring（firstIndexOfTabPosition，copyIdOfTableParentElement.length）；
var rowPosition=copyIdOfTableParentElement.indexOf（“row_u211;”）+“row_211;”.length；
copyIdOfTableParentElement=copyIdOfTableParentElement.substring（行位置，copyIdOfTableParentElement.length）；
var rowId=“”；
if（copyIdOfTableParentElement.indexOf（“制表符”）！=-1）
rowId=copyIdOfTableParentElement.substring（0，copyIdOfTableParentElement.indexOf（“tab”）；
其他的
rowId=copyIdOfTableParentElement.substring（0，copyIdOfTableParentElement.length）；
push（parseInt（rowId））；
}
rowIds.forEach（函数（层次位置）{
deepCopyOfData=JSON.parse（JSON.stringify（deepCopyOfData[hierarchyPosition].kids））；
});
表_id=idOfTableParentElement；
tableIdString=idOfTableParentElement+“_tab_“+countrowOccurrence.toString（）；
}否则{
tabledString=“tab_”+countrowOccurrence.toString（）；
}
var tableInHtml=“”；
tableInHtml+=buildTableContent（tableIdStri