React中Ag Grid如何将字段名映射为其他名称用于排序请求？

Ag Grid本身不支持你设想的map配置项，要实现点击排序时将stockStatus映射为stockStatusSort传给后端，只需要在构建请求载荷阶段做字段转换即可，具体实现分两种场景：

场景1：使用服务端行模型（Server-Side Row Model） #

这是Ag Grid官方推荐的后端分页/排序方案，操作步骤如下：

1. 先定义字段映射规则：

const sortFieldMap = {
  stockStatus: 'stockStatusSort'
};

2. 在GridOptions中开启服务端排序，并重写请求构建方法：

const gridOptions = {
  serverSideSorting: true,
  // 自定义服务端请求内容
  getServerSideRequest: (params) => {
    const originalRequest = params.request;
    // 转换排序字段
    if (originalRequest.sortModel?.length) {
      originalRequest.sortModel = originalRequest.sortModel.map(sortItem => ({
        property: sortFieldMap[sortItem.colId] || sortItem.colId,
        direction: sortItem.sort
      }));
    }
    return originalRequest;
  },
  // 其他网格配置...
};

3. 列定义保持原有配置，确保开启排序：

const COL_STOCK_STATUS = {
  headerName: "Status",
  field: "stockStatus",
  sortable: true
};

场景2：手动处理排序请求（客户端行模型） #

如果是自己维护数据、手动触发后端请求，可通过监听排序变化事件实现：

1. 同样先定义字段映射规则：

const sortFieldMap = {
  stockStatus: 'stockStatusSort'
};

2. 在GridOptions中监听sortChanged事件，转换字段后发请求：

const gridOptions = {
  onSortChanged: (params) => {
    // 获取当前排序模型
    const sortModel = params.api.getSortModel();
    // 转换排序字段为后端需要的名称
    const transformedSort = sortModel.map(item => ({
      property: sortFieldMap[item.colId] || item.colId,
      direction: item.sort
    }));
    // 发送请求到后端
    fetch('/your-backend-api', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        property: transformedSort[0]?.property,
        direction: transformedSort[0]?.direction
      })
    }).then(res => res.json()).then(data => {
      // 更新网格数据
      params.api.setRowData(data);
    });
  },
  // 其他网格配置...
};

3. 列定义无需修改，确保开启sortable: true即可。

这样处理后，点击Status列的排序箭头时，UI会自动将字段转换为stockStatusSort，生成符合要求的请求载荷发送给后端。

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