Question

我想制作树状结构。在每个节点中都有两个符号（+表示增加一个节点，-表示删除特定节点）。我面临的问题是如何从嵌套的json添加/删除node（children）。对于一两个级别的嵌套来说，它很好，但对于多个以上的嵌套，我无法编写一些通用代码来执行此操作。以下是我必须在其上执行添加/删除操作的默认json和树的图片。在HTML和CSS中我没问题，因为最近两天我一直在努力处理某些线索或提示。谢谢

JSON :
{
"name": "abc",
"children": [{
        "name": "def",
        "children": [{
            "name": "jkl",
            "children": [{
                "name": "vwxyz",
                "children": []
            }]

        }]
    },
    {
        "level": "2",
        "name": "ghi",
        "children": [{
            "name": "mno",
            "children": []
        }, {
            "name": "pqr",
            "children": [{
                "name": "stu",
                "children": []
            }]
        }]
    }
]
}

Answer 1

由于您具有唯一的名称，因此可以使用name属性作为键并使用树节点作为其值来创建查找对象。然后，您可以快速访问任意给定名称的节点。通过将父属性添加到每个节点对象，您可以找到给定节点的父级。

var data = { name: "abc", ... };
var lookup = {};

function buildLookup(node, parent) {
  node.parent = parent;
  lookup[node.name] = node;
  if (node.children) {
    for (var i = 0; i < node.children.length; i++) {
      buildLookup(node.children[i], node);
    }
  }
}

buildLookup(data, null);
// lookup object now populated

您的-/ +按钮可以合并name属性以传递给事件处理程序：

<button class="button-plus" data-name="def">+</button>
<button class="button-minus" data-name="def">-</button>

处理程序：

var addBtns = document.querySelectorAll(".button-plus");
for (var i=0; i < addBtns.length; i++) {
  addBtns[i].addEventListener("click", function (e) {
    var node = lookup[this.dataset.name];
    // create a new empty child
    var child = {
      name: "new child",
      parent: node,
      children: []
    };
    // add it to the children array
    node.children.push(child);
    // add it to the lookup
    lookup[child.name] = child;
  });
}

Answer 2

一种方法是使用Node数据结构而不是JSON。普通的JS对象可以在需要时轻松地与JSON相互转换。

这样，处理数据要简单得多。您可以将DOM事件连接到节点上的方法，并在完成后转换为JSON

<item>

使用JavaScript在嵌套JSON对象中添加或删除特定节点

2 个答案: