[尝试在单个组件中实现两个农业网格。两者都使用了不同的columnDef,但是其中一个网格的复选框不起作用。
第一个ag-grid正常工作,但是第二个没有在选择时捕获数组。数据变得很好。当我们使用columnDef
选择网格的复选框时,就会出现问题- html
<div class="row">
<!-- isin universe -->
<div class="col-md-6">
<label>ISIN Universe</label><br>
<div class="table-responsive">
<ag-grid-angular #agGrid style="width: 100%; height: 550px" id="myGrid" class="ag-theme-balham"
[rowData]="searchResultData" [columnDefs]="columnDefs"
rowSelection="multiple" (rowSelected)="rowSelect($event)" (gridReady)="onGridReadyISIN($event)">
</ag-grid-angular>
</div>
</div>
<!-- mapped isin -->
<div class="col-md-6">
<label>Mapped ISIN</label><br>
<div class="table-responsive">
<ag-grid-angular #agGrid2 style="width: 100%; height: 550px" id="myGrid2" class="ag-theme-balham"
[rowData]="tableDataMap" [columnDefs]="columnDef"
rowSelection="multiple" (rowSelected)="onRowSelect($event)" (gridReady)="onGridReadyMap($event)">
</div>
</div>
</div>
export class SecurityportfolioComponent implements OnInit {
@BlockUI('block-section') blockUI: NgBlockUI;
@ViewChild('agGrid') agGrid: AgGridAngular;
private gridApi;
private gridColumnApi;
private onGridReady;
columnDefs = [
{
sortable: true,
filter: true,
width: 30,
headerCheckboxSelection: true,
headerCheckboxSelectionFilteredOnly: true,
checkboxSelection: true,
lockPosition: true
},
{
headerName: 'ISIN',
field: 'isin',
sortable: true,
filter: true,
width: 150
},
{
headerName: 'Security Name',
field: 'securityName',
width: 120,
lockPosition: true
},
{
headerName: 'Maturity Date',
field: 'maturityDate',
width: 120,
lockPosition: true
},
{
headerName: 'Rating',
field: 'rating',
width: 150,
lockPosition: true
}
];
columnDef = [
{
sortable: true,
filter: true,
width: 30,
headerCheckboxSelection: true,
headerCheckboxSelectionFilteredOnly: true,
checkboxSelection: true,
lockPosition: true
},
{
headerName: 'ISIN',
field: 'isin',
sortable: true,
filter: true,
width: 150
},
{
headerName: 'Security Name',
field: 'securityName',
width: 150,
lockPosition: true
},
{
headerName: 'Maturity Date',
field: 'maturityDate',
width: 120,
lockPosition: true
},
{
headerName: 'Rating',
field: 'rating',
width: 120,
lockPosition: true
}
];
// row selection
rowSelect(event) {
this.tempArr = this.agGrid.api.getSelectedRows();
console.log(this.tempArr);
// console.log(this.tempArr);
console.log(this.tableData);
}
onRowSelect(event) {
// console.log(e);
this.selectedArr = this.agGrid.api.getSelectedRows();
console.log(this.selectedArr);
// console.log(JSON.stringify(this.selectedArr, null, 2));
}
}
[尝试在单个组件中实现两个农业网格。两者都使用了不同的columnDef,但是其中一个网格的复选框不起作用。第一个ag-grid正常工作,但是...
您需要另一个: