农业网格 | 仅获取完全更改的单元格数据
[英]ag-grid | Get only exactly changed cell data
问题描述
Im currently working on cell editing and save data using Ag-grid js library.
我目前正在使用 Ag-grid js 库进行单元格编辑和保存数据。 i figure out showing data.我想出显示数据。 and get data on edit.并获取编辑数据。 I have custom cell id, that is include db table column and row ids.我有自定义单元格 ID，即包括 db 表列和行 ID。 im planning to send it to server with value after finish edit.我计划在完成编辑后将其发送到具有价值的服务器。 I Used MySQL database to store data.我使用 MySQL 数据库来存储数据。 the custom cell id look like this "1,4,1,12,47" .自定义单元格 ID 看起来像这样"1,4,1,12,47" 。
the data is return whole row data set after finish edit.数据在完成编辑后返回整行数据集。 I just need only changed cell data object.我只需要更改单元格数据 object。
example pen: https://codepen.io/vidux/pen/vYgKXvp示例笔： https://codepen.io/vidux/pen/vYgKXvp
thank you.谢谢你。
1 个解决方案
解决方案1
1 已采纳 2021-03-28 06:10:17
I am not sure if there are any other way to do this but, here is alternate solution you can use column name because the column name matches with event.data so using that column name get required data like this event.data[cols] where cols is event.column.colDef.headerName .我不确定是否有任何其他方法可以做到这一点，但是，这是替代解决方案，您可以使用列名，因为列名与event.data匹配，因此使用该列名获取所需的数据，如event.data[cols] where cols 是event.column.colDef.headerName 。
Demo Code :演示代码：
// specify the columns const columnDefs = [ { field: "model.value", headerName: "Model" }, { field: "make.value", headerName: "Make" }, { field: "price.value", headerName: "Price" }, ]; const autoGroupColumnDef = { } // let the grid know which columns and what data to use const gridOptions = { columnDefs: columnDefs, defaultColDef: { flex: 1, minWidth: 110, editable: true, resizable: true, }, onCellValueChanged: onCellValueChanged, }; function onCellValueChanged(event) { console.clear() console.log('data after changes is: ', event.data); var cols = event.column.colDef.headerName.toLowerCase() console.log('data column name--', event.column.colDef.headerName.toLowerCase()); console.log('data after changes is: ', event.data[cols]); } // setup the grid after the page has finished loading document.addEventListener('DOMContentLoaded', function() { // lookup the container we want the Grid to use const eGridDiv = document.querySelector('#myGrid'); // create the grid passing in the div to use together with the columns & data we want to use new agGrid.Grid(eGridDiv, gridOptions); let jsonObj = `[ { "make":{"value": "Toyota", "cell_id":"22,331,1"}, "model": {"value": "Hilux", "cell_id":"22,331,2"}, "price": {"value": 80899, "cell_id":"22,331,3"} }, { "make":{"value": "MBW", "cell_id":"22,332,1"}, "model": {"value": "I8", "cell_id":"22,332,2"}, "price": {"value": 300899, "cell_id":"22,332,3"} } ]`; gridOptions.api.setRowData(JSON.parse(jsonObj)); gridOptions.api.sizeColumnsToFit(); });
<html> <head> <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script> <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css"> <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css"> </head> <body> <div id="myGrid" style="height: 80vh;width:100%" class="ag-theme-alpine"></div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.