ag-grid：使用拖放对网格内的行重新排序

Question

我需要使用拖放功能对 ag-grid 中的行重新排序。拖放方法很简单，但是当拖放发生时，似乎没有简单的方法来切换行位置。

我尝试了

gridOptions.api.removeItems(selectedNode);

清除当前然后

gridOptions.api.insertItemsAtIndex(2, savedNode);

但是掉落事件似乎重新触发阻止了这种方法。加上 insertItems（当运行首先）在内部 ag-grid 循环中倒下。

我宁愿不手动重新排序 gridRows 然后重置 gridRow 数据，这会有些笨拙。这似乎是大多数网格的常见要求，所以我认为它可以完成，但只是错过了相关文档。感谢您的帮助..

Answer 1

如果您在 ag-grid 中找不到解决方案，那么您可以通过添加一个指令（"ngDraggable"）并将其与 ag-grid 集成来实现。

请为此找到以下工作 plnkr。

https://embed.plnkr.co/qLy0EX/

ngDraggable

希望这对您有所帮助..

Answer 2

K 终于得到了一个 Angular 2 方法，尽管目前我必须关闭网格上的排序和过滤。

此特定示例依赖于启用行选择（由于它查找某些记录的方式）。网格拖放应该被禁用（因为它在视觉上拖动网格很糟糕）而是使用 processRowPostCreate 在行级别设置可拖动参数。这会将拖动选项设置为看起来更漂亮的行。

在网格选项中

 processRowPostCreate: (params) => {
            this.generateRowEvents(params);
        },

调用

private generateRowEvents(params) {
    params.eRow.draggable = true; 
    params.eRow.ondragstart = this.onDrag(event);
    params.eRow.ondragover = this.onDragOver(event);
    params.eRow.ondrop = this.onDrop(event);
}

我在onDrag方法中跟踪源记录

                 var targetRowId: any = $event.target.attributes.row.value;
                 this.savedDragSourceData = targetRowId;

像往常一样onDragOver

在放置时我们必须防止无限循环（当项目被添加到网格时，ag-grid 似乎会调用实时方法，因此 ondrop 发生多次），然后插入、删除和拼接网格和它的数据源（我将继续研究使用网格来填充数据，而不是允许 source/filter 允许的源数据，目前 doign 插入空白行）。然后发出一个事件（在本例中）要求拥有的组件 'save' 调整后的数据。

private onDrop($event) {
     if ($event && !this.infiniteLoopCheck) {
         if ($event.dataTransfer) {
             if (this.enableInternalDragDrop) {
                 this.infiniteLoopCheck= true;

                  var draggedRows: any = this.gridRows[this.savedDragSourceData];

                 // get the destination row
                 var targetRowId: any = $event.target.offsetParent.attributes.row.value;

                 // remove  from the current location
                 this.gridOptions.api.removeItems(this.gridOptions.api.getSelectedNodes());

                 // remove from source Data  
                this.gridRows.splice(this.savedDragSourceData, 1);


                 if (draggedRows) {
                     // insert into specified drop location
                     this.gridOptions.api.insertItemsAtIndex(targetRowId, [draggedRows]);

                     // re-add rows to source data..
                     this.gridRows.splice(targetRowId, 0, checkAdd);

                     this.saveRequestEvent.emit(this.gridRows);// shout out that a save is needed                     }
                 this.v= false;
             }
             else {
                 this.onDropEvent.emit($event);
             }
         }
     }
 }

注意我们将网格包装在我们自己的 class 中，以允许我们编写一组网格方法，而不是在使用网格时复制应用程序。

我将在接下来的几天内对此进行改进，但作为基础，这允许 angular 2 中的 ag-grid 拖放行以对记录进行排序。

ag-grid：使用拖放对网格内的行重新排序

ag-grid: Using Drag drop to reorder rows within the grid

ag-grid