如何在agGrid中获取动态生成的复选框列的新旧值

Posted 2023-03-28

【中文标题】如何在agGrid中获取动态生成的复选框列的新旧值

【英文标题】：How to get old and new value of dynamically generated checkbox column in agGrid

【发布时间】：2020-09-16 22:22:55

【问题描述】：

我正在使用动态创建列的 agGrid。我的目标是在选中复选框后获取旧值和新值。我尝试使用“onCellValueChanged”，但它没有用。如果我使用“onCellClicked”，那么我不会得到旧值和新值。

为了您的理解，我想用旧值和新值表示，如果用户检查，则旧值为假，新值为真。

HTML

<ag-grid-angular class="ag-theme-balham" [gridOptions]="siteJobDeptGridOptions"
            [rowData]="siteJobDeptRowData" [columnDefs]="siteJobDeptColDef" [paginationPageSize]=10 [domLayout]="domLayout"
            (gridReady)="onGridReady($event)">
        </ag-grid-angular>

TS 文件

export class SiteJobDeptConfigComponent implements OnInit 
ngOnInit() 
    this.domLayout = "autoHeight";                      
    this.getAllSiteJobConfig();      
    this.generateColumns();     


onGridReady(params: any)             
    params.api.sizeColumnsToFit();
    params.api.resetRowHeights();                                        


generateColumns()

    let deptColDef = []; 

    let colSiteJob =   
            field: 'SiteJobName', headerName: 'Site Job Name',resizable: true,
            sortable: true, filter: true, editable: false, 
    

    this.siteJobDeptCommonService.getEntityData('getpublisheddepts')
        .subscribe((rowData) =>   
            deptColDef.push(colSiteJob);                              
            for(let dept of rowData)
                                                
                deptColDef.push( 
                    field: dept.DeptName, headerName: dept.DeptName, width:100,resizable: true,
                    cellClass: 'no-border',                                        
                    cellRenderer : params =>                         
                        var input = document.createElement('input');
                        input.type="checkbox";                        
                        input.checked=params.data[dept.DeptName];                       
                        return input;
                    ,                    
                    onCellValueChanged: this.siteDeptCellValueChanged.bind(this),

                )
                                        
        this.siteJobDeptColDef = deptColDef;              
    ,
    (error) =>  alert(error) );         


siteDeptCellValueChanged(dataCol: any)     
    let checkedOldValue = "Old Check Value - " + dataCol.oldValue;   
    let checkedNewValue = "New Check Value - " + dataCol.newValue;                        


getAllSiteJobConfig()
        
    let siteJobRowData = [];
    this.siteJobDeptCommonService.getEntityData('getallsitedeptjob')
        .subscribe((rowData) =>             
            for(let siteJobDetail of rowData)
                           
                for(let deptAllow of siteJobDetail.DeptAllow)
                
                    tempArray[deptAllow["DeptName"]] = deptAllow["IsAllow"];
                

                siteJobRowData.push(tempArray); 
            
            this.siteJobDeptRowData = siteJobRowData;
        ,
        (error) =>  alert(error) ); 
        

网格如下所示：-

您能帮我如何从动态生成的复选框中获取旧数据和新数据值吗？

【参考方案1】：

在列定义创建中应该是“cellValueChanged”而不是“onCellValueChanged”。 你可以找到here。

【参考方案2】：

当您在 params 对象中声明您的方法时，oldValue 和 newValue 属性会给出您正在寻找的结果：

onCellValueChanged: function(params)  
            console.log(params.oldValue);
            console.log(params.newValue)