如何从 Cell Renderer 调用函数 - ag grid答案

【问题标题】：How do i call function from Cell Renderer - ag grid如何从 Cell Renderer 调用函数 - ag grid
【发布时间】：2021-03-25 12:15:33
【问题描述】：

我在 vue.js 中使用 cellrenderer，我想从单元格渲染器中调用函数。

附上我的代码：

gridColumns() {
  return [{
      headerName: "Actions",
      cellRenderer: 'iconRender',
      width: 140,
      cellRendererParams: (params) => {
        return {
          icon: ['edit', 'delete_forever'],
          color: 'gray'
        }
      }
    },
    {
      headerName: "Name",
      field: "name"
    },
    {
      headerName: "Artiyfactory Name",
      field: "artifactoryName"
    },
    {
      headerName: "Artifact Type",
      field: "artifactType"
    },
    {
      headerName: "Deployment Action",
      field: "deploymentAction"
    },
    {
      headerName: "Location",
      field: "usage.location"
    },
    {
      headerName: "Destenition On Setup",
      field: "usage.destOnSetup"
    },
  ]
}
},

function iconRender(params) {
  var spanElement = document.createElement("span");
  var textElement = document.createElement("span");
  if (params.value != undefined) {
    textElement.innerHTML = " " + params.value;
    textElement.style.verticalAlign = "middle";
  }
  params.icon.forEach(element => {
    var iconElement = document.createElement("i");
    iconElement.className = "material-icons";
    iconElement.style.color = params.color;
    iconElement.style.verticalAlign = "middle";
    iconElement.innerHTML = element;
    spanElement.appendChild(iconElement);
  });
  spanElement.appendChild(textElement);
  return spanElement;
}

我想从图标元素调用一个函数，我尝试了几种方法，但对我没有任何作用。

你能看一下并告诉我该怎么做吗？

谢谢你:)

【问题讨论】：

在声明 ColDef 时，您可能幸运地将函数绑定到属性，如下所示：{cellRenderer: this.iconRender.bind(this)}
谢谢！，你能告诉我我应该在 iconRender 中写什么以便调用 myfunc() 吗？
当您将列定义传递给 ag-grid 实例时，它会将您的函数绑定到该列的 cellrenderer 属性。因此，当它在其构建生命周期中检查 cellRenderer 的值时，它会看到您的函数并随后触发它。
但我不明白如何调用该函数，我想在单击图标时调用 som 函数
ah - 那么你需要附加一个点击处理程序。 GridOptions 有一个“onCellClicked”属性，您将在那里分配一个函数。

标签： vue.js ag-grid cellrenderer

【解决方案1】：

而不是通过 dom 创建元素。您可以为单元格创建自定义组件。在 ag-grid 中，当您单击单元格时，它仅捕获单元格的单击事件，而不是单元格内的内容（在您的情况下为图标）。您可以为渲染的单元格创建自定义组件，并且可以像普通组件一样执行所有操作。请参考 [https://plnkr.co/edit/3nZPzwmGufKGXwvn] 我在 plunker 上制作 cmets 请参考他们有按钮的最后一列。

【讨论】：