angular tree-root自定义显示模板和设置默认选中项并高亮显示

最新推荐文章于 2023-11-17 15:05:05 发布

原创最新推荐文章于 2023-11-17 15:05:05 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#angular #tree-root #template #自定义显示样式 #默认选中项

Angular 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何在Angular应用中使用tree-root组件来自定义显示模板，设置默认选中项并高亮显示。首先，讲述了安装Angular Tree Component的步骤，然后通过displayField属性定制节点数据的显示方式。接着，详细说明了如何通过template来自定义节点显示，并解决两个节点同时高亮的问题。最后，展示了如何获取树的第一个节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在树形控件中，默认每一个节点只是显示它的名字，如果还想显示其他的，就需要自定义显示模板，一开始采用的ng-zorro的控件nz-tree，但是没有可以自定义显示模板的属性，然后一顿找，发现了tree-root，这个神奇的控件。

版本

Angular Tree Component 8.x.x支持angular release版本6.0及以上，对于低版本的angular，请安装Angular Tree Component 7.x.x

安装

1 npm install --save angular-tree-component
2 在styles.scss,导入Css,我的是在src文件下的styles.less，后缀名可能不一样，只要文件名一样就可以，之前我没有导入，只显示父节点，对于子节点的数据不显示；

@import '~angular-tree-component/dist/angular-tree-component.css';

3 import module,在app.module.ts文件中导入

import { TreeModule } from 'angular-tree-component';

@NgModule({
  imports: [..., TreeModule.forRoot()],
  ...
})
export class AppModule {
  ...
}

4 测试一下可不可以用：
.html文件

 <tree-root [nodes]="nodes" [options]="options"></tree-root>

.ts文件

nodes = [
    {
      id: 1,
      name: 'root1',
      children: [
        { id: 2, name: 'child1' },
        { id: 3, name: 'child2' }
      ]
    },
    {
      id: 4,
      name: 'root2',
      children: [
        { id: 5, name: 'child2.1' },
        {
          id: 6,
          name: 'child2.2',
          children: [
            { id: 7, name: 'subsub' }
          ]
        }
      ]
    }
  ];
  options = {};

options

它有很多属性可供选择
比如说displayField

