AGGrid动态网格大小
创始人
2024-07-31 01:00:34
0次

  1. 首先，我们需要在应用程序中安装AG grid npm install --save ag-grid-community

  2. 在应用程序中引入AG grid模块 import { AgGridModule } from 'ag-grid-angular';

@NgModule({ imports: [ AgGridModule.withComponents([]) ], // ... }) export class AppModule { }

  1. 在组件中定义AG grid小部件和数据 private gridApi; private gridColumnApi; columnDefs = [ { headerName: 'Make', field: 'make' }, { headerName: 'Model', field: 'model' }, { headerName: 'Price', field: 'price' } ]; rowData = [ { make: 'Toyota', model: 'Celica', price: 35000 }, { make: 'Ford', model: 'Mondeo', price: 32000 }, { make: 'Porsche', model: 'Boxter', price: 72000 } ];

  2. 在模板中定义AG grid小部件

  3. 定义网格大小变化的方法 onPageSizeChanged(newPageSize) { var value = document.getElementById("page-size").value; this.gridApi.paginationSetPageSize(Number(value)); }

  4. 在组件中定义onGridReady()方法 onGridReady(params) { this.gridApi = params.api; this.gridColumnApi = params.columnApi;

    // 自适应网格大小 console.log('onGridReady'); var allColumnIds = []; this.gridColumnApi.getAllColumns().forEach(function(column) { allColumnIds.push(column.colId); }); this.gridColumnApi.autoSizeColumns(allColumnIds); }

  5. 在模板中定义HTML