如何解决通过渲染的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>;
}
实时演示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。