在 Angular7 中使用 Checkbox ag-grids 时复选框出现问题
Issue with checkbox when Checkbox ag-grids are used in Angular7
尝试在一个组件中实现两个农业网格。对两者都使用了不同的 columnDefs,但其中一个网格的复选框不起作用。
第一个 ag-grid 工作正常,但第二个没有捕获 selection 上的阵列。数据得到了很好的呈现。当我们 select 带有 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));
}
}
你需要另一个:
@ViewChild('agGrid2') agGrid2: AgGridAngular;
并在 onRowSelect
中使用 agGrid2
onRowSelect(event) {
// console.log(e);
this.selectedArr = this.agGrid2.api.getSelectedRows();
console.log(this.selectedArr);
// console.log(JSON.stringify(this.selectedArr, null, 2));
}
尝试在一个组件中实现两个农业网格。对两者都使用了不同的 columnDefs,但其中一个网格的复选框不起作用。
第一个 ag-grid 工作正常,但第二个没有捕获 selection 上的阵列。数据得到了很好的呈现。当我们 select 带有 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));
}
}
你需要另一个:
@ViewChild('agGrid2') agGrid2: AgGridAngular;
并在 onRowSelect
onRowSelect(event) {
// console.log(e);
this.selectedArr = this.agGrid2.api.getSelectedRows();
console.log(this.selectedArr);
// console.log(JSON.stringify(this.selectedArr, null, 2));
}