angular - PrimeNG شجرة - اختيار عقدة الشجرة برمجياً

أنا أستخدم مكون PrimeNG Tree للسماح للمستخدمين باختيار بعض القيم بناءً على هيكل شجري. سيتم تخزين العقد المحددة لاحقًا في قاعدة البيانات وعندما يعود المستخدم إلى مربع الحوار للتحرير مرة أخرى، يجب أن تكون هذه العقد محددة مسبقًا.

هل هناك أي طريقة لتحقيق ذلك باستخدام إصدار PrimeNG الحالي؟ بدلاً من ذلك، سيكون من الجميل إذا كان بإمكانك إخباري بمكوّن شجرة Angular2 آخر يدعم تحديد خانة الاختيار والاختيار المسبق للعقد أيضًا.

الإجابة رقم 1

في selectionMode="checkbox" يتم تخزين العقد المحددة في الخاصية [(selection)]="selectedNodesArray".

يمكنك وضع القيم من قاعدة البيانات في selectedNodesArray وسيتم اختيار هذه العقد.

الإجابة رقم 2

إليك طريقة لاختيار العقد برمجياً:

إتش تي إم إل

<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);