农业网格的自定义单元格编辑器

Question

大家好，我基本上正在尝试为 ag-grid 创建一个自定义单元格编辑器，我想使用 ant design 使用自定义下拉菜单，但我无法使其工作，我正在单元格中的屏幕中显示值，但不幸的是，我在单击它时无法设置该值，我对编码非常陌生，所以如果有人可以帮助我解决这个问题，那将非常有帮助（如果我需要添加其他内容，以便更容易理解）请告诉我）

这基本上就是表格了

import DropdownComponent from "containers/sensitivityanalysis/DropdownCell";

const ParametersListsTable: React.FC = () => {
  const [rowData, setRowData] = useState([{}]);

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    {
      field: "Description",
      headerName: "Description",
      width: 200,
      cellEditor: DropdownComponent,
      cellEditorParams: {
        values: [
          "Manifold Pressure",
          "Reservoir Pressure",
          "Bubble Point Pressure",
          "FBHP",
          "Liquid Rate",
          "Total Gas Rate",
          "Oil Rate",
          "Formation Gas Rate",
          "Limit Lift Meas Depth",
          "SG Formation Gas",
          "SG Water",
          "Oil API Gravity",
          "Static Surface Temp.",
          "BHT",
          "Choke Coefficient",
          "Surface Temperature",
          "Operating Mandre Number",
          "OPerating Valve Throughput",
          "SBHP",
          "Bean Size",
          "Minimum Require LG Rate",
          "Tubing Sizing",
          "Diameter For Lifting",
        ],
      },
    },
]);

const defaultColDef = useMemo(() => {
    return {
      resizable: true,
      filter: true,
      editable: true,
    };
  }, []);

这是我的自定义下拉菜单

import { Select } from "antd";
import { useState } from "react";

const { Option } = Select;

const DropdownComponent = (props) => {
  const [selection, setSelection] = useState();
  const handleDropDown = (e) => {
    setSelection(e.target.value);
  };

  return (
    <Select
      style={{ width: "100%", height: "100%" }}
      onClick={handleDropDown}
      value={selection}
    >
      {props.values.map((item) => (
        <Option key={item} value={item}>
          {item}
        </Option>
      ))}
    </Select>
  );
};

export default DropdownComponent;

Answer 1

您解决这个问题的方法是错误的。

首先，我要定义 DropdownRenderer 组件

class DropdownRenderer {
  init(params) {
    this.eGui = document.createElement('div');
    this.eGui.innerHTML = `<span style="overflow: hidden; text-overflow: ellipsis">${params.value}</span>`;
  }

  getGui() {
    return this.eGui;
  }

  refresh(params) {
    return false;
  }
}

关于其列定义

{
        field: 'description',
        width: 110,
        cellEditor: 'agRichSelectCellEditor',
        cellRenderer: DropdownRenderer,
        keyCreator: (params) => {
          return params.value;
        },
        cellEditorParams: {
          cellRenderer: DropdownRenderer,
          values: [
            'Manifold Pressure',
            'Reservoir Pressure',
            'Bubble Point Pressure',
            'FBHP',
            'Liquid Rate',
            'Total Gas Rate',
            'Oil Rate',
            'Formation Gas Rate',
            'Limit Lift Meas Depth',
            'SG Formation Gas',
            'SG Water',
            'Oil API Gravity',
            'Static Surface Temp.',
            'BHT',
            'Choke Coefficient',
            'Surface Temperature',
            'Operating Mandre Number',
            'OPerating Valve Throughput',
            'SBHP',
            'Bean Size',
            'Minimum Require LG Rate',
            'Tubing Sizing',
            'Diameter For Lifting',
          ],
        },
        editable: true,
        cellDataType: false,
      },
}

结果：

这是一个正在工作的插件：https://plnkr.co/edit/7LJ6G8ShGRkjDJLE?preview

Answer 2

我想出了一个解决方案，从文档中读取一些内容并检查我在其中找到的一些示例

这是我的单元格编辑器自定义组件：

import { Select } from "antd";
import {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from "react";

const { Option } = Select;

interface ICellEditorReactComp {
  values: string[];
  getValue: () => string[];
  value: string;
}

const DropdownCell = forwardRef((props: ICellEditorReactComp, ref) => {
  console.log(props);
  const [value, setValue] = useState(props.value);
  const refInput = useRef(null);

  useEffect(() => {
    // focus on input
    refInput.current?.focus();
  }, []);

  useImperativeHandle(ref, () => {
    return {
      getValue: () => {
        return value;
      },
    };
  });

  return (
    <Select
      style={{ width: "100%", height: "100%" }}
      value={value}
      onChange={setValue}
    >
      {props.values.map((item) => (
        <Option key={item} value={item}>
          {item}
        </Option>
      ))}
    </Select>
  );
});

export default DropdownCell;

我只是这样使用它

import DropdownCell from "containers/sensitivityanalysis/DropdownCell";

const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    {
      field: "Description",
      headerName: "Description",
      width: 200,
      cellEditor: DropdownCell,
      cellEditorParams: {
        values: [
          "Manifold Pressure",
          "Reservoir Pressure",
          "Bubble Point Pressure",
          "FBHP",
          "Liquid Rate",
          "Total Gas Rate",
          "Oil Rate",
          "Formation Gas Rate",
          "Limit Lift Meas Depth",
          "SG Formation Gas",
          "SG Water",
          "Oil API Gravity",
          "Static Surface Temp.",
          "BHT",
          "Choke Coefficient",
          "Surface Temperature",
          "Operating Mandre Number",
          "OPerating Valve Throughput",
          "SBHP",
          "Bean Size",
          "Minimum Require LG Rate",
          "Tubing Sizing",
          "Diameter For Lifting",
        ],
      },
      cellDataType: false,
    },