javascript - 如何允许在角树上进行多项选择和多次拖放？

Question

我正在使用 angular-tree-component，我需要使用 click+shift 键实现多项选择。谁能帮帮我？这就是我现在所拥有的。监控.ts文件：

import { ITreeOptions, TreeNode} from 'angular-tree-component';
  @ViewChild('tree') tree: any;
  treeOptions: ITreeOptions = {
    getChildren: this.getChildren.bind(this),
    useVirtualScroll: true,
    nodeHeight: 22
  };

监控.html 文件：

<tree-root #tree [nodes]="nodes" [focused]="true" [options]="treeOptions" (updateData)="treeUpdate()"  >
...
 </tree-root>

Answer 1

我已经通过使用 shift+click 实现了多选，如下所示。

private lastSelected = [];

if ($event.shiftKey) {
            // Capturing last clicked node details
            if (this.lastSelected.length > 1) {
              this.lastSelected.pop();
            }
            const last = { id: node.data.id, level: node.level };
            this.lastSelected.push(last);

            this.getAllNodeIds(tree.nodes);
            // Getting the index of first and last clicked node
            const firstClicked = this.nodeIds.indexOf(this.lastSelected[0].id);
            const lastClicked = this.nodeIds.indexOf(this.lastSelected[1].id);

            this.nodeIds.map((val, index) => {
                if (firstClicked > lastClicked) {
                  if (index >= lastClicked && firstClicked > index) {
                    const currentNode = tree.getNodeById(val);
                    TREE_ACTIONS.TOGGLE_ACTIVE_MULTI(tree, currentNode, $event);
                  }
                } else {
                  if (index > firstClicked && lastClicked >= index) {
                    const currentNode = tree.getNodeById(val);
                    TREE_ACTIONS.TOGGLE_ACTIVE_MULTI(tree, currentNode, $event);
                  }
              }
            });
          } 

 public getAllNodeIds(tree): void {
    if (tree) {
      for (const val of tree) {
        this.nodeIds.push(val.id);
        const childrenCount = val.children ? val.children.length : 0;
        if (val.hasChildren || childrenCount > 0) {
          this.getAllNodeIds(val.children);
        }
      }
    }
    return;
  }