1

我是新来的反应，所以如果这是基本的，我很抱歉。我正在尝试通过使用在全宽行内呈现的表格来模拟没有企业功能的 AgGrid 中的分组，当我双击一行以“展开它”时，这工作正常。我遇到的问题是在插入新行时，我需要一个状态变量来确定使用新插入的“应该扩展哪一行”。（因为它上方的扩展行会引发索引）。

一旦我在 useEffect 中初始化这个索引状态变量，双击扩展 onCellDoubleClicked={ExpandRow}功能停止工作，返回

:×
TypeError: gridOptions.paginationSetPageSize is not a function

尽管我可以在此之前使用它，但在此先感谢您和抱歉，感谢所有建设性的批评。

import React, { useState, useEffect } from "react";
import FullWidthCellRenderer from "../AGGrid/FullWidthCellRenderer";

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

function Dashboard() {
  // const [gridApi, setGridApi] = useState();
  // const [columnApi, setcolumnApi] = useState();
  //let [pageSize, setPageSize] = useState(10);

  let [expandedRow, setExpandedRow] = useState(0);
  let [expandingRow, setExpandingRow] = useState(0);
  let [rowInsertIncr, setRowInsertIncr] = useState(0);

  useEffect(() => {
    console.log(
      "expanding row is: " +
        expandingRow +
        ", and expaded row is: " +
        expandedRow
    );
    if (expandingRow > expandedRow) {
      setRowInsertIncr(1);
      console.log("TestLog:expanding row is more than the expanded one, setting incr to:" + rowInsertIncr);
    } else {
      setRowInsertIncr(2);
      console.log("TestLog:expanding row is more than the expanded one, setting incr to:" + rowInsertIncr);
    }
    setExpandedRow(expandingRow);
  }, [expandingRow]);

  const [columnDefs, setColumnDefs] = useState([
    ColumnsHere
  ]);
  const [rowData, setRowData] = useState([
    RowsHere
  ]);

  var gridOptions = {
    isFullWidthCell: function (rowNode) {
      return isFullWidth(rowNode.data);
    },
    frameworkComponents: {
      fullWidthCellRenderer: FullWidthCellRenderer,
    },
    fullWidthCellRenderer: "fullWidthCellRenderer",
    getRowHeight: function (params) {
      return isFullWidth(params.data) ? 150 : 25;
    },
  };

  function isFullWidth(data) {
    return ["false"].indexOf(data.collapsed) >= 0;
  }

  function getSelectedRowData() {
    const selectedNodes = gridOptions.getSelectedNodes();
    const selectedData = selectedNodes.map((node) => node.data);
    return selectedData;
  }

  function getSelectedRowIndex() {
    //This function should get the cell that is double clicked on and return an integer. 
  // return gridOptions.getFocusedCell().rowIndex;  -> this also does not work even though it returns an integer
  return (expandingRow +1);    //using this instead
  }

  function DoubleClicked() {
    console.log("setting Expanding row to: " + getSelectedRowIndex());
    setExpandingRow(getSelectedRowIndex());
  }

  function ExpandSelectedRow() {
    var ExpandedRowData = [
      {
        collapsed: "false",
      },
    ];
    var increment = 1;

    gridOptions.applyTransaction({
      add: ExpandedRowData,
      addIndex: gridOptions.getFocusedCell().rowIndex + increment,
    });

    IncrPage();
  }

  function ExpandRow() {
    console.log("redrawingRows");
    DecrPage();
    RedrawRows();
    IncrPage();
    console.log("expanding row");
    ExpandSelectedRow();
  }

  function RedrawRows() {
    gridOptions.paginationSetPageSize(Number(10));
    console.log({ rowData });
    gridOptions.setRowData(rowData);
    gridOptions.refreshCells();
    gridOptions.redrawRows();
  }

  function onGridReady(params) {
    gridOptions = params.api;
    gridOptions.columnApi = params.columnApi;
    params.api.sizeColumnsToFit();
  }

  function IncrPage() {
    gridOptions.paginationSetPageSize(Number(11));
  }

  function DecrPage() {
    gridOptions.paginationSetPageSize(Number(10));
  }

  return (
    <div className="ag-theme-balham" style={{ height: "450px", width: "98%" }}>
      <br></br>
      <h1>Home</h1>
      <hr></hr>
      <AgGridReact
        pagination={true}
        paginationPageSize={10}
        columnDefs={columnDefs}
        rowData={rowData}
        rowSelection="single"
        onGridReady={onGridReady}
        isFullWidthCell={gridOptions.isFullWidthCell}
        frameworkComponents={gridOptions.frameworkComponents}
        fullWidthCellRenderer={gridOptions.fullWidthCellRenderer}
        getRowHeight={gridOptions.getRowHeight}
        onCellDoubleClicked={ExpandRow}
      ></AgGridReact>

      <h3>TestingButtons</h3>
      <button onClick={DecrPage}>decr</button>
      <button onClick={IncrPage}>incr</button>
      <button onClick={ExpandSelectedRow}>expand</button>
      <button onClick={RedrawRows}>redraw</button>
      <button onClick={DoubleClicked}>onDoubleClick</button>
    </div>
  );
}

export default Dashboard;
4

1 回答 1

0

我在 gridOptions 对象的 paginationSetPageSize 属性中看不到

var gridOptions = {
    isFullWidthCell: function (rowNode) {
      return isFullWidth(rowNode.data);
    },
    frameworkComponents: {
      fullWidthCellRenderer: FullWidthCellRenderer,
    },
    fullWidthCellRenderer: "fullWidthCellRenderer",
    getRowHeight: function (params) {
      return isFullWidth(params.data) ? 150 : 25;
    },
  };
于 2020-09-30T12:45:18.820 回答