Question

我在React项目中集成此插件（https://www.ag-grid.com/javascript-grid-master-detail/）时遇到问题。问题在于样式：数据出现但没有任何表格或样式。

看起来像这样：

It appear this

而不是：

Instead of this

另一个例子是：

它出现了：

it appear this

而不是：

Instead of this

这是我的代码：

index.js

"use strict";

import React, { Component } from "react";
import { render } from "react-dom";
import { AgGridReact } from "ag-grid-react";




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

    this.state = {
      columnDefs: [
        {
          field: "name",
          cellRenderer: "agGroupCellRenderer"
        },
        { field: "account" },
        { field: "calls" },
        {
          field: "minutes",
          valueFormatter: "x.toLocaleString() + 'm'"
        }
      ],
      detailCellRendererParams: {
        detailGridOptions: {
          columnDefs: [
            { field: "callId" },
            { field: "direction" },
            { field: "number" },
            {
              field: "duration",
              valueFormatter: "x.toLocaleString() + 's'"
            },
            { field: "switchCode" }
          ],
          onGridReady: function(params) {
            params.api.sizeColumnsToFit();
          }
        },
        getDetailRowData: function(params) {
          params.successCallback(params.data.callRecords);
        }
      },
      onGridReady: function(params) {
        params.api.sizeColumnsToFit();
        setTimeout(function() {
          var rowCount = 0;
          params.api.forEachNode(function(node) {
            node.setExpanded(rowCount++ === 1);
          });
        }, 500);
      }
    };
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    const httpRequest = new XMLHttpRequest();
    const updateData = data => {
      params.api.setRowData(data);
    };

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

    params.api.sizeColumnsToFit();
    setTimeout(function() {
      var rowCount = 0;
      params.api.forEachNode(function(node) {
        node.setExpanded(rowCount++ === 1);
      });
    }, 500);
  }

  render() {
    return (
      <div style={{ width: "100%", height: "100%" }}>
        <div
          style={{
            boxSizing: "border-box",
            height: "50%",
            width: "50%"
          }}
          className="ag-theme-balham"
        >
          <AgGridReact
            id="myGrid"
            columnDefs={this.state.columnDefs}
            masterDetail={true}
            detailCellRendererParams={this.state.detailCellRendererParams}
            onGridReady={this.state.onGridReady}
            onGridReady={this.onGridReady.bind(this)}
          />
        </div>
      </div>
    );
  }
}
render(<GridExample />, document.querySelector("#root"));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ag-Grid React Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style> html, body, #root { margin: 0; padding: 0; height: 100%; } </style>
</head>
<body>
    <div id="root">Loading ag-Grid React example&hellip;</div>

    <script>
        var appLocation = '';
        var boilerplatePath = '';
        var systemJsMap = {"ag-grid":"https:\/\/unpkg.com\/ag-grid@17.0.0\/dist\/ag-grid.js","ag-grid\/main":"https:\/\/unpkg.com\/ag-grid@17.0.0\/dist\/ag-grid.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@17.0.0\/","ag-grid-react":"npm:ag-grid-react@17.0.0\/","ag-grid-angular":"npm:ag-grid-angular@17.0.0\/","ag-grid-vue":"npm:ag-grid-vue@17.0.0\/"}    </script>

    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>

</body>
</html>

Answer 1

您是否将ag-grid-react和相同版本的package.json一起添加到ag-grid中？

还导入ag-grid CSS，如下所示：

import "ag-grid/dist/styles/ag-grid.css";

如何在我的React项目中集成Ag网格（React组件）？

1 个答案: