React：Ag Grid 分页服务器端

Question

我在 React JS 中的工作中使用 AG-Grid 库。 我有 40000 个数据，我想使用分页显示（不是滚动，而是 page1、page2、page3 等等......）。

我对它完全陌生。我已使用以下链接作为参考。但它不起作用。 任何人有工作的例子？

AG Grid Sever Side Pagination

任何帮助都会很棒。 谢谢。

Answer 1

"use strict";

import React, { Component } from "react";
import { render } from "react-dom";
import { AgGridReact } from "@ag-grid-community/react";
import { AllModules } from "@ag-grid-enterprise/all-modules";
import "@ag-grid-community/all-modules/dist/styles/ag-grid.css";
import "@ag-grid-community/all-modules/dist/styles/ag-theme-balham-dark.css";

class GridExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      modules: AllModules,
      columnDefs: [
        { field: "id" },
        {
          field: "athlete",
          width: 150
        },
        { field: "age" },
        { field: "country" },
        { field: "year" },
        { field: "sport" },
        { field: "gold" },
        { field: "silver" },
        { field: "bronze" }
      ],
      defaultColDef: {
        width: 120,
        resizable: true
      },
      rowModelType: "serverSide",
      cacheBlockSize: 100,
      maxBlocksInCache: 10
    };
  }

  onGridReady = params => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    const httpRequest = new XMLHttpRequest();
    const updateData = data => {
      var idSequence = 0;
      data.forEach(function(item) {
        item.id = idSequence++;
      });
      var server = new FakeServer(data);
      var datasource = new ServerSideDatasource(server);
      params.api.setServerSideDatasource(datasource);
    };

    httpRequest.open(
      "GET",
      "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json"
    );
    httpRequest.send();
    httpRequest.onreadystatechange = () => {
      if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        updateData(JSON.parse(httpRequest.responseText));
      }
    };
  };

  render() {
    return (
      <div style={{ width: "100%", height: "100%" }}>
        <div style={{ height: "100%", paddingTop: "26px", boxSizing: "border-box" }}>
          <div
            id="myGrid"
            style={{
              height: "100%",
              width: "100%"
            }}
            className="ag-theme-balham-dark"
          >
            <AgGridReact
              modules={this.state.modules}
              columnDefs={this.state.columnDefs}
              defaultColDef={this.state.defaultColDef}
              rowModelType={this.state.rowModelType}
              cacheBlockSize={this.state.cacheBlockSize}
              maxBlocksInCache={this.state.maxBlocksInCache}
              animateRows={true}
              pagination={true}
              onGridReady={this.onGridReady}
            />
          </div>
        </div>
      </div>
    );
  }
}

function ServerSideDatasource(server) {
  return {
    getRows: function(params) {
      setTimeout(function() {
        var response = server.getResponse(params.request);
        if (response.success) {
          params.successCallback(response.rows, response.lastRow);
        } else {
          params.failCallback();
        }
      }, 500);
    }
  };
}
function FakeServer(allData) {
  return {
    getResponse: function(request) {
      console.log("asking for rows: " + request.startRow + " to " + request.endRow);
      var rowsThisPage = allData.slice(request.startRow, request.endRow);
      var lastRow = allData.length <= request.endRow ? data.length : -1;
      return {
        success: true,
        rows: rowsThisPage,
        lastRow: lastRow
      };
    }
  };
}

试试文档中提到的这几行反应代码。如果它不起作用，请分享您实现的代码以获得更准确的答案。