AG-Grid，无法重新排序行 - 在 Grid 中拖放行

Question

源文件： HTML 在下面的代码中，我没有使用 pagination/sort/filter 选项。拖动事件添加到网格。

<div class="col-md-12">
<div class="card">
  <div class="card-header text-uppercase  font-weight-bold">
   RESULTS 
  </div>
<div class="card-body ">     

<br>
<div class="centered-content">    
  <div>    
      <ag-grid-angular #agGrid style="width: 100%; height: 358px;" class="ag-theme-balham" 
      [gridOptions]="gridOptions" 
      enableColResize 
      rowDragManaged=true 
      [animateRows]="true" 
      (gridReady)="onGridReady($event)"
      (rowDragEnter)="onRowDragEnter($event)"
      (rowDragEnd)="onRowDragEnd($event)"
      (rowDragMove)="onRowDragMove($event)"
      (rowDragLeave)="onRowDragLeave($event)">
          <ag-grid-column headerName="Name" field="fullName"></ag-grid-column>
          <ag-grid-column headerName="Address" field="address" [width]="150"></ag-grid-column>

      </ag-grid-angular>
  </div>

</div>
</div>
</div>

.ts 文件

import { Component, OnInit,  } from '@angular/core';

import {GridOptions, GridApi, Grid, RowDragEvent, RowDragEnterEvent, 
        RowDragMoveEvent, RowDragEndEvent, RowDragLeaveEvent} from "ag-grid-community";
@Component({
  selector: 'app-scangrid',
  templateUrl: './scangrid.component.html',
  styleUrls: ['./scangrid.component.scss']

})
export class ScangridComponent implements OnInit {
   private gridOptions: GridOptions;
   private gridApi:GridApi;
  private gridColumnApi;
  filterName: string | null;

  private columnDefs = [
    {

      headerName: "Name",
      field: "",       
      rowDrag : true

  },
  {
    headerName: "Address",
    field: "address",
}
];

private rowDefs = [
   {fullName: 'Name1',address:"address1"},
   {fullName: 'Name2',address:"address2"},
   {fullName: 'Name3',address:"address3"},
];

constructor() {
  this.gridOptions = {
      enableColResize: true,
      rowDragManaged: true,     
      animateRows: true, 
      onRowDragEnter: (event: RowDragEnterEvent) => {this.onRowDragEnter(event);},
      onRowDragEnd: (event: RowDragEndEvent ) => {this.onRowDragEnd(event);},
      onRowDragMove: (event: RowDragMoveEvent ) => {this.onRowDragMove(event);},
      onRowDragLeave: (event: RowDragLeaveEvent ) => {this.onRowDragLeave(event);}
    };
}
  ngOnInit() { 

    this.gridOptions.columnDefs = this.columnDefs;
    this.gridOptions.rowData = this.rowDefs;
   }

    onRowDragEnter(event: RowDragEnterEvent) {console.log('onRowDragEnter',event);}
    onRowDragEnd(event: RowDragEndEvent) {console.log('onRowDragEnd',event);} 
    onRowDragMove(event: RowDragMoveEvent) {console.log('onRowDragMove',event); }
    onRowDragLeave(event: RowDragLeaveEvent) {console.log('onRowDragLeave',event);}

    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;     
      // this.gridOptions.api.addEventListener('rowDragEnter', this.onRowDragEnter);   
      // this.gridOptions.api.addEventListener('onRowDragEnd', this.onRowDragEnd);     
    }
  }

已尝试使用 addEventListener() 添加事件，在上面的代码示例中保留注释。

最终，无法使用拖放功能管理网格上的结果行第 Header/Drag 行图标也未显示...

提前致谢 ASJ

Answer 1

在查看了 stackblitz 和您的原始 post 之后，您的问题似乎出在这两行中：

      <ag-grid-column headerName="Name" field="fullName"></ag-grid-column>
      <ag-grid-column headerName="Address" field="address" [width]="150"></ag-grid-column>

您可以删除它们，因为您可以在 component.ts 文件中进行所有这些配置。同时删除通过 agGridOptions 传入的任何配置，因为它是多余的。

<ag-grid-angular #agGrid style="width: 100%; height: 358px;" class="ag-theme-balham"
                 [gridOptions]="gridOptions"
                 (gridReady)="onGridReady($event)">
</ag-grid-angular>

这就是您所需要的：

this.gridOptions = {
    rowDragManaged: true,
    animateRows: true,
    onRowDragEnter: (event: RowDragEnterEvent) => {
        this.onRowDragEnter(event);
    },
    onRowDragEnd: (event: RowDragEndEvent) => {
        this.onRowDragEnd(event);
    },
    onRowDragMove: (event: RowDragMoveEvent) => {
        this.onRowDragMove(event);
    },
    onRowDragLeave: (event: RowDragLeaveEvent) => {
        this.onRowDragLeave(event);
    }
};

如果您想要调整列的大小，请将其直接应用于列定义，如下所示：

 private columnDefs = [
    {
      headerName: "Name",
      field: "fullName",
      resizable: true,
      rowDrag: true
    },
    {
      headerName: "Address",
      field: "address",
      width: 150
    }
  ];

这应该会让事情进展顺利。祝你好运！

AG-Grid，无法重新排序行 - 在 Grid 中拖放行

AG-Grid, Unable to reorder the rows - Drag n Drop of rows within Grid

ag-grid-angular