DevExtreme dxDatagrid使用store.push插入行到索引0失效问题

我用store.push方法向dxDataGrid插入行，代码如下：

store.push([
  {
    type: "insert",
    data: data,
    key: data.id,
    index: 0
  }
]);

设置index:0后，新插入的行却直接跑到了表格底部，换成CustomStore也存在同样问题。目前临时方案是直接修改ArrayStore的数据源数组，再调用dataSource.reload()，但这个方法有局限性，还会带来一些弊端。

根据官方文档对ArrayStore.push方法的说明，insert类型的操作参数中，index字段用于指定插入的位置索引，设置为0应该将新数据插入到数据集的首位。

问题原因 #

出现这个问题的核心原因通常是dxDataGrid开启了排序功能（默认可能会按某个字段自动排序，比如主键id升序），即便通过push指定了插入位置，网格也会自动触发重新排序，把新行排到符合排序规则的位置（比如id更大的话就会跑到底部）。

解决方案 #

1. 插入时临时关闭排序

先保存当前网格的排序状态，关闭排序后执行插入，再恢复排序（如果需要）：

// 获取网格实例
const grid = $("#yourGridId").dxDataGrid("instance");
// 保存当前排序配置
const originalSort = grid.option("sorting");
// 临时关闭排序
grid.option("sorting", { mode: "none" });
// 执行插入操作
store.push([
  {
    type: "insert",
    data: data,
    key: data.id,
    index: 0
  }
]);
// 恢复原排序配置
setTimeout(() => {
  grid.option("sorting", originalSort);
}, 0);

2. 直接操作数据源数组并通知store更新

如果使用的是ArrayStore，可以直接操作数据源数组，再通过notify方法通知store更新，避免调用reload()：

// 获取ArrayStore的数据源数组（注意：_array是内部属性，版本更新可能变化，谨慎使用）
const sourceArray = store._array;
// 插入到数组首位
sourceArray.unshift(data);
// 通知store数据已插入
store.notify({
  type: "insert",
  data: data,
  index: 0
});

3. 关闭不必要的排序

如果业务上不需要排序功能，可以直接关闭dxDataGrid的排序：

$("#yourGridId").dxDataGrid({
  // ...其他配置
  sorting: { mode: "none" },
  // 或者针对单个列关闭排序
  columns: [
    { dataField: "id", allowSorting: false },
    // ...其他列配置
  ]
});

临时方案的弊端 #

直接修改数组后调用dataSource.reload()会重新加载整个数据集，不仅会影响性能，还会丢失当前网格的状态（比如分页位置、选中的行、展开的分组等），非必要不建议使用。

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