当我取消选中自定义树视图中的子节点复选框时，如何取消选中所有父节点

Posted 2023-02-23

【中文标题】当我取消选中自定义树视图中的子节点复选框时，如何取消选中所有父节点

【英文标题】：How can i uncheck the all parent nodes when i uncheck the child node checkbox in custom tree view

【发布时间】：2021-03-23 12:14:03

【问题描述】：

我创建了一个带有复选框的自定义树视图。现在我需要在取消勾选对应的子节点时，取消勾选对应的父级节点。

例如：在我的情况下，让我们选中所有复选框，然后如果我取消选中名为“fifth-b”的节点，那么所有节点都属于父节点，例如“fourth”、“third-b”、“second-a”， “第一个”复选框需要自动取消选中。

我想开发一个完全自定义的带有复选框和可折叠的树视图，因此我们无法使用其他插件或材料设计。

请在 -

找到我的代码

https://stackblitz.com/edit/angular-7xcthz

感谢您的大力帮助。

【参考方案1】：

你可以尝试遍历整个树来查找节点，例如，你可以编写一些函数，例如：

  public unselectParents(searchNode: TreeNode, searchPivot: TreeNode): boolean 
    if (searchPivot === searchNode) return true;
    else if (searchPivot.children.length !== 0) 
      for (let i = 0; i < searchPivot.children.length; i++) 
        let value = this.unselectParents(searchNode, searchPivot.children[i]);
        if (value === true) 
          searchPivot.check = false;
          return true;
        
      
    
    return false;
  

然后在selectNode方法中调用这个方法：

  public selectNode(node: TreeNode, value: boolean): void 
    this.check(node, value);
    if (value == false) 
      this.unselectParents(node, this.data.root);
    
  

或者，您也可以在“TreeNode”界面中拥有一个属性“parent:TreeNode”。