时间戳

首页 > 解决方案 > 从服务器获取 rowData 时使用 valueGetter 的 Ag-grid React 列移动

javascript - 从服务器获取 rowData 时使用 valueGetter 的 Ag-grid React 列移动

问题描述

每当我从任何服务器获取数据以将其显示在 ag-grid 中时，ag-grid 不会维护使用 valueGetter 选择值并将该列自动放在末尾的列的列顺序。

该问题在以下代码沙箱链接中复制： https ://codesandbox.io/s/ag-grid-column-ordering-bug-bz055 作为最小可重现示例

从服务器接收到的数据格式如下

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },

代码中的表格想要按以下顺序显示仅有的 4 列：

  1. 姓名
  2. 公司名称
  3. 电子邮件
  4. 电话

但是，正如您在 CodeSandbox 链接中看到的那样，当company name在列定义中使用 valueGetter 检索值时，它会自动显示company name为最后一列。

如何解决这个问题？任何帮助将不胜感激？

注意：我可以调用 ag-grid gridApi 或 columnApi 来重置 onGridReady 中的列，这修复了它，但它看起来像一个 hack。有没有更好的方法来实现这一点

标签： javascriptreactjsag-gridag-grid-react

解决方案

由于该列没有field提供，我建议提供 afield或colID给该列。这将是最简单的方法，无需使用任何 API 调用来移动列：

    {
      // use either or both
      colId: "companyName",
      // field: "comapnyName",
      headerName: "Company Name",
      valueGetter: (params) => {
        return params.data.company?.name;
      }
    }

我已经分叉了你的例子，展示了这个：https ://codesandbox.io/s/ag-grid-column-ordering-bug-forked-62ph3?file=/src/App.js

推荐阅读