nz-tree中数据的初始化和选中项的高亮显示

最新推荐文章于 2023-04-18 10:51:58 发布

Jacky-Liu999

最新推荐文章于 2023-04-18 10:51:58 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签： angular ng-zorro nz-tree 选中项高亮数据初始化

本文链接：https://blog.youkuaiyun.com/hotboyboy/article/details/89447654

Angular 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何在ng-zorro的nz-tree组件中初始化数据，包括创建父节点和子节点，以及如何实现选中项的高亮显示。通过设置nzTreeNode的children属性和利用selected属性实现默认选中并高亮的功能。

nz-tree中数据的初始化

1 新建父节点 var nzTreeNode ，并赋值
其中children为[],
2 新建var nzTreeNodeChild
3 通过 nzTreeNode[“children”].push(nzTreeNodeChild) 给父节点的children赋值;

nz-tree选中项的高亮显示

主要是通过selected属性来设置的，将其设置为true时为高亮显示，
比如：this.beamGroupList[0].selected=true;//设置默认选中，并高亮显示

getBeamGroupTreeInfo(patientId: number): void {
    try {
      this._beamGroupService.getAllBeamGroupTreeByPatientId(patientId)
        .pipe()
        .subscribe((result: BeamGroupOutput[]) => {
          this.beamGoupTreeDtoList = result;
          if (this.beamGoupTreeDtoList === null || this.beamGoupTreeDtoList === undefined || this.beamGoupTreeDtoList.length === 0) { return; }
          var templist: NzTreeNodeOptions[] = [];
          for (let i = 0; i < this.beamGoupTreeDtoList.length; i++) {
            var beamGroup = this.beamGoupTreeDtoList[i];

            var nzTreeNode = {
              title: `${beamGroup.beamGroupName}`,
              key: `${beamGroup.id}`,
              type: "BeamGroup",
              selected: this.nodeid == beamGroup.id.toString() ? true : false,//设置选中状态并高亮显示
              extends: true,
              children: []
            };
            if (beamGroup.beamList !== null && beamGroup.beamList !== undefined && beamGroup.beamList.length > 0) {
              for (let i = 0; i < beamGroup.beamList.length; i++) {
                var beam = beamGroup.beamList[i];
                var nzTreeNodeChild = {
                  title: `${beam.beamName}`,
                  key: `${beam.id}`,
                  type: "Beam",
                  selected: this.nodeid == beam.id.toString() ? true : false,           
                  isLeaf: true,
                };
                nzTreeNode["children"].push(nzTreeNodeChild);
              }
            }
            templist.push({
              title: nzTreeNode["title"],
              key: nzTreeNode["key"],
              type: nzTreeNode["type"],
              selected: nzTreeNode["selected"],
              extends: nzTreeNode["extends"],
              children: nzTreeNode["children"],
            })
          }
          this.beamGroupList = templist;
          if (this.beamGroupList.length > 0) {
            if (this.nodeid === null || this.nodeid === undefined) {
              this.nodeid = this.beamGroupList[0].key;
              this.beamGroupList[0].selected=true;//设置默认选中，高亮显示 
              this.selectedNode = this.beamGroupList[0];
            }
            else {
            }
          }
        })
    }
    catch (error) {
      console.log(error)
    }
  }