Question

我使用PrimeNG Tree组件使用户能够根据树结构选择一些值。所选节点稍后将存储在数据库中，当用户再次访问编辑对话框时，应预先选择这些节点。

目前的PrimeNG版本有没有办法实现这一目标？或者，如果你能告诉我另一个支持复选框选择和预选节点的angular2树组件，那将是很好的。

Answer 1

存储在selectionMode="checkbox"属性中的[(selection)]="selectedNodesArray"个选定节点。

您可以将数据库中的值放入selectedNodesArray，然后选择此节点。

Answer 2

这是通过程序选择节点的方法：

HTML

<p-tree 
  [value]="list['Entities']" 
  [(selection)]="data['Entities']" 
  selectionMode="checkbox">  
</p-tree>

方法

const selectNodes = (tree: TreeNode[], checkedNodes: TreeNode[], keys: string[]) => {
  // Iterate through each node of the tree and select nodes
  let count = tree.length;
  for (const node of tree) {
    // If the current nodes key is in the list of keys to select, or it's parent is selected then select this node as well
    if (keys.includes(node.key) || checkedNodes.includes(node.parent)) {
      checkedNodes.push(node);
      count--;
    }

    // Look at the current node's children as well
    if (node.children)
      selectNodes(node.children, checkedNodes, keys);
  }

  // Once all nodes of a tree are looked at for selection, see if only some nodes are selected and make this node partially selected
  if (tree.length > 0 && tree[0].parent) tree[0].parent.partialSelected = (count > 0 && count != tree.length);
}

调用方法

const keysToBeSelected = [2,3,4]
selectNodes(this.list.Entities, this.filterData.Entities, keysToBeSelected);

Answer 3

在PrimeNG Tree中找到了预先选择多个复选框（以编程方式）的解决方法。您可以在此处找到工作示例：https://github.com/jigneshkhatri/primeng-treenode-preselect

Answer 4

通过“复选框”设置的selectionMode属性，如下所示：

<p-tree
 selectionMode="checkbox"
 [(selection)]="selectedNodes"
  ></p-tree>

selectedNodes变量包含选定的节点。在此变量中添加要选择的所有节点。

PrimeNG树 - 以编程方式选择TreeNode

4 个答案: