背景
已将打字稿从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’,* /
rowModelType：’无限’,
分页：是的,
当前行为
在调用searchCategory()时,进行服务器调用并使用分页栏将数据加载到网格中.
在分页栏中单击下一步时,它不会调用已注册的数据源并在那里停止.
预期的行为
分页应该正常工作.数据源应该在下一个& prev并更新网格
解决方法
使用其他分页库来解决这个问题,这里是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();
}