nodes = [
    {
      nodeid: 1,
      nodename: 'root1',
      children: [
        { id: 2, name: 'child1' },
        { id: 3, name: 'child2' } ]
      ]
      options={
      displayField : 'nodename',
      idField : 'nodeid'}

nodes = [
    {
      _id: '1',
      title: 'root1',
      nodes: [{_id: '3', title: 'child1'}]
    },
    {
      _id: '2',
      title: 'root2'
    }
  ];

  options: ITreeOptions = {
    idField: '_id',
    displayField: 'title',
    childrenField: 'nodes'
  };

这样我们在定义node数据时，就不用按照固定的id,name去定义啦。

自定义显示template

在angular2用<template>标签，在angular4中用<ng-template>标签
示例

<tree-root [nodes]="nodes">
  <ng-template #treeNodeTemplate let-node let-index="index">
    <span>{{ node.data.name }}</span>
    <button (click)="go($event)">Custom Action</button>
  </ng-template>
</tree-root>

node:TreeNode类型，暴露了很多有用的方法，会作为很多事件的入参传递出去，也有data属性，存放了绑定的数据
index：当前节点在父子节点中的索引，具体没怎么用过
需要实现的效果是用图标显示节点的状态（激活/或批准）

<ng-template #treeNodeTemplate let-node let-index="index">
	 <div style="height:30px;">
		<span>{{ node.data.name }}</span>
		 <div style="float:right;margin-right: 10px">
 				<span *ngIf="node.data.isGroupActived"><img src="../../../../assets/images/icon_active.png" /></span>
 				<span *ngIf="node.data.isApprove"><img src="../../../../assets/images/icon_approve.png" /></span>
		</div>
	</div>
</ng-template>

在这里插入图片描述

#treeNodeWrapperTemplate

此选项在可以让你进一步自定义扩展位置和节点的事件的接受者

<tree-root [nodes]="nodes">
  <ng-template #treeNodeWrapperTemplate let-node let-index="index">
    <div class="node-wrapper" [style.padding-left]="node.getNodePadding()">
      <tree-node-expander [node]="node"></tree-node-expander>
      <div class="node-content-wrapper"
        [class.node-content-wrapper-active]="node.isActive"
        [class.node-content-wrapper-focused]="node.isFocused"
        (click)="node.mouseAction('click', $event)"
        (dblclick)="node.mouseAction('dblClick', $event)"
        (contextmenu)="node.mouseAction('contextMenu', $event)"
        (treeDrop)="node.onDrop($event)"
        [treeAllowDrop]="node.allowDrop"
        [treeDrag]="node"
        [treeDragEnabled]="node.allowDrag()">

        <tree-node-content [node]="node" [index]="index"></tree-node-content>
      </div>
    </div>
  </ng-template>
</tree-root>

设置默认选中项并高亮显示

HTML

 <tree-root  [(state)]="state" [nodes]="node"  >
 </tree-root>

state: ITreeState;
const focusedNodeId = this.node[0].id;//设置默认选中项，并高亮显示
              this.state = {
                ...this.state,
                focusedNodeId
              };

两个node高亮显示问题

当添加完一个新node后，加上之前点击选中node，会出现两个高亮显示的node

//通过update()方法通知界面更新
          this.beamGroupTreeList.push(treeNode);
          this.treeCom.treeModel.update();//通知界面更新
          this.treeCom.treeModel.setFocusedNode(treeNode);
          this.nodes = [...this.nodes, newNode];
  //方式二：...运算符
  this.beamGroupTreeList = [...this.beamGroupTreeList, treeNode]

初步分析为：当node-content-wrapper-active样式导致的，当点击选中某一项时，isactive
设置为true，在调用完setFocusedNode方法后，之前选中项的isactive没有设置为true，导致依然高亮显示。为什么不是isfoucused导致的呢，因为setFocusedNode方法，把选中项更新为你新添加的项
.css css文件位置在src/syles 。这里比较坑，一致在组件里的css设置属性就是不成功，只能到src/syles文件下新建.css文件，实现，并导入到style.less中

.grouptree  .node-content-wrapper-active{
    background:none;//点击选中一个beamgroup，然后添加一个beamgroup，会高亮显示两个选中项通，应该是点击选中项的isactive为true。
}
.grouptree  .node-content-wrapper.node-content-wrapper-active:hover,
.grouptree  .node-content-wrapper-active.node-content-wrapper-focused {
    background: #357149;
    width: 100%;//使宽度保持最大宽度
}
.grouptree .node-content-wrapper-focused { 
    background: #357149;
    width: 100%
     }
.grouptree .node-content-wrapper{
    width: 100%;
    }
.grouptree .node-content-wrapper:hover { 
    background: #357149;
    width: 100% }

styles.less文件

@import '~angular-tree-component/dist/angular-tree-component.css';//beamGroupTre原生样式
@import './styles/expandtree.less';//beamGroup自定义样式

.html class=“grouptree” 设置属性

<tree-root class="grouptree"  #treeCom [(state)]="state" [nodes]="beamGroupTreeList"  (nodeActivate)="onNodeActivateEvent($event)">
            <ng-template #treeNodeTemplate let-node let-index="index">
              <div style="height:30px;">
                <span>{{ node.data.name }}</span>
                <div style="float:right;margin-right: 10px">
                  <span *ngIf="node.data.isGroupActived"><img src="../../../../assets/images/icon_active.png" /></span>
                  <span *ngIf="node.data.isApprove"><img src="../../../../assets/images/icon_approve.png" /></span>
                </div>
              </div>
            </ng-template>
          </tree-root>

获取第一个节点

HTML

<tree-root #tree [nodes]="nodes"></tree-root>

import { TreeComponent, TreeModel, TreeNode } from 'angular-tree-component';

class MyComponent {
  @ViewChild('tree') treeComponent: TreeComponent;

  ngAfterInit() {
    const treeModel:TreeModel = this.treeComponent.treeModel;
    const firstNode:TreeNode = treeModel.getFirstRoot();
    
    firstNode.setActiveAndVisible();
  }
}

参考网站：
官方网站
http://500tech.github.io/angular-tree-component/
有什么问题可以在社区网站里找到答案
https://angular2-tree.readme.io/docs/options-1