Question

在gridOptions

中

     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

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

我的网格选项：

commonGridOptions: any = {
        enableColResize: true,
        enableSorting: false,
        enableFilter: false,
        groupHeaders: true,
        rowHeight: this.gridRowHeight,
        suppressRowSelection: false,
        rowSelection: 'single',
        suppressCellSelection: true,
        suppressRowClickSelection: true,
        DragAndDrop:false,
}

我尝试使用上面的代码实现拖放功能：但是当我尝试在开始拖动（$ event.target.attributes.row.value）时获取源行索引时，我无法获取$ event.target.attributes中的行。

而且我还没有获得目标行索引（$ event.target.offsetParent.attributes.row.value）。

请帮我解决这个问题。

如果提供plunker示例，则非常值得注意。

Answer 1

我能够根据拖放功能进行修改。这是我的代码。当网格按列排序时，我跳过了修改（拖放因排序而没有任何视觉效果）。

processRowPostCreate: (params) => {
        params.eRow.draggable = true;
        params.eRow.ondragstart = (event: DragEvent) => {
            this._newRowIndex = params.rowIndex;
            this._currentRowIndex = params.rowIndex;
        };
        params.eRow.ondragenter = (event: DragEvent) => {
            this._newRowIndex = params.rowIndex;
        };
        params.eRow.ondragend = (event: DragEvent) => {
            let sortmodel = this.gridOptions.api.getSortModel();
            if (sortmodel.length === 0 && this._newRowIndex !== this._currentRowIndex) {
                let record = params.node.data;
                this.handleRearrangement();
                this.records.splice(this._newRowIndex, 0, this.records.splice(this._currentRowIndex, 1)[0]);
                this.gridOptions.api.removeItems([params.node], false);
                this.gridOptions.api.insertItemsAtIndex(this._newRowIndex, [record], false);
            } else {
                this._newRowIndex = this._currentRowIndex; // just to be sure
            }

        };
    }

使用角度2拖放并重新排序ag-grid中的行

1 个答案: