javascript - 带分页的 Ag-grid 树视图

Question

我有一个 ag-grid，它具有以下 gridOptions：

var gridOptions = {
    headerHeight: 0,
    columnDefs: columnDefs,
    defaultColDef: {
        initialFlex: 1,
        width: 240,
        resizable: true,
    },
    treeData: true,
    pagination: true,
    animateRows: true,
    rowSelection:'single',
    rowModelType: "serverSide",
    cacheBlockSize: defaultRecordsPerPage,
    paginationPageSize: defaultRecordsPerPage,
    autoGroupColumnDef: {
        headerName: "Accounts",
        cellRendererParams: {
            checkbox: true,
            suppressCount: true,
            innerRenderer: function (params) {
                // display employeeName rather than group key (employeeId)
                const entity = params.data;

                var details = `${entity.AccountName} [${entity.AccountNumber}]`;
                if(entity.IsMoneyAccount) {
                    details = `${entity.AccountName} [${entity.Currency}, ${entity.AccountNumber}]`;
                }

                return details;
            },
        },
    },
    isServerSideGroup: function (dataItem) {
        return dataItem.Children;
    },
    getServerSideGroupKey: function (dataItem) {
        return dataItem.ID;
    },
};

dataSource函数如下所示：

function createServerSideDatasource() {
    return {
        getRows: function (params) {
            var data = {
                itemsPerPage: defaultRecordsPerPage,
                page: (params.request.endRow / defaultRecordsPerPage) - 1
            };

            if (params.parentNode.data) {
                var children = params.parentNode.data.Children;
                params.successCallback(children, children.length);
            } else {
                myApi.get(data, {
                    url: "/home/accounts-tree-data",
                    success: function (response) {
                        params.successCallback(response.data, response.recordsTotal);
                    }
                });
            }
        }
    }
}

defaultRecordsPerPage设置为 2，因此我可以使用多个页面测试内容。

当我展开其中一个父母时，孩子们在第二个元素之后重复。例如：

- Parent 
-- Child1
-- Child2
-- Child1
-- Child2

我希望得到以下结果：

- Parent 
-- Child1
-- Child2
-- Child3
-- Child4

我究竟做错了什么？这种行为是预期的吗？我从我的请求中收到的数据包含他们的孩子的父母列表，我不想每次展开 Parent 元素时都发出额外的请求，这就是我检查 parentNode.data 属性的原因。

标签： javascripttreeviewag-grid