- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 react + redux 应用程序中使用最新的 agGrid 企业。
问题是我正在使用 agGrid 的内置编辑,这是直接修改底层数据,即从 redux 存储返回的数组。这打破了不变性原则。有没有办法使用/配置 agGrid 来修改数据,但是:
谢谢
最佳答案
编辑:更详细地扩展我的答案。
你必须设置一个“valueSetter”函数,并在每一列上设置它。最简单的方法是使用 defaultColDef。快速注意,我表中的每一行都是一个“交易”,因此您会看到交易引用,而不是其他一些形式的标识。
例如:
<AgGridReact
// OPTIONS REQUIRED FOR OPTIMIZATION WITH REACT
reactNext
deltaRowDataMode
getRowNodeId={data => data.transaction_id}
// OTHER OPTIONS
rowSelection="multiple"
editType="fullRow"
// TABLE DATA
defaultColDef={{ ...defaultColDef, valueSetter }}
columnDefs={columns}
rowData={transactions}
// DISPLAY
rowClassRules={rowClassRules}
// EVENTS
onGridReady={onGridReady}
onRowEditingStarted={onRowEditingStarted}
onRowEditingStopped={onRowEditingStopped}
/>
不要忘记react和redux需要的优化项。 (reactNext, deltaRowDataMode, getRowNodeId)。
我定义的defaultColDef很简单:
defaultColDef: {
resizable: true,
sortable: true,
filter: true,
editable: true,
},
而 valueSetter 是一个非常简单地定义为的函数:
const valueSetter = (params) => {
allActions.columnEdit(params.data, params.oldValue, params.newValue, params.colDef);
return false;
};
allActions.columnEdit 只是调用我在导入中定义的 Redux 操作,然后与 connect() 和 mapDispatchToProps 绑定(bind)。return false 是防止状态突变所必需的。确保您的 redux 操作处理您需要做的任何事情。这是我的例子:
case actionTypes.COLUMN_EDIT: {
// FOR EACH COLUMN EDITED, CHECK IF ANYTHING CHANGED
// POST CHANGES TO NEW STATE
if (payload.oldValue !== payload.newValue) {
const account = 'acct01';
const column = payload.colDef.field;
const index = state[account].transactions.findIndex(
t => t.transaction_id === payload.t.transaction_id,
);
return produce(state, (draft) => {
const transaction = draft[account].transactions[index];
transaction[column] = payload.newValue;
});
}
return state;
}
希望这会有所帮助。对于应该由 Ag-Grid 直接处理的内容,似乎有很多额外的解决方法,但也许他们会将一些 future 的开发投入其中。
关于reactjs - react + redux 应用程序中的 agGrid 正在修改底层数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56269113/
我有一个使用行分组的 aggrid 表 { field: 'day', hide: true, rowGroup: true, cellRenderer:'agGroupCellRe
我在我的项目中使用 Angular Grid。我想在单元格内容增加时自动增加行高。我检查了 autoHeight 属性以设置为自动,但它在我的情况下不起作用。 在我的例子中,OldRequestNum
我创建了 AgGrid 数据表,其中 AgGrid Cell 包含自定义对象 该对象具有名称、颜色、锁定等属性。 我正在使用 customCellRenderer 和 customCellEditor
在ag-grid中,我只找到了自定义日期过滤器,但找不到任何用于过滤时间的内容。有人可以帮我如何做自定义过滤器只是为了时间。我的列数据格式如 hh:mm。我需要授予用户过滤时间的权限。 我正在使用 a
您将如何在特定列的标题单元格内显示您过滤列的短语? 假设我按“美国”过滤国家/地区列,标题单元格更改为国家/地区(美国)。 我尝试使用 Angular 检查器检查范围,但找不到与确切过滤短语相关的任何
我正在尝试右对齐 AgGrid 中的列标题。我知道如何使用 IHeaderAngularComp 实现自定义标题组件。并提供我自己的模板,但是对于应该微不足道的事情来说,这似乎需要做很多工作。 htt
我正在处理 AgGrid(AgGridReact 组件),其中一个标题单元格有一个“全选”复选框 想知道是否有办法将全选复选框与列中的复选框对齐。 最佳答案 您可以添加 headerClass到特定的
我正在使用带有分页(客户端)的 agggrid。 我需要获取当前页面中存在的行数。 当我使用下面的 api 时,它总是让我计算所有页面中存在的所有行。 gridApi.paginationGetRow
我想在 AgGrid 中显示行数,但遇到了问题。 ngOnInit() { console.log(this.gridOptions.api.getDisplayedRowCoun
我在我的项目中使用 ag-grid,我在应用表状态时遇到问题。这是我来自 onGridReady 的代码片段功能: this.gridApi = params.api; this.gridC
将 ag-grid 与异步数据一起使用时,文档建议调用 api.setRowData(data)方法。 问题在于api只有在 gridReady 之后才准备好事件被触发。 所以我有一个竞争条件,为了解
我正在使用 AgGrid 社区版本和 React。我试图在标题中的每一列上显示一个复选框。选择时应突出显示所选列下的单元格。此外,我需要记录所选列的更改。 我的columnDefs是基于后端数据构建的
我只想获取第一列的数据,或者我知道索引该列,AgGrid Angular2。 我在用 cellClicked html (cellClicked)="onCellClicked(event)" 组件.
我只想获取第一列的数据,或者我知道索引该列,AgGrid Angular2。 我在用 cellClicked html (cellClicked)="onCellClicked(event)" 组件.
我在我的元素中使用 aggrid,我想在我的行中实现一个自动调整大小的功能。意味着目前在我的每个单元格中都会有多个 div 元素。因此,如果我固定行的高度,如果我添加第三个 div,它就会隐藏或溢出。
我正在使用 ag-Grid 来显示用户列表。如果我编辑用户详细信息,那么我想单击网格中的更新按钮来编辑相应的用户详细信息。 这是 ag_grid 中的列标题 { headerName: 'Updat
我需要在树数据网格的层次结构列上创建自定义单元格渲染器。问题是树变平了。 我试过在 autoGroupColumnDef 上分配单元格渲染器: this.autoGroupColumnDef
我在 react + redux 应用程序中使用最新的 agGrid 企业。 问题是我正在使用 agGrid 的内置编辑,这是直接修改底层数据,即从 redux 存储返回的数组。这打破了不变性原则。有
在使用 AngularJS 评估 agGrid 期间。我在 agGrid Documentation 上发现了这一点AngularJS 的示例不工作。我在 Internet Explorer 控制台上
当 rowGroup 应用于 aggrid 中的任何列时,并且statusPanel: 'agTotalAndFilteredRowCountComponent',行数在页脚中显示如下 行:X,共 Y
我是一名优秀的程序员,十分优秀!