通过渲染的React组件创建一个新行

问题描述

我使用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;

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

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

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

解决方法

您可以使用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>;
}

实时演示