使用primeng p-tree组件停止节点删除事件答案

【问题标题】：Stop node drop event with primeng p-tree component使用primeng p-tree组件停止节点删除事件
【发布时间】：2021-07-24 08:15:59
【问题描述】：

我正在使用primeng p-tree组件，我想禁止将某些节点类型放入另一个节点类型中。

例如，我有一个类型为文件夹的节点和另一个类型为文件的节点，我只希望文件类型的节点在文件夹类型的节点内移动。我想禁止在另一个文件夹节点内移动文件夹节点。（以及其他规则

<p-tree [value]="filesTree7" draggableNodes="true" droppableNodes="true" dragdropScope="files" selectionMode="single" [(selection)]="selectedFile2" [contextMenu]="cm" (contextmenu)="onContextMenu($event)"
          (onNodeDrop)="onNodeDrop($event)"></p-tree>

我试图像这样停止传播：

onNodeDrop(event) {
    console.log("onNodeDrop");
    event.originalEvent.stopPropagation();
    event.originalEvent.preventDefault();
    return;
}

但它不起作用。

当我在这里查看启动代码时：primeng tree component code source 似乎 onNodeDrop 事件发出得太晚了。

你有什么想法可以实现我需要的吗？

【问题讨论】：

错误的标签...阅读所有的描述并更正标签
我已经更正了一个谢谢
我现在面临同样的问题。你解决了吗？
不幸的是，我无法使用primeng 组件做我想做的事情。所以我在树上寻找另一个有更多选项的组件，我找到了dragula github.com/valor-software/ng2-dragula希望它的帮助

标签： angular tree primeng

【解决方案1】：

在实现this 之前，解决方法可能是覆盖Tree 组件的allowDrop method 并编写您自己的放置逻辑实现。但是，您可能（实际上应该）想要使用原始方法中涵盖的放置逻辑并添加您的位。

现在prototyping 可能看起来像这样：

在你使用过pTree的组件中，通过ViewChild获取Tree
```
@ViewChild(Tree) tree: Tree;
```

然后在 constructor 或 ngOnInit 或任何适合您的情况下，prototype allowDrop

Tree.prototype.allowDrop = (dragNode: any, dropNode: any, dragNodeScope: any): boolean => {
  return this._overrideAllowDrop(dragNode, dropNode, dragNodeScope)
}

_overrideAllowDrop 用于简洁目的。要取消删除，只需return false。

此外，您可以利用树实例的dragDropService 来显示错误消息，以防删除失败。

例如：

this.tree.dragDropService.dragStop$.subscribe((data) => {
  if(this.failed){ // set failed to true in your custom drop logic
    alert('Error!')
  }
})

但是这种解决方法的缺点是放置逻辑应该在 UI 端，如果您的逻辑需要后端干扰，这种解决方法可能没有太大帮助。

虽然我的案例涉及到后端，但逻辑很简单，所以我将它移到 UI 端，因此prototyping 达到了目的。

【讨论】：

【解决方案2】：

如果您希望单个节点不可放置或不可拖动，则必须在数组中设置参数可拖动/可放置：

{
    "label": "Note e Commenti",
    "icon": "fa-file-word-o",
    "draggable":false,
    "droppable":false,
    "data": {
        "id": 1,
        "nome": "Note e Commenti",
        "testo": "Note e Commenti",
        "idCategoria": 2,
        "idTipologia": 1
    }
},

【讨论】：

【解决方案3】：

这有一些重要的附加细节，尤其是 bind() 函数

    export class myClass implements AfterViewInit {
      @ViewChild('primeTree') primeTree: Tree;  // named in HTML
    
      ngAfterViewInit() {
        // get the original function AND bind it to the tree - important!
        const originalAllowDrop = this.primeTree.allowDrop.bind(this.primeTree);
        
        // replace the allowDrop function with this
        this.primeTree.allowDrop = (dragNode: TreeNode, dropNode: TreeNode, dragNodeScope: any): boolean => {
          // let the original function do the pre-check, and then check for special cases
          return originalAllowDrop(dragNode, dropNode, dragNodeScope) && this.allowDrop(dragNode, dropNode, dragNodeScope);
        }

  }

  private allowDrop(dragNode: TreeNode, dropNode: TreeNode, dragNodeScope: any): boolean {
    // your logic here
    if (imNotHappy) {
      return false
    }
    return true;
  }
}

【讨论】：