AG-Grid分组行表头折叠后出现空白行及残留子行问题求助

问题现象 #

使用Vue3 + AG Grid服务端分组模式时，折叠作为分组行表头的行，子行虽消失，但表头未恢复，出现空白行且首条子行残留，其余分组功能正常。

前端Vue3代码（服务端数据源配置） #

datasource = {
    getRows: async (params) => {
        const pageNumber = Math.floor(params.request.startRow / pageSize.value) + 1;
        const sortingModel = params.request.sortModel;
        const filterModel = params.request.filterModel;
        const rowGroupCols = params.request.rowGroupCols;
        const groupKeys = params.request.groupKeys;
        const valueCols = params.request.valueCols;

        console.log(params.request)

        const url = new URL(`http://127.0.0.1:8000/api/${table}`);
        url.searchParams.append('page', pageNumber);
        if (sortingModel.length > 0) {
            url.searchParams.append('sort', sortingModel[0].colId);
            url.searchParams.append('direction', sortingModel[0].sort);
        }

        url.searchParams.append('filterModel', JSON.stringify(filterModel));
        url.searchParams.append('rowGroupCols', JSON.stringify(rowGroupCols));
        url.searchParams.append('groupKeys', JSON.stringify(groupKeys));
        url.searchParams.append('valueCols', JSON.stringify(valueCols));

        console.log(url.search);

        await fetch(url)
            .then(resp => resp.json())
            .then(data => {
                console.log("data ", data.data)
                params.success({rowData: data.data, lastRow: data.total})
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                params.fail();
            });
    },
};

params.api.setGridOption('serverSideDatasource', datasource);

后端Laravel控制器代码（分组查询逻辑） #

if ($request->has('rowGroupCols') && !count($groupKeys)) {
    foreach ($rowGroupCols as $col) {
        $query->select(DB::raw('DISTINCT '.$col['field']), DB::raw('MIN(id) AS id'))
        ->groupBy($col['field']);
    }
}
if ($request->has('groupKeys')) {
    foreach ($groupKeys as $index => $key) {
        $columnName = $rowGroupCols[$index]['field'];
        $query->where($columnName, $key);
    }
}

问题截图 #

解决方案 #

1. 修复后端分组查询逻辑（核心问题） #

当前后端处理顶层分组（groupKeys为空）的代码存在逻辑错误：循环中每次调用select()会覆盖之前的查询字段，导致返回的分组数据结构不符合AG Grid预期。

修改后的代码：

if ($request->has('rowGroupCols') && !count($groupKeys)) {
    // 提取所有分组字段
    $groupFields = collect($rowGroupCols)->pluck('field')->toArray();
    // 构建查询字段：所有分组列 + 唯一标识ID
    $selectFields = array_merge(
        $groupFields,
        [DB::raw('MIN(id) AS id')]
    );
    // 统一设置select和groupBy，避免循环覆盖
    $query->select($selectFields)->groupBy($groupFields);
}
if ($request->has('groupKeys')) {
    foreach ($groupKeys as $index => $key) {
        $columnName = $rowGroupCols[$index]['field'];
        $query->where($columnName, $key);
    }
}

2. 前端配置与数据验证 #

• 确认AG Grid启用了服务端模式：确保grid配置中serverSide: true，且rowGroupCols设置正确。
• 检查折叠时的请求参数：折叠分组时，控制台输出的params.request.groupKeys应为空数组，后端需返回纯顶层分组数据，不可混入子行。
• 强制刷新数据源：若修复后仍有残留，可调用params.api.refreshServerSideStore({ purge: true })清除缓存数据。

内容的提问来源于stack exchange，提问作者הינדה הרשטיק