javascript - 农业网格 | 仅获取完全更改的单元格数据
问题描述
我目前正在使用 Ag-grid js 库进行单元格编辑和保存数据。我想出显示数据。并获取编辑数据。我有自定义单元格 ID,即包括 db 表列和行 ID。我计划在完成编辑后将其发送到具有价值的服务器。我使用 MySQL 数据库来存储数据。自定义单元格 ID 如下所示"1,4,1,12,47"
。
数据在完成编辑后返回整行数据集。我只需要更改单元格数据对象。
示例笔:https ://codepen.io/vidux/pen/vYgKXvp
谢谢你。
解决方案
我不确定是否有任何其他方法可以做到这一点,但是,这里是替代解决方案,您可以使用列名,因为列名与event.data匹配,因此使用该列名获取所需的数据,例如event.data[cols]
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>
推荐阅读
- ios13 - 在导航栏中显示搜索栏和大标题也无需在 iOS 13 上滚动
- android - 使用包含路径和查询参数的(深度)链接打开应用程序
- vue.js - 在 vuetify 中显示不同卡片的标题
- python - 将 Pandas 数据帧作为二维数组循环
- oracle - 阻止用户使用他们的数据库帐户登录
- java - 使用spring jpa编写动态查询的方法
- php - 日期比较在 laravel (PHP) 中不起作用
- android - 如何使用约束布局以编程方式更改 TextView 重力
- virtual-machine - OpenCL 无法在我的虚拟机上运行以下代码
- ffmpeg - 如何使用 ffmpeg 在横向模式下制作我的视频