AG Grid服务端树数据已获取但持续显示加载状态问题求助

问题概述 #

在AG Grid中实现服务端树视图时，已通过AJAX成功获取服务器返回的嵌套数据，但网格页面持续显示加载Spinner，控制台无异常报错。

服务器返回数据结构 #

{
  "IdObjectA": 1,
  "NameObjectA": "NameA",
  "ObjectB": [
    {
      "IdObjectB": 1,
      "NameObjectB": "NameB",
      "ObjectC": [
        {
          "IdObjectC": 1,
          "NameObjectC": "NameC",
          "Data": [
            { "Param1": "val1", "Param2": "val2", "Param3": "val3" }
          ]
        }
      ]
    }
  ]
}

现有代码问题分析 #

1. successCallback参数缺失 #

服务端数据源的successCallback要求传入两个参数：行数据数组和最后一行索引，仅传行数据会导致AG Grid无法判断数据是否加载完成，持续发起请求。

2. 字段映射与数据结构不匹配 #

列定义中使用ObjectB.IdObjectB这类路径，但返回数据中ObjectB是数组类型，AG Grid无法直接解析该路径；同时autoGroupColumnDef配置的Lineas.IdCelula字段在返回数据中不存在，导致分组逻辑异常。

3. 组节点判断与分组Key逻辑错误 #

• isServerSideGroup仅判断dataItem.ObjectC，未覆盖根节点（ObjectA）和ObjectB节点的组判断逻辑；
• getServerSideGroupKey中dataItem.ObjectB.ObjectC.NameC路径错误，无法从数组类型的ObjectB/ObjectC中直接访问属性。

4. 缺失子节点获取逻辑 #

服务端树视图需要明确告知AG Grid如何获取组节点的子数据，现有配置未提供getServerSideChildren函数。

修正方案 #

1. 修复getRows回调参数 #

function createServerSideDatasource() {
    return {
        rowCount: undefined,
        getRows: (params) => {
            $.ajax({
                type: "POST",
                url: "/Controller/GetAllDataFromDatabase",
                data: { filterElementsToDatabase },
                success: function (data) {
                    var rowsData = JSON.parse(data);
                    // 传入行数据和lastRow=-1表示总条数未知
                    params.successCallback(rowsData, -1);
                },
                error: function (e, ts, et) {
                    params.fail();
                }
            });
        }
    };
}

2. 调整列定义适配层级数据 #

每个层级的行数据对应不同对象，字段无需带父级路径：

const columnDefs = [
    {
        headerName: 'ObjectA名称',
        field: 'NameObjectA'
    },
    {
        headerName: 'ObjectB信息',
        children: [
            { field: 'IdObjectB', headerName: "ObjectBID", hide: true },
            { field: "NameObjectB", headerName: "ObjectB名称" },
        ]
    },
    {
        headerName: 'ObjectC信息',
        children: [
            { field: 'IdObjectC', headerName: "ObjectCID" },
            { field: "NameObjectC", headerName: "ObjectC名称" },
        ]
    },
    {
        headerName: '数据详情',
        children: [                           
            { field: 'Param1', sortable: true, headerName: "参数1" },
            { field: 'Param2', sortable: true, headerName: "参数2" },
            { field: 'Param3', sortable: true, headerName: "参数3" },
        ]
    }
];

3. 修正组节点判断与分组Key逻辑 #

gridOptions = {
    // ...其他原有配置
    rowModelType: 'serverSide',
    treeData: true,
    cacheBlockSize: 100,
    columnDefs: columnDefs,
    defaultColDef: {
        sortable: true,
        resizable: true,
        filter: true,
        floatingFilter: true,
        width: 200,
    },
    autoGroupColumnDef: {
        field: 'IdObjectA',
        headerName: '层级'
    },
    isServerSideGroup: (dataItem) => {
        // 判断当前节点是否包含子节点数组
        return !!dataItem.ObjectB || !!dataItem.ObjectC || !!dataItem.Data;
    },
    getServerSideGroupKey: (dataItem) => {
        // 根据不同层级返回唯一分组Key
        if (dataItem.IdObjectA) return dataItem.IdObjectA.toString();
        if (dataItem.IdObjectB) return dataItem.IdObjectB.toString();
        if (dataItem.IdObjectC) return dataItem.IdObjectC.toString();
        return '';
    },
    getServerSideChildren: (dataItem) => {
        // 返回当前组节点的子数据数组
        if (dataItem.ObjectB) return dataItem.ObjectB;
        if (dataItem.ObjectC) return dataItem.ObjectC;
        if (dataItem.Data) return dataItem.Data;
        return [];
    }
};

4. 其他配置优化 #

• 移除serverSideInfiniteScroll：服务端树视图与无限滚动结合时需额外配置，若为一次性加载所有数据可暂时关闭；
• 确保treeData: true配置生效，该参数是启用树视图的核心开关。

内容的提问来源于stack exchange，提问作者Nicolas Oñate