AG-Grid, Невозможно изменить порядок строк - Перетаскивание строк в Grid. - PullRequest
Новая
       32

AG-Grid, Невозможно изменить порядок строк - Перетаскивание строк в Grid.

0 голосов
/ 23 октября 2019

Файлы соусов: 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 file 

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 Значок заголовка строки / перетаскивания также не виден ...

Спасибо в Advance ASJ

1 Ответ

0 голосов
/ 23 октября 2019

После просмотра стекаблица и вашего оригинального сообщения вы обнаружите, что ваша проблема в следующих двух строках: 

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

Вы можете удалить их, так как вы можете выполнить всю эту конфигурацию в компоненте . 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
    }
  ];

Это должно привести к тому, что все будет двигаться вперед. Удачи!

...