Question

我所拥有的：

我已经实现了带有复选框选择和搜索过滤器的树状结构。该层次结构具有固定的3个级别（Parent->Intermediate->Child）。选中复选框非常好（所有功能包括选中某些节点时复选框上的不确定符号，或选中所有子节点时打勾的符号）。

我还使用自定义角度管道对树状结构数据应用了搜索过滤器。

当我应用搜索过滤器时，问题发生了，复选框的选择不当。也不会被选中。不确定的标志也不能按预期工作。

很好的参考是：https://angular2-tree.readme.io/docs/filtering，尽管我不能使用该库，但我希望具有完全相似的功能。

我的要求是用户应该能够过滤节点并选择节点

我尝试过的事情：

我已经创建了这个Stackblitz link。请看看这个。

任何帮助或建议将不胜感激。谢谢！

Answer 1

为什么不使用垫树？基于this SO about tree-view

我们需要两个递归函数：

setChildOk(text: string, node: any) {
    node.forEach(x => {
      x.ok = x.name.indexOf(text) >= 0;
      if (x.parent) this.setParentOk(text, x.parent,x.ok);
      if (x.children) this.setChildOk(text, x.children);
    });
  }
  setParentOk(text, node,ok) {
    node.ok = node.ok || ok || node.name.indexOf(text)>=0;
    if (node.parent) this.setParentOk(text, node.parent,node.ok);
  }

我们可以添加输入“搜索”并创建函数

 <input matInput [ngModel]="search" 
       (ngModelChange)="search=$event;setChildOk($event,dataSource.data)">

好吧，现在，我们显示节点是node.ok或！search

<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle 
      [style.display]="!search || node.ok?'block':'none'">

和

<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild" 
          [style.display]="!search || node.ok?'block':'none'">

参见this stackblitz

树形复选框和角度的搜索过滤器实现？

1 个答案: