如何在父子层次结构中显示表格？答案

【问题标题】：How to display table in parent child hierarchy?如何在父子层次结构中显示表格？
【发布时间】：2020-06-11 01:10:34
【问题描述】：

我的数组看起来像这样。

var recursiveArray = [
    {
        "ProductCode": "50007",
        "SerialNumber": 288890,
        "SubAssemblyNumber": 288891,
        "Children": [
            {
            "ProductCode": "50007",
            "SerialNumber": 288891,
            "SubAssemblyNumber": 288892,
            "Children": [
                {
                    "ProductCode": "51660",
                    "SerialNumber": 288892,
                    "SubAssemblyNumber": 288894
                }
            ]
            }, {
                "ProductCode": "51660",
                "SerialNumber": 288891,
                "SubAssemblyNumber": 288893
            }
        ]
    }, {
        "ProductCode": "51660",
        "SerialNumber": 288890,
        "SubAssemblyNumber": 288895,
        "Children": [{
            "ProductCode": "50007",
            "SerialNumber": 288895,
            "SubAssemblyNumber": 288896
        }]
    }
];

jsfiddle

我所做的是在这个小提琴中显示表格，但我找不到如何在更深层次上进行缩进。

我希望输出如下：

【问题讨论】：

对于这种层次结构，ul->li 比 table 更适合使用，因为缩进是自动应用的。
当然，在 ul-li 中会更好，但是需要更多的时间在样式上，并且很难将其他细节与同一级别对齐。即product_code、库存和销毁。
如果您在图片右侧使用 rowspan 6 col 有 6 行，您可以在左侧的单列中使用 ul li 并设置行高以匹配右侧。否则你的方法也可以奏效，祝你好运。

标签： javascript jquery recursion parent-child

【解决方案1】：

您可以使用一个递归函数来跟踪当前缩进级别作为参数。当需要递归调用时，将'&emsp;'连接到参数：

function append(parent, indent = '') {
  for (const item of parent) {
    createElement(item, indent);
    if (item.Children) {
      append(item.Children, indent + '&emsp;');
    }
  }
}
append(recursiveArray); // initial call

直播sn-p：

var recursiveArray = [{
  "ProductCode": "50007",
  "SerialNumber": 288890,
  "SubAssemblyNumber": 288891,
  "Children": [{
    "ProductCode": "50007",
    "SerialNumber": 288891,
    "SubAssemblyNumber": 288892,
    "Children": [{
      "ProductCode": "51660",
      "SerialNumber": 288892,
      "SubAssemblyNumber": 288894
    }]
  }, {
    "ProductCode": "51660",
    "SerialNumber": 288891,
    "SubAssemblyNumber": 288893
  }]
}, {
  "ProductCode": "51660",
  "SerialNumber": 288890,
  "SubAssemblyNumber": 288895,
  "Children": [{
    "ProductCode": "50007",
    "SerialNumber": 288895,
    "SubAssemblyNumber": 288896
  }]
}];


if (recursiveArray.length > 0) {
  $('#AttachedSubAssembly').append(`
                <tr>
                    <th width="60%">Subassy S/N</th>
                    <th width="20%">Product code</th>
                    <th width="10%">Stock</th>
                    <th width="10%">Destroy</th>
                </tr>
            `);
}
function append(parent, indent = '') {
  for (const item of parent) {
    createElement(item, indent);
    if (item.Children) {
      append(item.Children, indent + '&emsp;');
    }
  }
}

function createElement(item, indent) {
  $('#AttachedSubAssembly').append(`
<tr id="Row${item.SubAssemblyNumber}">
<td> ${indent} <a class="btn-green bg-transparent" href="serial_number.html?serial_number=${item.SubAssemblyNumber}">
${item.SubAssemblyNumber}</a></td>
<td>${item.ProductCode}</td>
<td>
<div class="col-md-1">
<div class="radio radio-success">
<input type="radio" name="Options${item.SubAssemblyNumber}" id="Stock${item.SubAssemblyNumber}" value="Stock">
<label for="Stock${item.SubAssemblyNumber}" class="main-label"></label>
</div>
</div>
</td>
<td>
<div class="col-md-1">
<div class="radio radio-success">
<input type="radio" name="Options${item.SubAssemblyNumber}" id="Destroy${item.SubAssemblyNumber}" value="Destroy" checked="checked">
<label for="Destroy${item.SubAssemblyNumber}" class="main-label"></label>
</div>
</div>
</td>
</tr>
`);
}
append(recursiveArray);

table tr td {
    border-style: solid;
    border-width: 1px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="AttachedSubAssembly" class="table">
</table>

【讨论】：

感谢@CertainPerformance 快速解决了我的问题。正是我想要的。我被困在一个递归函数中，不知道如何跟踪深度水平。再次感谢