Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 从V8升级到V15分页后的ag-grid无法正常工作.初始加载后不执行数据源大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
背景

已将打字稿从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.@R_539_10586@lRecords = result.paginatedList.length;
                        if (this.@R_539_10586@lRecords <= 0) {
                            this.gridStatusmessageDisplay("");
                        }
                        params.successCallBACk(result.paginatedList,result.@R_539_10586@lRecords);
                    } 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="@R_539_10586@lRecords > catPaginationSize">
                 <p-paginator rows="10" @R_539_10586@lRecords="{{@R_539_10586@lRecords}}"   (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();
    }

大佬总结

以上是大佬教程为你收集整理的angularjs – 从V8升级到V15分页后的ag-grid无法正常工作.初始加载后不执行数据源全部内容,希望文章能够帮你解决angularjs – 从V8升级到V15分页后的ag-grid无法正常工作.初始加载后不执行数据源所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。