时间戳

首页 > 解决方案 > 使用 Aurelia 在前端将动态嵌套 JSON 显示为 Treeview

json - 使用 Aurelia 在前端将动态嵌套 JSON 显示为 Treeview

问题描述

如图所示，当前数组中有三个对象。这三个对象是“父母”，每个父母都有自己的“孩子”数组。这是棘手的部分；一个父元素也可以是另一个父元素的子元素，并且可以有自己的子元素。这部分是动态的，意味着用户将创建更多的“父”元素和更多的“子”元素。

我想使用 Aurelia 从前端的图像中显示这个 JSON。我该怎么做？非常欢迎任何想法。

我收到的嵌套动态 JSON 文件的图像

标签： jsontypescriptnestedtreeviewaurelia

解决方案

亚历山大。你打算做什么——在 DOM 上渲染一个树结构——使用 Aurelia，可以通过一堆选项来实现。作为递归结构，以这种方式定义结构很方便；例如（请注意，该示例假定 Typescript 和引导程序）：

export interface TreeNode {
  name: string;
  children?: TreeNode[];
}

对于渲染，一种解决方案是定义一个包含“树”的自定义组件和一个自定义组件来渲染树的节点（以递归方式）。

所以，你可以这样做：

<require from="./tree"></require>
...
<tree source.bind="treeData"></tree>

treeData 可以是：

  treeData: TreeNodeModel[] = [
    { name: "node01", children: [{ name: "child011" }, { name: "child012" }, { name: "child013" }] },
    { name: "node02", children: [{ name: "child021" }, { name: "child022", children: [{ name: "child0221" }, { name: "child0222" }, { name: "child0223" }] }] },
    { name: "node03", children: [{ name: "child031" }] },
    { name: "node04", children: [{ name: "child041" }] },
    { name: "node05", children: [{ name: "child051" }] },
    { name: "node06", children: [{ name: "child061" }] },
    { name: "node07", children: [{ name: "child071" }] },

树自定义组件的实现将是：

import { bindable } from "aurelia-framework";
import { TreeNodeModel } from "./model";

export class Tree {
  @bindable source: TreeNodeModel[];
}

Tree 自定义组件的视图：

<template>
  <require from="./node"></require>
  <div class="container">
    <div repeat.for="node of source">
      <node node.bind="node"></node>
    </div>
  </div>
</template>

节点自定义组件：

import { bindable } from "aurelia-framework";
import { TreeNodeModel } from "./model";

export class Node {
  @bindable node: TreeNodeModel;
  @bindable indent: number = 0;
}

对应视图：

<template>
  <div style="margin-left: ${indent * 8}px;">
    <div>${node.name}</div>
    <div repeat.for="child of node.children">
      <node node.bind="child" indent.bind="indent + 1"></node>
    </div>
  </div>
</template>

带有所有代码的工作示例可在以下位置获得：

https://codesandbox.io/s/aurelia-recursive-tree-nodes-6fi9e?file=/src/node.html:0-226

最好的祝愿。

推荐阅读