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

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

齐招
2023-12-01

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)
    }
  }
 类似资料: