用JavaScript修改树形结构数据,给定条件?

我有一个树形数据是这样的。

var tree = [
  {
    id:"11",
    text: "Parent 1",
    type:"Parent",
    nodeSelected:false,
    nodes: [
      {
        text: "Child 1",
        parentId: "11",
        id:"21",
        nodeSelected:false,
        type: "Child",
        nodes: [
          {
            id:"36",
            text: "Grandchild 1",
            parentId: "21",
            nodeSelected:false,
            nodes:[],
            type: "Grandchild"
          },
          {
            id:"38",
            text: "Grandchild 2",
            parentId: "21",
            nodes:[],
            nodeSelected:false,
            type: "Grandchild"
          }
        ]
      },
      {
        id:"43",
        text: "Child 2",
        nodeSelected:false,
        parentId:"11",
        type: "Child",
        nodes: [
            {
            id:"52",
            parentId:"43",
            text: "Grandchild 1 of child 2",
            nodeSelected:false,
            nodes:[],
            type: "Grandchild"
          }
        ]
      }
    ]
  },
  {
    id:"46",
    text: "Parent 2",
    nodeSelected:false,
    type: "Parent",
    nodes:[]
  },
  {
    id:"48",
    text: "Parent 3",
    nodeSelected:false,
    type: "Parent",
    node:  [
        {
            id:"70",
            text: "child 3",
            parentId: "48",
            type: "Child",
            nodeSelected:false,
            nodes:[]
        }
    ]
  }
];

所有的 nodeSelected 是false。

我有一组数组形式的Ids。

groupedIds=["11","21","43","52","48"];

我想做 nodeSelected 根据 groupId array 并附加一些条件。

条件是,如果一个parentId和它的子代id一起被提及,则 nodeSelected 属性应该保持为false,而子女的 nodeSelected 应该是真的(其 nodes nodeSelected 也应该是’true’).否则整个父节点 nodeSelected 应该是true(连同它的节点)。

所以结果会是这样的。

var resultArray = [
  {
    id:"11",
    text: "Parent 1",
    type:"Parent",
    nodeSelected:false,
    nodes: [
      {
        text: "Child 1",
        parentId: "11",
        id:"21",
        nodeSelected:true,
        type: "Child",
        nodes: [
          {
            id:"36",
            text: "Grandchild 1",
            parentId: "21",
            nodeSelected:true,  
            type: "Grandchild"
          },
          {
            id:"38",
            text: "Grandchild 2",
            parentId: "21",
            nodeSelected:true,
            type: "Grandchild"
          }
        ]
      },
      {
        id:"43",
        text: "Child 2",
        nodeSelected:false,
        parentId:"11",
        type: "Child",
        nodes: [
            {
            id:"52",
            parentId:"43",
            text: "Grandchild 1 of child 2",
            nodeSelected:true,
            type: "Grandchild"
          }
        ]
      }
    ]
  },
  {
    id:"46",
    text: "Parent 2",
    nodeSelected:false,
    type: "Parent"
  },
  {
    id:"48",
    text: "Parent 3",
    nodeSelected:true,
    type: "Parent",
    node:  [
        {
            id:"70",
            text: "child 3",
            parentId: "48",
            type: "Child",
            nodeSelected:true
        }
    ]
  }
];

(我的尝试)虽然不完整,但类似这样的事情我们可以做。

tree.forEach((Parent) => {
            if (groupedIds.includes(Parent.id)) {
                let isSomeChildSelected = Parent.nodes.some((loc) => groupedIds.includes(loc.id));
                if (isSomeChildSelected) {
                    Parent.nodes.forEach((child) => {
                        if (groupedIds.includes(child.id)) {
                            let isSomeGrandChildSelected = child.nodes.some((grandchild) => groupedIds.includes(grandchild.id));
                            if (isSomeGrandChildSelected) {
                                child.nodes.forEach((grandchild) => {
                                    if (groupedIds.includes(grandchild.id)) {
                                        grandchild.isSelected = true;
                                    }
                                })
                            } else {
                                child.isSelected = true;
                                child.nodes.forEach((grandchild) => {
                                    grandchild.isSelected = true;
                                })
                            }
                        }
                    })
                } else {
                    Parent.isSelected = true;
                    Parent.nodes.forEach((child) => {
                        child.isSelected = true;
                        child.nodes.forEach((grandchild) => {
                            grandchild.isSelected = true;
                        })
                    })
                }
            }
        })

以上试过的方法在一定程度上解决了问题,但有点复杂。

如果有任何帮助,将非常感谢。谢谢!我有一个树的数据是这样的: var tree = [ { id: “11”, text: “11”, id: “11”, text: “11”]。

解决方案:

我不会帮你做(不是出于恶意,只是因为我不能百分百确定自己是否理解这个问题!),但我希望能给你一个大的方向。

在遍历树的时候,90%的时候你需要一种叫做递归的东西。递归的样子是这样的。

function walk(items){
  items.forEach(items => {
    if(item.hasChildrenOrSomething){
      // notice the function calls itself:
      walk(item.children);
    }

    // Do something with item
  });
}

walk(tree);

这里有一件重要的事情需要注意 如果你做一些逻辑运算的话 之后 在其内部调用该函数,当前项的所有子项都将应用该逻辑。所以,我们开始吧–在你的情况下,你想要这样的东西。

const walk = (branch) => {
  branch.forEach(node => {
    // Check if this object even has children:
    if(node.hasOwnProperty('nodes') && node.nodes.length){
      walk(node.nodes);
      // Do your node.nodes.every check here
    }
    // Now check if this is in the array
  });
}

walk(tree);

如果你以前用过递归,对不起,这整篇文章可能是在拍马屁,而且没有抓住你问题的重点。如果你没有使用过,那么我只能说我a)很嫉妒你第一次体验到如此优雅的东西的感觉,b)很抱歉你不得不解开它们令人费解的本质。

给TA打赏
共{{data.count}}人
人已打赏
未分类

id

2022-9-8 22:33:38

未分类

在ASP.NET Core Web API中访问和使用UserClaims。

2022-9-8 22:33:40

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索