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

时间:2020-05-29 11:02:38

标签: checkbox angular8 ag-grid-angular

我正在使用agGrid,其中动态创建了列。我的目标是在选中复选框后获取旧值和新值。我尝试使用“ onCellValueChanged”,但没有成功。如果我使用“ onCellClicked”,则不会获得旧值和新值。

为了您的理解,我想用“旧值”和“新值”来表示,如果用户选中了“旧值”为false而“新值”为true。

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) }); 
    }    
}

网格如下所示:-

enter image description here

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

1 个答案:

答案 0 :(得分:0)

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