Ag-Grid存储分页数据

基础概念

Ag-Grid 是一个高性能的 JavaScript 数据网格，广泛应用于前端开发中，用于展示和操作大量结构化数据。它支持各种功能，包括分页、排序、过滤、编辑等。

类型

Ag-Grid 提供了多种类型的数据存储方式：

Client-Side Row Model：数据存储在客户端，适用于数据量较小的情况。
Server-Side Row Model：数据存储在服务器端，适用于大数据量的情况，通过分页、排序、过滤等操作从服务器获取数据。

应用场景

Ag-Grid 适用于各种需要展示和操作大量数据的场景，例如：

企业级应用的数据表格
数据分析平台
电子商务网站的产品列表
金融应用的交易记录

存储分页数据

1. 客户端存储分页数据

客户端存储分页数据时，所有数据一次性加载到客户端，然后通过 Ag-Grid 的分页功能进行展示。

const gridOptions = {
    columnDefs: [
        { headerName: 'ID', field: 'id' },
        { headerName: 'Name', field: 'name' },
        // 其他列定义
    ],
    rowModelType: 'infinite',
    cacheBlockSize: 100,
    maxBlocksInCache: 10,
    datasource: {
        getRows: (params) => {
            const request = {
                startRow: params.startRow,
                endRow: params.endRow
            };
            fetch('/api/data', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(request)
            })
            .then(response => response.json())
            .then(data => {
                params.successCallback(data.rows, data.lastRow);
            })
            .catch(error => {
                params.failCallback();
            });
        }
    }
};

new agGrid.Grid(document.getElementById('myGrid'), gridOptions);

2. 服务器端存储分页数据

服务器端存储分页数据时，每次分页操作都会从服务器获取相应的数据。

const gridOptions = {
    columnDefs: [
        { headerName: 'ID', field: 'id' },
        { headerName: 'Name', field: 'name' },
        // 其他列定义
    ],
    rowModelType: 'serverSide',
    pagination: true,
    pageSize: 10,
    serverSideDatasource: {
        getRows: (params) => {
            const request = {
                startRow: params.startRow,
                endRow: params.endRow,
                sortModel: params.sortModel,
                filterModel: params.filterModel
            };
            fetch('/api/data', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(request)
            })
            .then(response => response.json())
            .then(data => {
                params.successCallback(data.rows, data.lastRow);
            })
            .catch(error => {
                params.failCallback();
            });
        }
    }
};

new agGrid.Grid(document.getElementById('myGrid'), gridOptions);