Ag-grid上的Clickable事件

问题描述

如何在我的ag-grid中的列中确定可单击状态，如下所示：-

我还如何在某个列中呈现动态内容，例如图片，按钮...等？

解决方法

您可以编写自己的自定义cell renderer以显示更复杂的html。这是一些例子

创建一个单元格渲染器

如果使用React。单元格渲染器可以只是另一个React组件，用于显示所需的任何html结构。这是指向您提供的值的google图片结果的链接

function LinkCellRenderer(props) {
  return (
    <a
      target="_blank"
      rel="noopener noreferrer"
      href={"https://www.google.com/search?tbm=isch&q=" + props.value}
    >
      {props.value}
    </a>
  );
}

这是另一个例子。这是一个按钮单元格渲染器，在单击时显示当前行数据

function ButtonCellRenderer(props) {
  const onClick = () => {
    const { data } = props.node;
    let message = "";

    Object.keys(data).forEach((key) => {
      message += key + ":" + data[key] + "\n";
    });
    alert(message);
  };
  return <button onClick={onClick}>Click me</button>;
}

用法

<AgGridReact
  columnDefs={[{
    headerName: "Country",field: "country",width: 120,cellRenderer: "LinkCellRenderer"
  },{
    headerName: "Action",field: "action",width: 100,cellRenderer: "ButtonCellRenderer"
  },...]}
  frameworkComponents={{
    LinkCellRenderer,ButtonCellRenderer
  }}
/>

实时示例

,

@NearHuscarl他有一个很好的答案

这是经过更多研究后我的简单实现方式

columnDefs:
  [
    {
      headerName: "Vehicle Ident number",field: "VIN",filter: true,checkboxSelection: true,cellRenderer: function (params) {
        return '<span><a href="/car/view/'+params.value+'">'+params.value+'<a/></span>'
      }
    },{
      headerName: "Plate Source",field: "REGISTRATION_PLATE",filter: true}
  ],