angularjs – 从V8升级到V15分页后的ag-grid无法正常工作.初始加
发布时间:2020-12-17 17:10:54 所属栏目:安全 来源:网络整理
导读:背景 已将打字稿从2.3.4升级到2.6.2. Ag网格有编译问题所以它升级到15.0.0.升级后,现有的ag-grid分页代码无效. 以前的配置 – ag-grid和分页工作正常 单击搜索按钮从表单searchCategory()方法将被调用并加载网格 的package.json "ag-grid": "^8.1.0","ag-gri
背景
已将打字稿从2.3.4升级到2.6.2. Ag网格有编译问题所以它升级到15.0.0.升级后,现有的ag-grid分页代码无效. 以前的配置 – ag-grid和分页工作正常 单击搜索按钮从表单searchCategory()方法将被调用并加载网格 的package.json "ag-grid": "^8.1.0","ag-grid-angular": "^8.1.0",..... "typescript": "^2.3.4" temp.ts gridOptions = <GridOptions>{ context: {},paginationPageSize: AppUtils.IR_PAGINATION_SIZE,/* rowModelType: 'pagination',*/ rowModelType: 'infinite',pagination: true,enableServerSideSorting: true,suppressDragLeaveHidesColumns: true,onGridSizeChanged: () => { this.gridOptions.api.sizeColumnsToFit(); },getRowHeight: () => { return 32; },components: { getTypeDesc : function(params: any) { var eDiv = document.createElement('div'); let desc = params.context.typeMaster.filter(function (item: any) { if (params.data.typeCode === item.typeCode) { return item.typeDescription; } }); eDiv.innerHTML = '<span>' + desc[0].typeDescription + '</span>'; return eDiv; },}; typeMaster: TypeMasterModel[]; categoryMaster: CategoryModel[]; category: CategoryModel = new CategoryModel(); severityMaster: SeverityMasterModel[]; selectedRowsValue: number[]; columnDefs: any[] = [ { headerName: '',field: 'catCode',hide: true },{ headerName: 'Category',field: 'catDesc',width: 550 },{ headerName: 'Type',field: 'typeCode',cellRenderer:'getTypeDesc' } { headerName: 'PatientID',field: 'patIdMandYn' },{ headerName: 'EquipmentID',field: 'equipIdMandYn' },{ headerName: 'WorkorderId',field: 'workOrderMandYn' } ]; action: string = ''; searchCategory() { let self = this; let dataSource = { rowCount: null,// getRows: (params: any) => { this.http.get(//server call ).subscribe(res => { let result = res['result']; if (result != null && result.paginatedList != null) { this.totalRecords = result.paginatedList.length; if (this.totalRecords <= 0) { this.gridStatusMessageDisplay(""); } params.successCallback(result.paginatedList,result.totalRecords); } else { this.gridStatusMessageDisplay(""); } }); } } this.gridOptions.api.setDatasource(dataSource); } temp.html 新配置详细信息 的package.json ag-grid": "^15.0.0","ag-grid-angular": "^15.0.0","typescript": "^2.6.2" test.ts分页取代了无限. / * rowModelType:’pagination’,* / 当前行为 在调用searchCategory()时,进行服务器调用并使用分页栏将数据加载到网格中. 预期的行为 解决方法
使用其他分页库来解决这个问题,这里是primeng分页,
https://www.primefaces.org/primeng/#/paginator // HTML <div *ngIf="totalRecords > catPaginationSize"> <p-paginator rows="10" totalRecords="{{totalRecords}}" (onPageChange)="paginate($event)" ></p-paginator> </div> // TS import { PaginatorModule } from 'primeng/primeng'; paginate(event: any) { this.startIndex = event.first; this.rowsPerPage = event.rows; this.paginatedList(); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |