Получение значения флажка из столбца ag-grid
У меня есть флажок в 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" или "false" отображается рядом с флажком. Пожалуйста, смотрите изображение.
2) Для тех флажков, которые уже возвращаются из базы данных как "истинно", флажок еще не установлен.
Вот обновленный код:
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 ответ
Решение
Для выбора флажка вы можете использовать check boxSelection: 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));
}
Транспортный метод является примером использования вашего в коде;