農業網格 | 僅獲取完全更改的單元格數據
[英]ag-grid | Get only exactly changed cell data
問題描述
我目前正在使用 Ag-grid js 庫進行單元格編輯和保存數據。 我想出顯示數據。 並獲取編輯數據。 我有自定義單元格 ID，即包括 db 表列和行 ID。 我計划在完成編輯后將其發送到具有價值的服務器。 我使用 MySQL 數據庫來存儲數據。 自定義單元格 ID 看起來像這樣"1,4,1,12,47" 。
數據在完成編輯后返回整行數據集。 我只需要更改單元格數據 object。
示例筆： https://codepen.io/vidux/pen/vYgKXvp
謝謝你。
1 個解決方案
解決方案1
1 已采納 2021-03-28 06:10:17
我不確定是否有任何其他方法可以做到這一點，但是，這是替代解決方案，您可以使用列名，因為列名與event.data匹配，因此使用該列名獲取所需的數據，如event.data[cols] where cols 是event.column.colDef.headerName 。
演示代碼：
// 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>
（Ag-Grid）在編輯時，如何立即更改值，而不是在單元格失去焦點后？
[英](Ag-Grid) While editing, how to get value changed immediately, not after cell loses focus?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.