如果 colDef 是预定义的并且在引号中，我如何使用 valueFormatter 函数？ - AG-网格

Posted 2023-03-28

【中文标题】如果 colDef 是预定义的并且在引号中，我如何使用 valueFormatter 函数？ - AG-网格

【英文标题】：How do I use a function with valueFormatter if the colDef is preDefined and in quotes? - AG-Grid

【发布时间】：2021-10-04 13:17:05

【问题描述】：

如果我有预定义我的 columnDefs 的 json 数据并希望将 valueFormatters 用作函数，但 json 中的值格式化程序读取 valueFormatter:"dateFormatter" 而不是 valueFormatter:dateFormatter。我将如何访问一个函数

json的写法是：(valueFormatter: "dateFormatter") 但为了让我使用 valueFormater 作为我需要的函数：(valueFormatter: dateFormatter)

【参考方案1】：

更好的方法是利用Custom Column Types。

在您的 JSON 中，只需在列上添加 type 属性：

field:"athlete", type:"athleteType"

然后绑定[columnTypes]Grid属性：

<ag-grid-angular
    [columnDefs]="columnDefs"
    [columnTypes]="columnTypes"
    /* other grid options ... */>
</ag-grid-angular>

现在您可以在 columnTypes 中定义您的 valueFormatter 函数：

// define a column type (you can define as many as you like)
this.columnTypes = 
    athleteType:  valueFormatter: params => 'athlete' ,
;

【参考方案2】：

如果您确实想使用字符串进行此操作，那么网格最初会不正确地呈现，因为网格会尝试使用字符串进行格式化。

设置完成后很快你就需要更新columnDefs

您必须“找到函数”，然后修改 columnDef 以使 valueFormatter 指向函数，然后 setColumnDefs 和 refreshRows 重新构建 DOM 以分配函数。

例如

    // get the current column definitions
    var columnDefs = gridOptions.api.getColumnDefs();

    // loop over them all
    columnDefs.forEach(colDef =>
        // if it has a valueFormatter
        if(colDef.valueFormatter)
          // and it is a string
          if(typeof colDef.valueFormatter == "string")
            // if we can find the function
            if(window[colDef.valueFormatter] 
               && typeof window[colDef.valueFormatter]=="function")
                  // assign the function as the valueFormatter
                  colDef.valueFormatter = window[colDef.valueFormatter];
            
          
        
      );

    // reconfigure the grid with the new definitions
    gridOptions.api.setColumnDefs(columnDefs);

    // force a redraw so that the function can take effect
    gridOptions.api.redrawRows();