Angular-tree-component 如何通过复选框选择捕获选定的节点

Posted 2023-03-13

【中文标题】Angular-tree-component 如何通过复选框选择捕获选定的节点

【英文标题】：Angular-tree-component how to capture selected nodes through checkbox selection

【发布时间】：2018-10-11 01:33:44

【问题描述】：

我正在使用 angular-tree-component 生成带有复选框选项的树。 html

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

打字稿：

import  ITreeOptions  from 'angular-tree-component';
import  Component  from '@angular/core';

export class myComponent 
nodes = [
    
      name: 'root1',
      children: [
         name: 'root1_child1' ,
        
          name: 'root1_child2', children: [
             name: 'grand_child1' ,
             name: 'grand_child2' 
          ]
        
      ]
    ,
    
      name: 'root2',
      children: [
         name: 'root2_child1' ,
        
          name: 'root2_child2', children: [
             name: 'grand_child1' ,
             name: 'grand_child2' 
          ]
        
      ]
    
  ];

  options: ITreeOptions = 
    useCheckbox: true
  ;

  optionsDisabled: ITreeOptions = 
    useCheckbox: true,
    useTriState: false
  ;

所以我可以选择树节点（包括子节点），但找不到任何方法可以捕获所有选定（选中）节点并显示在另一个框上。

【参考方案1】：

您可以使用“event.treeModel.selectedLeafNodeIds”来获取树中的选定节点，

例子：

<tree-root [nodes]="treeNode" (select)="onSelect($event)"
    (deselect)="onDeselect($event)" [options]="options"></tree-root>

this.selectedTreeList = Object.entries(event.treeModel.selectedLeafNodeIds)
     .filter(([key, value]) => 
            return (value === true);
      ).map((node) => node[0]);

【讨论】：

它有效，我也得到了一个数字数组而不是对象......类似于：[“2860399510223”、“3897698631848”、“9993577998256”、“5009898083230”、“3866878811722” , "1313097673070"] ....我怎样才能得到对象而不是这个？

@GeancarloMurillo 您可以删除最后一张地图((node) => node[0]);从上面的示例代码中，它将返回一个对象数组:)

是的，我用 getNodeById 和 selectedTreeList 解决了它:) ...谢谢

@GeancarloMurillo 您能告诉我您在 onSelect 事件中提到的内容以及如何获得该值吗？

@Dexter，我们可以通过两种方式获取树状列表的选中项，1）只有当前选中项，selectedItem: any； onSelect(event) this.selectedItem = event.node.data; 2) 一次获取所有选中的项目，同样在上面的例子中给出，this.selectedTreeList = Object.entries(event.treeModel.selectedLeafNodeIds) .filter(([key, value]) => return value; );

【参考方案2】：

参考上面的答案来获取你可以使用的对象

  Object.entries(this.treeModel.selectedLeafNodeIds)
  .filter(([key, value]) => 
    return (value === true);
  )
  .map((id) => 
    let node = this.treeModel.getNodeById(id[0]);
    return node;
  );

【参考方案3】：

您可以通过使用 (select) 和 (deselect) 事件来做到这一点。 这是一个小例子。

onSelect(event) 
    try 

      let pushdata: any = [];
      pushdata.push(event.node.data);

      console.log(this.TreeViewData);
     catch (e) 
      console.log(e.message)
    
  

与取消选择相同，即使您可以捕获取消选择的节点

ondeSelect(event) 
        try 

          let pushdata: any = [];
          pushdata.push(event.node.data);

          console.log(this.TreeViewData);
         catch (e) 
          console.log(e.message)
        
      

Event.node.data 将返回您绑定的所有属性的数组列表。