使用ag-grid为cellRendererFramework传递多个值？

Question

我只看到一个与此相关的问题，并且没有发布答案。

我有一个有角度的应用程序 usnig ag-grid。它使用 cellRendererFramework 渲染 a 列的数据以显示在表中。我需要从 Date 列获取数据以正确格式化 Data 列，但找不到任何方法将其放入渲染器组件中。这是基本代码：

  // Columns defined inside the main component
  this.columnDefs = [
    { headerName: 'Date', field: 'timestamp'},
    { headerName: 'Data',
      field: 'type',
      cellRendererFramework: MyRendererComponent,
    },
  }


  // Inside the renderer component
  export class MyRendererComponent implements OnInit {
    myData: any;

    agInit(params: import("ag-grid-community").ICellRendererParams): void {

      // This is where I need data from the first column to 
      // properly set the return value
      this.myData = this.setUpData(params.value)
    }

  setUpData(data: any) {
    // Operate on the data here, but I need the timestamp to do it properly
  }
  ...
  }

有人建议我如何将 timestamp 数据放入 MyRendererComponent 中吗？

Answer 1

找到答案了。使用 params 的 data 参数访问行数据并访问该数据的字段：

params.data.timestamp

https://www.ag-grid.com/javascript-grid-cell-rendering-components/#cell-renderers-and-row-groups

Answer 2

您可以使用

CellRendererParams

来完成

colDef.cellRenderer = myCellRenderer;
colDef.cellRendererParams = {
    color: 'guinnessBlack'
}

然后您可以使用

params.color

 中的 

myCellRenderer

访问颜色

您可以在此处在 AG Grid 文档中阅读更多相关信息。

Answer 3

您应该使用 cellRendererParams 发送数据示例：

{
            cellRendererFramework: 'CityCellRenderer',
            cellRendererParams: {currentApartament: this.apartament},
            
          },

您可以这样获取数据：

<template>
  <div>
    <v-btn text icon @click="btnClickedHandler()">
      <v-icon>mdi-delete-outline</v-icon>
    </v-btn>
  </div>
</template>
<script>
  export default {
    name: 'CityCellRenderer',
    methods: {
      btnClickedHandler() {
        console.log(this.params) //please you check the properties.
      },
    },
  }
</script>