Как сделать так, чтобы определенный столбец в моей ag-сетке был доступен для кликов следующим образом: - Пример

Также как я могу отобразить динамический контент в определенном столбце, например изображение, кнопку ... и т. д.?

1
Ahmed Ahmed Sayed 18 Авг 2020 в 21:59

2 ответа

Лучший ответ

Вы можете написать собственное средство визуализации ячеек, чтобы отображать больше сложный 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
  }}
/>

Живой пример

Edit Cell Renderers

1
NearHuscarl 19 Авг 2020 в 05:33

@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}
  ]
,
0
Ahmed Ahmed Sayed 20 Авг 2020 в 13:23