Question

生成文件： HTML 在下面的代码中，我没有使用分页/排序/过滤器选项。拖动事件已添加到网格。

<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（）添加事件，在上面的代码示例中保留了注释。

最终，无法使用拖动n放下功能来管理网格上的结果行还没有显示行标题/拖动图标...

预先感谢 ASJ

Answer 1

查看堆栈闪电和原始帖子后，看来您的问题出在以下两行：

      <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中拖动n行

1 个答案: