当前位置: 首页 > 工具软件 > ng2-tree > 使用案例 >

Nz-tree 树结构取消父子之间强关联关系后,选中父级,子级仍然选中,但取消子级后父级不会取消选中

戚俊人
2023-12-01

完整代码如下:

import { Component } from '@angular/core';

import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';
import { NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';

@Component({
  selector: 'nz-demo-tree-basic-controlled',
  template: `
  <nz-tree
  #nzTreeSelected
  [nzData]="nodes"
  nzShowLine
  nzCheckable
  nzMultiple
  [nzCheckedKeys]="checkedKeys"
  (nzCheckBoxChange)="nzSelectedClick($event)"
  [nzExpandAll]="true"
  [nzCheckStrictly]="true"
  >
  `,
})
export class NzDemoTreeBasicControlledComponent {
  checkedKeys = [];
  nodes = [
    {
      title: '0-0',
      key: '0-0',
      expanded: true,
      children: [
        {
          title: '0-0-1',
          key: '0-0-1',
          children: [
            { title: '0-0-1-0', key: '0-0-1-0', isLeaf: true },
            { title: '0-0-1-1', key: '0-0-1-1', isLeaf: true },
            { title: '0-0-1-2', key: '0-0-1-2', isLeaf: true },
          ],
        },
        {
          title: '0-0-2',
          key: '0-0-2',
        },
      ],
    },
    {
      title: '0-1',
      key: '0-1',
      children: [
        { title: '0-1-0-0', key: '0-1-0-0', isLeaf: true },
        { title: '0-1-0-1', key: '0-1-0-1', isLeaf: true },
        { title: '0-1-0-2', key: '0-1-0-2', isLeaf: true },
      ],
    },
  ];

  nzSelectedClick(event: NzFormatEmitEvent) {
    console.log(111);
    // 如果是选中状态则向已选中列表添加数据 并重置已选中列表数据
    if (event.node.isChecked) {
      this.checkedKeys.push(event.node.key);
      this.checkedKeys = [...this.checkedKeys];
      if (event.node.parentNode) {
        // 如果有父节点 则判断父节点是否已选中
        this.checkedParents(event.node.parentNode);
      }
      // 如果有子节点 则选中所有子节点
      if (event.node.children) {
        this.checkedChildrenKeys(event.node.children);
      }
    } else {
      // 反之为取消选中时清除已选中列表中的此节点key 并重置已选中列表数据
      this.cancelCheckedNode(event.node.key);
      // 如果不是叶子结点则取消其所有子节点的选中状态
      setTimeout(() => {
        if (event.node.children) {
          this.cancelCheckedChildrenKeys(event.node.children);
        }
      }, 10);
      // 如果不是按钮节点 则判断同级节点选中状态
      //const node: NzTreeNodeS = event.node;
      //if (event.node.origin.type !== 'button' && event.node.parentNode) {
      // this.sameLevelChecked(event.node.parentNode);
      // }
    }
  }

  checkedParents(node: any) {
    if (!node.isChecked) {
      this.checkedKeys.push(node.key);
      this.checkedKeys = [...this.checkedKeys];
    }
    if (node.parentNode && !node.parentNode.isChecked) {
      this.checkedParents(node.parentNode);
    }
  }

  checkedChildrenKeys(node: any) {
    if (node) {
      node.forEach((val: any) => {
        this.checkNodeKey(val.key);
        if (val.children) {
          this.checkedChildrenKeys(val.children);
        }
      });
    }
  }

  checkNodeKey(key: string) {
    this.checkedKeys.push(key);
    this.checkedKeys = [...this.checkedKeys];
  }

  cancelCheckedChildrenKeys(node: any) {
    node.forEach((val: any) => {
      if (val.isChecked) {
        this.cancelCheckedNode(val.key);
      }
      if (val.children.length > 0) {
        this.cancelCheckedChildrenKeys(val.children);
      }
    });
  }

  sameLevelChecked(node: any) {
    let checked: boolean = false;
    node.children.forEach((val: any) => {
      if (val.isChecked) {
        checked = true;
        return;
      }
    });
    if (!checked) {
      this.cancelCheckedNode(node.key);
      if (node.parentNode) {
        setTimeout(() => {
          this.sameLevelChecked(node.parentNode);
        }, 10);
      }
    }
  }

  // 取消节点选中并重置已选中节点列表
  cancelCheckedNode(key: string) {
    this.checkedKeys.splice(
      this.checkedKeys.findIndex((item) => item === key),
      1
    );
    this.checkedKeys = [...this.checkedKeys];
  }
}

参考部分代码:

https://blog.csdn.net/chong_po/article/details/121489095

 类似资料: