получение значения флажка из столбца ag-grid - PullRequest
Новая
       7

получение значения флажка из столбца ag-grid

0 голосов
/ 29 января 2019

У меня есть флажок в ag-grid, который я отображаю следующим образом: 

  {header: 'Cancel', 
    field: 'IsCancel', 
    cellRenderer: params => {
      return `<input type='checkbox' ${params.value ? 'checked': ''} />`
    }  
  }

Я пытаюсь добиться того, чтобы, когда пользователь нажимает кнопку «Сохранить», я проходил черезкаждой строке и выясните, какой флажок был отмечен.

Я попытался с помощью приведенного ниже кода выяснить, какой флажок отмечен.К сожалению, node.data.IsCancel имеет значение false, даже когда я установил флажок в ag-grid: 

  saveCustomer() {
    this.api.forEachNode(this.printNode)
  }

  printNode(node, index) {
    console.log('Customer Number is: ' + node.data.CustomerNumber);
    console.log('Cancel is: ' + node.data.IsCancel);
    if (node.data.IsCancel.checked) {
      console.log('Customer Number in checked is: ' + node.data.CustomerNumber);
    }
  }

Вот весь код:

cancellation.component.html 

<div *ngIf="loadCancellation">
  <ag-grid-angular class="ag-fresh"
    [columnDefs]="columnDefs"
    [rowData]="customerNames"
    (gridReady)="onGridReady($event)"
    class="ag-theme-balham">
  </ag-grid-angular>
  <br/>
  <button mat-raised-button color="primary" (click)="saveCustomer()">Save</button>
</div>

cancellation.component.ts 

import { Component, Input, AfterViewInit, OnInit } from '@angular/core';
import { CustomerNameService } from '../customer-name.service';
import { CustomerNameCancellation } from '../customername-cancellation';
import { ColDef, GridApi, ColumnApi } from 'ag-grid-community';

@Component({
  selector: 'app-cancellation',
  templateUrl: './cancellation.component.html',
  styleUrls: ['./cancellation.component.css']
})
export class CancellationComponent implements OnInit {
  @Input('zipCode') zipCode: string;
  @Input('lastName') lastName: string;
  customerNames: Array<CustomerNameCancellation>;

  private api: GridApi;
  columnApi: ColumnApi;
  columnDefs: ColDef[];
  loadCancellation: boolean;
  params: any;

  constructor (private customerNameService: CustomerNameService) {
   this.columnDefs = this.createColumnDefs(); 
  }

  ngOnInit() {
    this.customerNameService
    .getCustomerNames(this.zipCode, this.lastName)
    .subscribe(data => {this.customerNames = data;})
    console.log("finished loading customers");
    console.log("zipcode is: " + this.zipCode);
    console.log("lastname is: " + this.lastName);
    this.loadCancellation = true;
  }

  onGridReady(params) : void {
    this.api = params.api;
    this.columnApi = params.columnApi;
    this.api.sizeColumnsToFit();
    this.params = params;
  }

  private createColumnDefs() {
    return [
      {header: 'Customer Number', field: 'CustomerNumber', sortable: true, filter: true},
      {header: 'First Name', field: 'FirstName', sortable: true, filter: true},
      {header: 'Middle Name', field: 'MiddleName', sortable: true, filter: true},
      {header: 'Last Name', field: 'LastName', sortable: true, filter: true},
      {header: 'Address', field: 'Address1', sortable: true, filter: true},
      {header: 'City', field: 'City', sortable: true, filter: true},
      {header: 'State', field: 'StateCd', sortable: true, filter: true},
      {header: 'Zip Code', field: 'ZipCode', sortable: true, filter: true},
      {header: 'Magazine Code', field: 'MagazineCd', sortable: true, filter: true},
      {header: 'Cancel', 
        field: 'IsCancel', 
        cellRenderer: params => {
          return `<input type='checkbox' ${params.value ? 'checked': ''} "/>`
        }  
      },
      {header: 'Cancellation Date', field: 'CancellationDate', sortable: true, filter: true}
    ]
  }

  saveCustomer() {
    this.api.forEachNode(this.printNode)
  }

  printNode(node, index) {
    console.log('Customer Number is: ' + node.data.CustomerNumber);
    console.log('Cancel is: ' + node.data.IsCancel);
    if (node.data.IsCancel.checked) {
      console.log('Customer Number in checked is: ' + node.data.CustomerNumber);
    }
  }

  public checkedVal() {
    console.log(this.params.node.data);
    console.log(this.params.value); 
  }

}

Обновление Я также пытался использовать checkboxSelection: true.Но рядом с флажком отображается «true» или «false».

Обновлено # 2

Я использовал checkboxSelection: true.

Есть две проблемы:

1) Значение "true""или" ложь "показывает рядом с флажком.Пожалуйста, смотрите изображение.

2) Для тех флажков, которые уже возвращаются из базы данных как "true", флажок еще не установлен.

enter image description here

Вот обновленный код: 

import { Component, Input, AfterViewInit, OnInit } from '@angular/core';
import { CustomerNameService } from '../customer-name.service';
import { CustomerNameCancellation } from '../customername-cancellation';
import { ColDef, GridApi, ColumnApi } from 'ag-grid-community';

@Component({
  selector: 'app-cancellation',
  templateUrl: './cancellation.component.html',
  styleUrls: ['./cancellation.component.css']
})
export class CancellationComponent implements OnInit {
  @Input('zipCode') zipCode: string;
  @Input('lastName') lastName: string;
  customerNames: Array<CustomerNameCancellation>;

  private api: GridApi;
  columnApi: ColumnApi;
  columnDefs: ColDef[];
  loadCancellation: boolean;
  params: any;

  constructor (private customerNameService: CustomerNameService) {
   this.columnDefs = this.createColumnDefs(); 
  }

  ngOnInit() {
    this.customerNameService
    .getCustomerNames(this.zipCode, this.lastName)
    .subscribe(data => {this.customerNames = data;})
    console.log("finished loading customers");
    console.log("zipcode is: " + this.zipCode);
    console.log("lastname is: " + this.lastName);
    this.loadCancellation = true;
  }

  onGridReady(params) : void {
    this.api = params.api;
    this.columnApi = params.columnApi;
    this.api.sizeColumnsToFit();
    this.params = params;
  }

  private createColumnDefs() {
    return [
      {headerName: 'Customer Number', field: 'CustomerNumber', sortable: true, filter: true},
      {headerName: 'First Name', field: 'FirstName', sortable: true, filter: true},
      {headerName: 'Middle Name', field: 'MiddleName', sortable: true, filter: true},
      {headerName: 'Last Name', field: 'LastName', sortable: true, filter: true},
      {headerName: 'Address', field: 'Address1', sortable: true, filter: true},
      {headerName: 'City', field: 'City', sortable: true, filter: true},
      {headerName: 'State', field: 'StateCd', sortable: true, filter: true},
      {headerName: 'Zip Code', field: 'ZipCode', sortable: true, filter: true},
      {headerName: 'Magazine Code', field: 'MagazineCd', sortable: true, filter: true},
      {headerName: 'Cancel', 
        field:'IsCancel',
        editable: true, 
        sortable: true,
        filter: true,
        checkboxSelection:true 
      },
      // {header: 'Cancel', 
      //   field: 'IsCancel', 
      //   cellRenderer: params => {
      //     return `<input type='checkbox' ${params.value ? 'checked': ''} "/>`
      //   }  
      // },
      {header: 'Cancellation Date', field: 'CancellationDate', sortable: true, filter: true}
    ]
  }

  saveCustomer() {
    // this.api.forEachNode(this.printNode)
    let selectedRows;
    selectedRows = this.api.getSelectedRows();
    console.log(selectedRows);
  }
}

1 Ответ

0 голосов
/ 30 января 2019

Для выбора флажка вы можете использовать checkboxSelection: true в вашем columnDef вместо того, чтобы использовать визуализацию ячейки: 

this.columnDefs = [
  {
    headerName: 'Name',
    field: 'testName',
    checkboxSelection: true, //HERE !!!!
    width: 150
  }

, а затем вы можете легко получить строки, если флажок установлен: 

someMethod() {
  let selectedRows;
  selectedRows = this.gridApi.getSelectedRows();
  console.log(selectedRows);
  ///than you can map your selectedRows 
  selectedRows.map((row) => {
   console.log(row);
   console.log(row.data);
  });
}

Если вам нужно установить флажок или не зависеть от данных из базы данных, вы можете использовать: 

     onGridReady(params) {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi;
        this.transportApi.getCustomerNames().subscribe((res) => {
          this.rowData = res;
          if (res) {        
 this.transportApi.getSelectedCustomerNames().subscribe((selectedCustomers) => {
                if (selectedCustomers) {
                  this.gridApi.forEachNode((node) => {
                    selectedCustomers.map((customer) => {
                      if (node.data.CustomerNumber=== customer.CustomerNumber) {
                        node.setSelected(true);
                      }
                    });
                  });
                }
              });


            }
          }
        }, error1 => console.log(error1));
      }

В качестве примера используется метод транспорта, используйте ваш код в коде;

...