通过呈现的 React 组件创建一个新行

Question

我使用 cellRenderer 和 frameworkComponents 将按钮组件呈现为一列。

import InsertNodeBtnRender from "./HierarchyButtons/insertRowBtn.jsx";

columnDefs: [
        {
          lockPosition: true,
          cellRenderer: "insertBtnRender",
          // cellClass: 'locked-col',
          maxWidth: 60,
          // suppressNavigable: true,
        },
        { field: "jobTitle" },
        { field: "employmentType" },
      ],
      frameworkComponents: {
        insertBtnRender: InsertNodeBtnRender,
      },

class InsertNodeBtn extends Component {

  btnClickedHandler() {
  // I have access to "this.props.node" for setting data to EXISTING rows
  }

  render() {
    return <button onClick={() => this.btnClickedHandler()}>+</button>;
  }
}

export default InsertNodeBtn;

在上述组件的处理程序中，我可以使用道具属性操作现有的行节点（例如使用 this.props.node.setData()）。但是，我只是想在网格中添加一个新行，其中包含基于当前单元格的一些数据字段。

我该怎么做？ API 中似乎没有提供允许我执行此操作并且可在组件事件处理程序中访问的方法。 https://www.ag-grid.com/javascript-grid-data-update/#gsc.tab=0

TLDR；按下“+”按钮后。如何向网格添加新行？

Answer 1

您可以使用 GriApi.applyTransaction({ add: newItems }) 向网格中添加新行。有关详细信息，请参阅 update-transaction 部分。这是一个例子：

import React from "react";

let i = 0;

function createNewRowData({ orgHierarchy, employmentType }) {
  const boss = orgHierarchy[orgHierarchy.length - 1];
  const newData = {
    jobTitle: "Minion",
    employmentType,
    orgHierarchy: orgHierarchy.concat(boss + "'s Minion " + ++i)
  };
  return newData;
}

export default function InsertNodeBtnRender(props) {
  const { api, columnApi, data } = props;
  const onAdd = () => {
    const newItems = [createNewRowData(data)];

    api.applyTransaction({ add: newItems });
    columnApi.autoSizeAllColumns();
  };

  return <button onClick={onAdd}>+</button>;
}

通过呈现的 React 组件创建一个新行

Create a new row through a rendered React component

reactjs

ag-grid

ag-grid-react

现场演示