使用JavaScript递归存储树级别的层次结构

Question

function formSelectedTree(totaldata, selectedIds) {
    if (!Array.isArray(totaldata)) return;
    for (var item of totaldata) {
        if ((!item.children || item.children.length === 0)) {
            selectedIds.map(function(id, index) {
                if (parseInt(item.id) === parseInt(id)) {
                    item.isSelected = true
                    item.open = true
                }
            })
        } else {
            this.formSelectedTree(item.children, selectedIds);
        }
    }
    return totaldata
}

参数：

• 对象的totaldata-array（在json下面查找）
• selectedIds：字符串数组（叶节点的ID）[“ 1749”，“ 1747”]

上面的递归函数是像json对象一样迭代树。 我们从后端获取叶节点的ID，根据这些ID，我们应该选择叶节点并从父级扩展树结构。

使用'isSelected'布尔属性处理选择。使用'open'布尔属性处理树节点的扩展。

我可以为叶节点设置这些属性。 但是面临为其父级/子级设置open = true的困难。

请找到以下示例json对象

{
    "Data": [{
        "id": 1745,
        "parentId": null,
        "isSelected": false,
        "open": false,
        "children": [{
            "id": 1746,
            "parentId": 1745,
            "isSelected": false,
            "open": false,
            "children": [{
                    "id": 1747,
                    "parentId": 1746,
                    "isSelected": false,
                    "open": false
                },
                {
                    "id": 1748,
                    "parentId": 1746,
                    "isSelected": false,
                    "open": false,
                    "children": [{
                        "id": 1749,
                        "parentId": 1748,
                        "isSelected": false,
                        "open": false
                    }]
                }
            ]
        }]
    }]
}

有人可以帮助我解决这一难题。

谢谢

Answer 1

本示例向遇到的每个节点添加一个parentNode属性，并在找到给定选定叶节点后使用该属性设置所有祖先的“开放”属性。

 function formSelectedTree(totaldata, selectedIds, parentNode) { if (!parentNode) parentNode = false; if (!Array.isArray(totaldata)) return; for (var item of totaldata) { // set the parentNode property for each item we traverse item.parentNode = parentNode; if ((!item.children || item.children.length === 0)) { selectedIds.map(function(id, index) { if (parseInt(item.id) === parseInt(id)) { item.isSelected = true item.open = true // since this is a leaf item that is selected/open, all its ancestors should be open too var p = item.parentNode; while (p) { p.open = true; // travel up through the hierarchy until parentNode doesn't exist (top level) p = p.parentNode; } } }) } else { this.formSelectedTree(item.children, selectedIds, item); } } return totaldata; } 

Answer 2

您可以使用Set作为id来使用另一种方法，如果所有ID已被处理，则可以使用Array#some进行短路。

为了更新所有子节点，您可以使用另一个递归函数，该函数适用于实际节点以及子节点的回调。

如果您将字符串作为id获得，则建议在创建集合之前将其转换为数据类型。

 function formSelectedTree(totaldata, selectedIds) { function update(o) { o.isSelected = true; o.open = true; o.children && o.children.forEach(update); } if (!Array.isArray(totaldata)) { return; } return totaldata.some(function (item) { if (selectedIds.has(item.id)) { update(item); selectedIds.delete(item.id); return !selectedIds.size; } return item.children && formSelectedTree(item.children, selectedIds); }); } var data = { "Data": [{ "id": 1745, "parentId": null, "isSelected": false, "open": false, "children": [{ "id": 1746, "parentId": 1745, "isSelected": false, "open": false, "children": [{ "id": 1747, "parentId": 1746, "isSelected": false, "open": false }, { "id": 1748, "parentId": 1746, "isSelected": false, "open": false, "children": [{ "id": 1749, "parentId": 1748, "isSelected": false, "open": false }] }] }] }] }; formSelectedTree(data.Data, new Set([1749, 1747])); console.log(data); 

 .as-console-wrapper { max-height: 100% !important; top: 0; }