标签: ag-grid-react

我正在使用 ag-grid-react 组件，并且我希望能够更改网格中的列标题以响应 React 组件中的事件。我可以看到列 API 有一个 getDisplayNameForColumn() 函数，但我找不到等效的设置函数来允许我更改列标题。

我将网格列定义数组存储在 React 组件的状态中，并且我认为只需更新状态中的定义数组，React 框架就会自动刷新该组件，并且将显示我的新列标题；然而，这并没有发生，原始标题仍然保留。

网格初始化并显示后是否可以更改列标题？我复制了下面的 React 组件的代码。

import React, { Component } from 'react'
import { Page, Header, Title, Button, Content } from '@cdkglobal/react-jqm'
import StatusBar from '@cdkglobal/react-jqm-statusbar'
import StandardColsList from './StandardColsList'
import { AgGridReact } from 'ag-grid-react'
import { APP_TITLE } from '../constants'
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/theme-fresh.css';

export default class DatasetPage extends Component {
static propTypes = {
    onClickBack: React.PropTypes.func,
    onClickSave: React.PropTypes.func,
    dataset: React.PropTypes.array.isRequired,
    uploaditem: React.PropTypes.object.isRequired,
    stdcolumns: React.PropTypes.array
}

static …

我将 ag-grid 和 ag-grid-react 升级到 14.2.0，但我仍然收到此警告：

ag-grid：正在寻找组件[agGroupCellRenderer]，但未找到。

我的列定义：

let columnDefs = [
    {headerName: 'Name', field: 'userName', width:163, cellRenderer:'agGroupCellRenderer'},
    {headerName: 'Job Title', field: 'jobTitle', width:143},
]

我在这里缺少什么？

如何包装forwardRef 组件？

例如，在我的单元格编辑器中：

import React, {useEffect, forwardRef, useImperativeHandle, useRef} from "react";

export default forwardRef((props, ref) => {
    const inputRef = useRef();
    const { someProp } = props;
    useImperativeHandle(ref, () => {
        return {
            getValue: () => {
                return inputRef.current.value;
            }
        };
    });
    return <input type="text" ref={inputRef} someProp={someProp}/>;
})

如果我想向 HOC 公开一个变量 (someProp)，我该怎么做呢？

function someProps(WrappedComponent, someProp) {
    return (props) => <WrappedComponent {...props} someProp={someProp}/>
}

someProps(CellEditor, {propName: propValue});

每当我尝试包装forwardedRef组件时，看起来引用都没有被正确识别

我想实现一个带有名称、类型列的 AG 网格表。我想在表中再添加一列“编辑”，并允许用户编辑和删除表中的行。它看起来像这样：

我从 redux 存储中获取数据，这是我在行内实现数据的方式。

const members = useSelector(state => state.members) // Get current members 
const data = {
  columnDefs : [
{headerName: 'Name', field: 'name'}, 
{headerName: 'Type', field: 'type'},
{headerName: 'Edit', field: 'edit'}
],
  rowData: []
}

members.map((member) => {
  data.rowData.push({
    name:member.name,
    type:member.type,
    edit: '' // ?? What comes here so I can delete & edit by rows easily with buttons ?? 
  })
})

return ( 
    <div> 
    <div className="ag-theme-material">
        <AgGridReact columnDefs={data.columnDefs} rowData={data.rowData} />            
    </div>
</div>

)

我是 React-Redux …

我的控制台充斥着以下警告。不知道它是来自 ag-grid 还是来自我的代码。

Warning: flushSync was called from inside a lifecycle method. 
React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
    at RowContainerComp (http://localhost:5173/node_modules/.vite/deps/ag-grid-react.js?v=ec6922df:12931:29)
    at div
    at div
    at GridBodyComp (http://localhost:5173/node_modules/.vite/deps/ag-grid-react.js?v=ec6922df:13071:24)
    at TabGuardCompRef (http://localhost:5173/node_modules/.vite/deps/ag-grid-react.js?v=ec6922df:13291:28)
...

这是我的 React 组件。TableLayout是一个自定义组件。

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import TableLayout from "./TableLayout";
import React from "react";
import { …

我正在ag-grid尝试构建一个表,如果用户单击列值,它们将被带到包含该条目详细信息的页面.

如何在ag-grid中使单元格值可单击？

我已经尝试使用valueGetter: this.urlValueGetter与columnDefs和:

urlValueGetter(params) {
  return '<a href=\'bill/' + params.data.id + '\'>details</a>';
}

但它现在看起来像这样:

然后我尝试使用template: '<a href=\'bill/{id}\'>details</a>'哪个显示单元格文本可点击但不更换ID.我认为如果我能以某种方式传入id,这可能会有效吗？

我在我的react应用程序中使用ag-grid，无法使CSS与Webpack一起使用。

网格看起来像这样

图片：

const path = require("path");
var webpack = require("webpack");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let CopyWebpackPlugin = require("copy-webpack-plugin");
var BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
var BitBarWebpackProgressPlugin = require("bitbar-webpack-progress-plugin");
let plug = require("@babel/plugin-proposal-class-properties");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader?limit=100000"
      },
      {
        test: /\.css$/,
        use: "css-loader/locals"
      }
    ]
  },
  node: {
    fs: "empty"
  },
  context: path.join(__dirname, "Scripts", "src"),
  entry: {
    d1: "./entries/d1Page.js",
    h1: "./entries/h1Page.js",
    polyfills: …

据我了解，当filterChangedCallback被调用时，网格会过滤当前数据并调用doesFilterPass，并isFilterActive这样做。

这里我有一个使用自定义过滤器和浮动过滤器的列。浮动过滤器（一个复选框）显示正常，当我onFloatingFilterChanged在调用自定义过滤器中单击它时，会出现绿色过滤器活动图标，网格会刷新，但doesFilterPass根本不会被调用，我无法弄清楚为什么。

有一些基本的东西我没有通过自定义过滤器得到，所以如果有人能阐明这一点，我将不胜感激。

（编辑：这可能是有问题的自定义/浮动过滤器之间的相互作用。去年在 github 上发布了类似的 ag-grid-angular 问题，但没有任何结果。所以也许这是一个错误？）

定制过滤器

export default class BooleanFilter {

  init(params) {
    this.params = params;
    this.valueGetter = params.valueGetter;
    this.filterChangedCallback = params.filterChangedCallback;
    this.status = false;
  }

  onFloatingFilterChanged(status) {
    this.status = status;
    this.filterChangedCallback();
  }

  getGui() {
    return '<div />';
  }

  getModel() {
    return this.isFilterActive() ? { filterType: 'boolean', filter: this.status } : undefined;
  }

  setModel(model) {
    this.state.status = model ? model.value : '';
  }

  isFilterActive() { …

我在整个 React 应用程序中使用 AG-Grid，并且在某些情况下我希望 cellRenderer 在网格数据更改时进行更新。在以下两种情况下，cellRenderer 最初会正确加载，但在数据更改时不会更新：

1. 用户编辑可编辑单元格并更改值。
2. 服务器更新redux中的网格数据

看看这个代码和盒子

在此示例中，我使用可编辑单元重新创建了第一个用例，并使用了类组件和函数组件。将 onCellValueChanged 与 params.api.refreshCells() 一起使用，我能够更新类组件，但不能更新函数组件。

第一个问题：如何让 React 函数组件使用新的 props 重新渲染，就像在codesandbox示例中类组件重新渲染一样？

第二个问题：是否有更好的方法来更新 cellRenderer，而无需在数据更新时卸载并重新安装列中的每个单元格？

预先感谢您的帮助和指导！

...
    this.state = {
      columnDefs: [
        {
          headerName: "Editable Country",
          editable: true,
          field: "country",
          width: 200
        },
        {
          headerName: "Class Render",
          cellRendererFramework: GridCellClass,
          colId: "class-renderer",
          width: 200
        },
        {
          headerName: "Function Render",
          cellRendererFramework: GridCellFunction,
          colId: "function-renderer",
          width: 200
        }
      ],
      rowData: []
    };
  }

...

            <AgGridReact
              rowModelType="infinite"
              columnDefs={this.state.columnDefs}
              enableColResize={true}
              rowClassRules={{
                california: function(params) {
                  return params.data.country === …

因此，最近我们将 ag-grid-react 和 ag-grid-community 从 27.0.1 更新到 28.0.0，之前的工作测试现在失败了。测试尝试从行单元格获取一个值并与给定值进行比较。

测试（v.27.3.0）

describe("Simple list rendering", () => {

const handleRowDoubleClick = () => { }
const handleRowSelect = () => { }
const formDataWithId = formData.map((item, index) => {
    const newItem = checkNumberLength(item, items);
    return { ...newItem, id: index };
});
const colDefs = [{
    headerName: "test",
    valueGetter: "7"
}]

const listRender = (
    <AgGridReact
        columnDefs={colDefs}
        rowData={formDataWithId}
        rowSelection="multiple"
        suppressClickEdit={true}
        onRowClicked={handleRowSelect}
        onRowDoubleClicked={handleRowDoubleClick}
        immutableData={true}
        rowHeight={28}
    />
)


let component
let agGridReact
beforeEach((done) => {
    component …