ag-grid：使用拖放對網格中的行進行重新排序

我需要使用拖放操作在ag-grid中重新排序行。拖放方法非常簡單，但當發生拖放時，似乎沒有簡單的方法切換行位置。ag-grid：使用拖放對網格中的行進行重新排序

我嘗試了

gridOptions.api.removeItems(selectedNode);

清除當前，然後

gridOptions.api.insertItemsAtIndex(2, savedNode);

但回落事件似乎重新火防止這種做法。再加上insertItems（當首先運行時）會在內部Ag-grid循環中出現。

我寧願不手動重新排序gridRows，然後重置會有點笨重的gridRow數據。這似乎是大多數網格上的常見要求，所以我認爲它可以完成，但錯過了相關文檔。感謝您的幫助..

來源

2016-09-02 Matrim

K色終於得到了一個角2方法的工作，但目前我不得不關掉網格上的排序和過濾。

這個特殊的例子是依靠行選擇被啓用（由於它是如何找到一些記錄）。網格拖動應該被禁用（因爲它可以直觀地拖動網格），而是使用processRowPostCreate在行級別設置可拖動的參數。這將拖動選項設置爲看起來更好的行。

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

我跟蹤源recrord在方法ondrag當

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

onDragOver照常

在降

我們必須防止無限循環（當網格添加到網格中時，ag網格看起來會記住實時方法，因此ondrop會多次出現），然後插入，刪除和拼接網格及其數據源（我將繼續查看使用網格填充數據，而不是源數據，因爲這將允許源/過濾器，當前插入空行）。然後發出事件（在這種情況下）以請求擁有組件'保存'調整後的數據。我們包裹格在我們自己的類

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

注意，讓我們寫一組網格方法和只要使用網格在應用程序無法複製。

我將在接下來的幾天內對此進行改進，但作爲一個基本的功能，角2中的ag網格可以拖放行來排序記錄。

來源

2016-09-28 14:03:51 Matrim

嗨，你有完整的代碼嗎？我正在使用角2，對我來說，Drop事件並沒有被解僱，任何想法可能是錯誤的？（我也試圖在同一個網格中重新排序）。 – Relativity

您是否將相關方法添加到網格html（dragstart）=「setDrag（$ event）」（dragStopped）=「dragStopped（$ event）」（dragover）=「onDragOver（$ event）」（drop） =「onDrop（$ event）」>將一些日誌放在那些文件上以檢查它們是否正在觸發並且問題不在別處。我們已經編寫了我們自己的網格包裝器，因此它可能對整體無益。 – Matrim

感謝您的時間。我沒有在我的代碼中;相反，我有「generateRowEvents」（正如你上面提到的那樣） - 我在其中約束事件。現在我嘗試添加您在HTML中提到的代碼;但沒有運氣:(你是否使用任何其他軟件包（除了ag-grid和ng2-ag-grid）？ – Relativity

如果您在ag-grid中找不到解決方案，那麼您可以通過添加一個指令（「ngDraggable」）並將其與ag-grid集成來實現。

請爲此找到以下工作plnkr。

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

ngDraggable

希望這有助於..

來源

2016-09-04 09:23:40

感謝您的迴應，如果沒有基於網格的響應，我可以嘗試一下。該代碼是角JS，而我使用的是Angular 2，因此可能存在兼容性問題。 – Matrim

ag-grid：使用拖放對網格中的行進行重新排序

回答

相關問題