Javascript 从层次结构MySQL表生成HTML列表

我有一个这样的层次表

id| name         | parent_id | header 
1 | Assets       | 0         | Y
2 | Fixed Assets | 1         | Y
3 | Asset One    | 2         | N
4 | Income       | 1         | N

我通过axios提取这些数据，并尝试以下面的方式进行渲染

我正在尝试生成一个UL LI列表，如下所示

<ul>
    <li id="asset-main-id">
        Assets
        <ul>
            <li id="fixed-asset-header">
                Fixed Assets
                <ul>
                    <li id="fa-asset-child-one">Asset One</li>
                </ul>
            </li>
            <li id="asset-child">Income Receiveables</li>
        </ul>
    </li>
</ul>

---

我只想给你一个选择。 如果您可以更改表示数据的方式，那么会容易得多。这可能取决于您对提取数据的服务的控制

例如：

var data = {
  "id": 1,
  "name": "Assets",
  "header": true,
  "children": [
    {
      "id": 2,
      "name": "Fixed Assets",
      "header": true,
      "children": [
        {
          "id": 3,
          "name": "Asset One",
          "header": false
        }
      ]
    },
    {
      "id": 1,
      "name": "Income",
      "header": false
    }
  ]
}

---

在此之后，这个示例将为您提供一个解决方案：

我只想给您一个替代方案。 如果您可以更改表示数据的方式，那么会容易得多。这可能取决于您对提取数据的服务的控制

例如：

var data = {
  "id": 1,
  "name": "Assets",
  "header": true,
  "children": [
    {
      "id": 2,
      "name": "Fixed Assets",
      "header": true,
      "children": [
        {
          "id": 3,
          "name": "Asset One",
          "header": false
        }
      ]
    },
    {
      "id": 1,
      "name": "Income",
      "header": false
    }
  ]
}

---

在此之后，这个示例将为您提供一个解决方案：

我建议您使用数据结构作为@the_Cute\u Hedgehod提供嵌套的父子关系

我可以添加一个如何将当前ds转换为它的示例

获得给定负载后，始终可以使用自定义vue组件渲染它

您可以在此处找到完整的工作示例：

示例数据

var data = [{
  "id": 1,
  "name": "Assets",
  "children": [
    {
      "id": 2,
      "name": "Fixed Assets",
      "children": [
        {
          "id": 3,
          "name": "Asset One",
        }
      ]
    },
    {
      "id": 1,
      "name": "Income",
    }
  ]
}

示例模板

<template>
    <li>
    {{ name }}
        <ul v-if="children.size > 0">
            <TreeNode v-for="child in children" :node="child"/>
        </ul>
    </li>
</template>

{{name}}

和你的根应用程序

<ul>
   <TreeNode v-for="child in root" :child="child"/>
</ul>

我建议您使用数据结构作为@u Cute\u Hedgehod提供嵌套的父子关系

我可以添加一个如何将当前ds转换为它的示例

获得给定负载后，始终可以使用自定义vue组件渲染它

您可以在此处找到完整的工作示例：

示例数据

var data = [{
  "id": 1,
  "name": "Assets",
  "children": [
    {
      "id": 2,
      "name": "Fixed Assets",
      "children": [
        {
          "id": 3,
          "name": "Asset One",
        }
      ]
    },
    {
      "id": 1,
      "name": "Income",
    }
  ]
}

示例模板

<template>
    <li>
    {{ name }}
        <ul v-if="children.size > 0">
            <TreeNode v-for="child in children" :node="child"/>
        </ul>
    </li>
</template>

{{name}}

和你的根应用程序

<ul>
   <TreeNode v-for="child in root" :child="child"/>
</ul>

您使用的是什么版本的MySQL？MySQL版本5.7问题是如何渲染或如何表示数据？如果你试图实现其中一个，你能附加一个虚拟有效载荷吗？我已经附加了有效载荷@OmerShacham@Rehan检查我的解决方案：）您使用的是什么版本的MySQL？MySQL版本5.7问题是如何渲染或如何表示数据？如果你试图实现其中一个，你能附加一个虚拟有效载荷吗？我已经附加了有效载荷@OmerShacham@Rehan检查我的解决方案：）我已经看过这个例子了。由于我使用了

JqxWidget

并在下拉列表中呈现了树，因此widget需要ul，li方式的数据。由于我使用了

JqxWidget

并以下拉方式呈现树，所以这些小部件需要ul，li方式的数据。如果子部件有一些头，会发生什么？它还能用吗？@Rehan您想如何在html中表达它？如果child有一些头怎么办？它还能用吗？@Rehan您想如何用html表达它？