DevExtreme Angular DataGrid更新时如何获取全量行数据？

当你在DevExtreme DataGrid中编辑数据时，默认仅返回修改的字段，要获取包含已编辑和未编辑内容的完整数据集，可以用以下几种方法：

方法1：直接从数据源获取所有本地数据 #

调用DataGrid实例的getDataSource()方法拿到数据源对象，再通过items()方法获取当前所有本地数据（包含未提交的编辑内容）：

// 替换成你的DataGrid容器ID
const gridInstance = $("#dataGridContainer").dxDataGrid("instance");
const fullDataSet = gridInstance.getDataSource().items();

这种方法拿到的是当前DataGrid本地缓存的所有数据，适合数据量较小、无需分页的场景。

方法2：在更新事件中获取完整行数据 #

如果是在onRowUpdating事件里处理更新逻辑，可以通过数据源匹配主键拿到当前编辑行的完整数据，再合并修改内容：

$("#dataGridContainer").dxDataGrid({
  // 其他配置项
  editing: {
    mode: "row",
    allowUpdating: true
  },
  onRowUpdating: function(e) {
    // 获取全部数据源
    const allData = e.component.getDataSource().items();
    // 通过主键找到当前编辑的完整行
    const fullRow = allData.find(item => item.id === e.key);
    // 将修改的字段合并到完整行
    Object.assign(fullRow, e.newData);
    
    // 此时fullRow就是包含所有字段的完整数据，可用于后续提交
  }
});

方法3：自定义保存逻辑获取完整修改行 #

如果使用内置的保存机制，通过customSave事件可以直接拿到所有修改行的完整数据：

$("#dataGridContainer").dxDataGrid({
  editing: {
    mode: "batch", // 或其他编辑模式
    allowUpdating: true,
    customSave: function(options) {
      // options.data 包含所有修改行的完整数据
      const updatedFullRows = options.data;
      // 在这里处理完整数据的提交逻辑
    }
  }
});

注意事项 #

• 如果DataGrid开启了分页，items()方法默认只返回当前页的数据。若要获取全部数据，可调用数据源的load()方法加载完整数据集（适合数据量不大的场景）：

gridInstance.getDataSource().load().then(fullData => {
  // fullData 就是远程返回的完整数据集
});

• 若数据量较大，建议通过后端接口获取完整数据，避免前端加载过多数据影响性能。

内容的提问来源于stack exchange，提问作者mehrshad