ag-grid 上的可点击事件

Question

如何使我的 ag-grid 中的某列可以像这样点击：-

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

Answer 1

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

创建单元格渲染器

如果你使用 React。单元格渲染器可以只是另一个 React 组件来显示任何你想要的 html 结构。这一个是link给你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
  }}
/>

实例

Answer 2

@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}
  ]
,

ag-grid 上的可点击事件

Clickable event on ag-grid

reactjs

ag-grid

ag-grid-react

创建单元格渲染器

用法

实例