使用jQuery Datatable顯示分層數據

Question

我從服務器獲得的是父對象列表，每個父對象由零個或多個子對象組成。 有點像以下

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);

毫不奇怪，只有父對象加載。 我知道這不是應該如何傳遞數據。 不過，很高興知道是否可以輕松顯示這種分層數據。

Answer 1

請參閱下面的代碼片段，以獲取潛在解決方案的演示。 您需要對其進行調整以匹配您的數據結構，因為您在問題中已對其進行了一些簡化。

此代碼利用row（）。child方法首先檢查是否已顯示行，如果已顯示則將其隱藏，否則將其顯示。

 $(document).ready(function() { var dataInJson = [{ "data": { "name": "b1", "street": "s1", "city": "c1", "departments": 10, "offices": 15 }, "kids": [{ "data": { "department": "HR", "supervisor": "Isidor Bristol", "floor": 1, "employees": 15 }, "kids": [{ "data": { "name": "Klement Nikodemos", "phone": "+938462", "hire_date": "January 1, 2010", "id": 3456 }, "kids": [] }, { "data": { "name": "Madhava Helmuth", "phone": "+348902", "hire_date": "May 23, 2002", "id": 1234 }, "kids": [] }, { "data": { "name": "Andria Jesse", "phone": "456123", "hire_date": "October 23, 2011", "id": 9821 }, "kids": [] } ] }, { "data": { "department": "development", "supervisor": "Jim Linwood", "floor": 2, "employees": 18 }, "kids": [{ "data": { "name": "Origenes Maxwell", "phone": "345892", "hire_date": "February 1, 2004", "id": 6234 }, "kids": [] } ] }, { "data": { "department": "testing", "supervisor": "Zekeriya Seok", "floor": 4, "employees": 11 }, "kids": [] }] }, { "data": { "name": "b2", "street": "s10", "city": "c2", "departments": 3, "offices": 10 }, "kids": [{ "data": { "department": "development", "supervisor": "Gallagher Howie", "floor": 8, "employees": 24 }, "kids": [{ "data": { "name": "Wat Dakota" }, "kids": [] } ] }, { "data": { "department": "testing", "supervisor": "Shirley Gayle", "floor": 4, "employees": 11 }, "kids": [] }] }, { "data": { "name": "b3", "street": "s3", "city": "c3", "departments": 2, "offices": 1 }, "kids": [{ "data": { "department": "development" }, "kids": [{ "data": { "name": "Wat Dakota" }, "kids": [] } ] }, { }] }, { "data": { "name": "b4", "city": "c4" }, "kids": [] } ]; function buildTable(idOfTableParentElement, tableDataInJson) { var deepCopyOfData = JSON.parse(JSON.stringify(tableDataInJson)); var countRowOccurence = (idOfTableParentElement.match(/row/g) || []).length; var table_id = 0; var tableIdString = ""; if (countRowOccurence > 0) { var rowIds = new Array(); var copyIdOfTableParentElement = idOfTableParentElement for (var i = countRowOccurence; i > 0; i--) { var firstIndexOfTabPosition = copyIdOfTableParentElement.indexOf("tab_") + "tab_".length; copyIdOfTableParentElement = copyIdOfTableParentElement.substring(firstIndexOfTabPosition, copyIdOfTableParentElement.length); var rowPosition = copyIdOfTableParentElement.indexOf("row_") + "row_".length; copyIdOfTableParentElement = copyIdOfTableParentElement.substring(rowPosition, copyIdOfTableParentElement.length); var rowId = ""; if (copyIdOfTableParentElement.indexOf("tab_") != -1) rowId = copyIdOfTableParentElement.substring(0, copyIdOfTableParentElement.indexOf("tab_")); else rowId = copyIdOfTableParentElement.substring(0, copyIdOfTableParentElement.length); rowIds.push(parseInt(rowId)); } rowIds.forEach(function(hierarchyPosition) { deepCopyOfData = JSON.parse(JSON.stringify(deepCopyOfData[hierarchyPosition].kids)); }); table_id = idOfTableParentElement; tableIdString = idOfTableParentElement + "_tab_" + countRowOccurence.toString(); } else { tableIdString = "tab_" + countRowOccurence.toString(); } var tableInHtml = "<table id=\\"" + tableIdString + "\\" class=\\"stripe row-border order-column\\">"; tableInHtml += buildTableContent(tableIdString, deepCopyOfData); tableInHtml += "</table>"; var a = $('#exampleTable tbody tr'); return tableInHtml; } function buildTableContent(tableIdString, tableDataInJson) { // find data with max number of proerties var positionOfDataWithMaxProperties = 0; var maxNumberOfProperties = 0; for (var i = 0; i < tableDataInJson.length; i++) { if (typeof(tableDataInJson[i].data) !== 'undefined') { if (Object.keys(tableDataInJson[i].data).length > maxNumberOfProperties) { maxNumberOfProperties = Object.keys(tableDataInJson[i].data).length; positionOfDataWithMaxProperties = i; } } } // create array of properties var properties = new Array(); Object.keys(tableDataInJson[positionOfDataWithMaxProperties].data).forEach(function(key) { properties.push(key); }); // create header of table var TableMainHeader = "<thead><tr>"; for (var i = 0; i < tableDataInJson.length; i++) { if (typeof(tableDataInJson[i].kids) !== 'undefined' && tableDataInJson[i].kids.length > 0) { TableMainHeader += "<th></th>"; break; } } properties.forEach(function(property) { TableMainHeader += "<th>" + property + "</th>"; }); TableMainHeader += "</tr></thead>"; // create body of table var TableMainBody = "<tbody>"; for (var i = 0; i < tableDataInJson.length; i++) { if (typeof(tableDataInJson[i].data) !== 'undefined') { TableMainBody += "<tr id=\\"" + tableIdString + "_row_" + parseInt(i) + "\\" >"; if (TableMainHeader.indexOf("<th></th>") != -1) { if (tableDataInJson[i].kids.length > 0) TableMainBody += "<td><img src=\\"http://blog.picol.org/wp-content/themes/icon_blog/images/css_images/arrow_right_16.png\\"></td>"; else TableMainBody += "<td></td>"; } properties.forEach(function(property) { if (Object.keys(tableDataInJson[i].data).indexOf(property) === -1) TableMainBody += "<td></td>"; else TableMainBody += "<td>" + tableDataInJson[i].data[property] + "</td>"; }); TableMainBody += "</tr>"; } }; TableMainBody += "</tbody>"; return TableMainHeader + TableMainBody; } //Run On HTML Build $(document).ready(function() { var divElement = $("#example").append(buildTable("example", dataInJson)); var tables = new Array(); //Initialse DataTables, with no sorting on the 'details' column var table = divElement.children().first().DataTable({ "paginate": false, "lengthChange": false, "searching": false, "ordering": false, "info": false, "autoWidth": false }); tables.push([divElement.children().first().children().first().attr("id"), table]); $(document).on('click', '#example tbody tr', function() { var $row = $(this); var parentTable = new Object(); var parentTableId = $row.parent().parent().attr("id"); for (var i = 0; i < tables.length; i++) { if (tables[i][0] === $row.parent().parent().attr("id")) { parentTable = tables[i][1]; break; } } if (parentTable.row(this).child.isShown()) { /* This row is already open - close it */ parentTable.row(this).child.hide(); } else { if ($(this).children().first().children().first().is("img")) { /* Open this row */ var tableInString = buildTable($row.attr("id"), dataInJson); var tableAsJQueryNode = $('<div/>').html(tableInString).contents(); parentTable.row(this).child(tableAsJQueryNode, 'details').show(); var newtable = $('#' + tableAsJQueryNode.attr("id")).DataTable({ "paginate": false, "lengthChange": false, "searching": false, "ordering": false, "info": false, "autoWidth": false }); if (tables.some(function(a) { return a[0] !== tableAsJQueryNode.attr("id") })) { tables.push([tableAsJQueryNode.attr("id"), newtable]); } } } }); }); }); 

 <link href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> <div id="example"></div>