有问题地选择网格的行

Question

我有一个农业网格，其中有大约100000行。用户可以使用ctrl +单击来选择/取消选择网格中的多行。选择应该像这样工作-当用户选择其ID（网格的列之一）等于X的任何行时，网格应自动选择其ID等于X的所有行。有什么办法可以编码这种行为？预先感谢。

Answer 1

示例代码：

import React, { Component } from "react";
import ReactDOM from "react-dom";

import { AgGridReact } from "ag-grid-react";
import "ag-grid/dist/styles/ag-grid.css";
import "ag-grid/dist/styles/ag-theme-balham.css";

import "./styles.css";
import { LargeTextCellEditor } from "ag-grid";

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

    this.isBusy = false;
    this.state = {
      columnDefs: [
        {
          headerName: "Athlete",
          field: "athlete",
          width: 150,
          suppressSizeToFit: true
        },
        {
          headerName: "Age",
          field: "age",
          width: 90,
          minWidth: 50,
          maxWidth: 100
        },
        {
          headerName: "Country",
          field: "country",
          width: 120
        },
        {
          headerName: "Year",
          field: "year",
          width: 90
        },
        {
          headerName: "Date",
          field: "date",
          width: 110
        },
        {
          headerName: "Sport",
          field: "sport",
          width: 110
        },
        {
          headerName: "Gold",
          field: "gold",
          width: 100
        },
        {
          headerName: "Silver",
          field: "silver",
          width: 100
        },
        {
          headerName: "Bronze",
          field: "bronze",
          width: 100
        },
        {
          headerName: "Total",
          field: "total",
          width: 100
        }
      ],
      rowData: []
    };
  }

  _fetchData(cb) {
    const httpRequest = new XMLHttpRequest();
    const updateData = data => {
      // this.setState({ rowData: data });
      cb(data);
    };

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

  onGridReady(params) {
    //console.log(params);
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    var that = this;
    params.api.setDatasource({
      getRows(params) {
        //console.log("getRows", params);
        that._fetchData(data => params.successCallback(data));
      }
    });
  }

  //------------------------------------------------
  // you need this section
  onRowClicked(e) {
    this.gridApi.forEachNode(function(node) {
      console.log(node.data.age);
      node.setSelected(node.data.age === e.data.age);
    });
  }

  render() {
    return (
      <div style={{ width: "100%", height: "100%" }}>
        <div class="grid-wrapper">
          <div
            id="myGrid"
            style={{
              boxSizing: "border-box",
              height: "100%",
              width: "100%"
            }}
            className="ag-theme-balham"
          >
            <AgGridReact
              rowModelType="infinite"
              columnDefs={this.state.columnDefs}
              enableColResize={true}
              onGridReady={this.onGridReady.bind(this)}
              rowData={this.state.rowData}
              onRowClicked={this.onRowClicked.bind(this)}
              rowSelection={"multiple"}
            />
          </div>
        </div>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      columnDefs: [
        { headerName: "Make", field: "make" },
        { headerName: "Model", field: "model" },
        { headerName: "Price", field: "price" }
      ],
      rowData: [
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxter", price: 72000 }
      ]
    };
  }

  render() {
    return (
      <div
        className="ag-theme-balham"
        style={{
          height: "500px",
          width: "600px"
        }}
      >
        <GridExample />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);