农业网格 |仅获取完全更改的单元格数据答案

【问题标题】：ag-grid | Get only exactly changed cell data农业网格 |仅获取完全更改的单元格数据
【发布时间】：2021-06-24 13:23:12
【问题描述】：

我目前正在使用 Ag-grid js 库进行单元格编辑和保存数据。我想出显示数据。并获取编辑数据。我有自定义单元格 ID，即包括 db 表列和行 ID。我计划在完成编辑后将其发送到具有价值的服务器。我使用 MySQL 数据库来存储数据。自定义单元格 ID 如下所示 "1,4,1,12,47".
数据在完成编辑后返回整行数据集。我只需要更改单元格数据对象。

示例笔：https://codepen.io/vidux/pen/vYgKXvp

谢谢。

【问题讨论】：

标签： javascript php ag-grid

【解决方案1】：

我不确定是否有其他方法可以做到这一点，但是，这里有一个替代解决方案，您可以使用列名，因为列名与 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>

【讨论】：