PrimeNG树:仅允许在一个节点中选择项目

时间:2019-04-23 13:57:50

标签: javascript angular primeng

我有一个PrimeNG 7.1树控件,请参见https://stackblitz.com/edit/angular-primeng-tree-sml

树的正常行为是,您可以检查树中打开的节点并检查树中任何节点中的任何项目。没问题,我已经做了很多次。

这次我的任务是我们只允许在一个节点中选择项目。

例如,用户可以选择“ Old Navy”和“ Hill City”,但如果选择“ Marshalls”,则需要取消选中“ Old Navy”和“ Hill City”。因此,我们希望在任何一次仅允许选择一个顶级节点及其子节点。

sample screenshot

我已经从订阅中使用JSON dat建立了树:

<p-tree [value]="accountTreeData"
        selectionMode="checkbox"
        [(selection)]="checkedItems"
        (onNodeSelect)="nodeSelect($event)"
        (onNodeUnselect)="nodeUnselect($event)"
        (onNodeExpand)="nodeExpand($event)"></p-tree>

这与这些变量有关:

  accountTreeData$: Subscription;
  accountTreeData: TreeNode[];
  selectedFiles: TreeNode[];
  checkedItems: TreeNode[];
  checkedCount = 0;

和这些方法:

  nodeSelect(event) {
    this.updateAccountCount();
  }
  nodeUnselect(event) {
    this.updateAccountCount();
  }

  updateAccountCount() {
    this.checkedCount = this.checkedItems.length;
  }

  nodeExpand(event) {
    console.log(event.node.label);
  }

关于如何处理其他分支(节点)中的项目取消选择的任何想法?

0 个答案:

没有答案