标签: ag-grid-react

我已经搜索了一段时间,但没有看到任何真实的例子.

我正在使用ag-grid-react,我想要一个包含布尔值的列来表示带有复选框的布尔值,并在更改时更新rowData中的对象.

我知道有checkboxSelection,我试着像我下面的那样使用它,但实现了它是一个复选框,它没有链接到数据,只是用于选择一个单元格.

var columnDefs = [
        { headerName: 'Refunded', field: 'refunded', checkboxSelection: true,}
  ]

那么有没有办法用ag-grid和ag-grid-react做我正在寻找的东西？

晚安，我正在与 ag-grid 合作开发一个 React 项目。我创建了一个用户可以启用列可见性的组件，到目前为止一切顺利，运行完美。但是，当运行函数设置所有列的可见性时，会出现标题中提到的错误。执行此操作的函数如下。但另一点是，只有在启用了reactUi={true}时才会发生这种情况，如果禁用它则可以正常工作。

 const handleOnChange = (e, i) => {
    var columnApi = props.columnApi;
    columnApi.setColumnVisible(e.target.value, e.target.checked);
  };

  const handleAllChange = (e) => {
    var columnApi = props.columnApi;
    for (let index = 0; index < columns.length; index++) {
      columnApi.setColumnVisible(columns[index].colId, e.target.checked);
    }
  };

我正在 ag-grid 上寻找滚动事件，我想知道滚动何时到达末尾并加载下一组行，我知道如果您设置无限滚动模式，那么 ag-grid 会调用 getRows 方法，但在我的应用程序没有立即获得下一组行，我调用服务器，服务器向客户端发送一条单独的消息，其中包含新的行集

我想使用react-select作为ag-grid的自定义单元格编辑器

这是代码沙箱链接

您可以在此处下载源代码

npm install
npm start

我已经删除了所有的css，因此看起来很普通，但是仍然可以完成工作。

这是我的package.json

{
  "name": "Test",
  "version": "1.5.0",
  "private": true,
  "dependencies": {
    "react": "16.8.1",
    "react-dom": "16.8.1",
    "react-select": "^2.4.1",
    "react-scripts": "2.1.5",
    "ag-grid-community": "20.1.0",
    "ag-grid-react": "20.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "npm run build",
    "lint:check": "eslint . --ext=js,jsx;  exit 0",
    "lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" …

我正在使用 ag-grid，我希望列宽根据网格内容是动态的，我通过使用以下方法来实现：

const onGridReady = params => {
    params.columnApi.autoSizeAllColumns();
};

但网格的宽度是固定的，我在网格的一侧有一个空间。（我也不能将宽度发送到网格，因为我不知道内容的大小是多少）我需要的是如何组合 autoSizeAllColumns 和 sizeColumnsToFit 函数。

React 和 ag-grid 的新功能。我正在尝试在我的反应项目中实现一个简单的 ag-grid 示例。当我运行该项目时，网格不显示。没有控制台警告，只是网格不显示。

import React from 'react';
import {AgGridReact} from 'ag-grid-react';
import '../../node_modules/ag-grid/dist/styles/ag-grid.css';
import '../../node_modules/ag-grid/dist/styles/theme-material.css';

var headers =  [{headerName: 'Name', field: 'name', width: 150, filter: 'text'},
                {headerName: 'Last', field: 'last', width: 150, filter: 'text'}]

var data = [{name: 'bob', last:'dude'},
            {name: 'will', last:'willdude'}]


export default class Accounts extends React.Component {
  constructor() {
    super();
    this.state = {
        showGrid: true,
        columnDefs: headers,
        rowData: data,
    };
  }
  onGridReady(params) {
      this.api = params.api;
      this.columnApi = params.columnApi;
  }

  render() {
    var gridTemplate; …

我正在搞乱ag-grid,react-apollo,一切似乎都运转正常.这里的目标是单击一个复选框,并在修改某些数据时发生变异/网络请求.我遇到的问题是它重绘整行,这可能非常慢但我真的只是想更新单元本身,所以它的快速和用户体验更好.我有一个想法是做一个乐观的更新,只是更新我的缓存/利用我的缓存.你们采取了什么方法.

通过apollo查询抓取列和行数据.

下面是一些代码:

CheckboxRenderer

import React, { Component } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import _ from "lodash";

class CheckboxItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: false
    };
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
  }

  componentDidMount() {
    this.setDefaultState();
  }

  setDefaultState() {
    const { data, colDef, api } = this.props;
    const { externalData } = api;
    if (externalData && externalData.length > 0) {
      if (_.find(data.roles, _.matchesProperty("name", colDef.headerName))) {
        this.setState({
          value: true
        });
      }
    }
  }

  updateGridAssociation(checked) {
    const { …

我已经使用 Ag-Grid 的企业功能“ agSetColumnFilter ”几个月了，没有出现任何问题。

我正在使用以下版本：

    "ag-grid": "^17.1.1",
    "ag-grid-enterprise": "^17.1.1",
    "ag-grid-react": "^17.1.0",

经过一些重构后，只需单击过滤器菜单后，我就开始收到此错误：

ag-grid: Looking for component [agSetColumnFilter] but it wasn't found.
Array.concat.ComponentProvider.retrieve @ componentProvider.js?6ebb:209
Array.concat.ComponentResolver.resolveByName @ componentResolver.js?1587:159
Array.concat.ComponentResolver.getComponentToUse @ componentResolver.js?1587:155
Array.concat.ComponentResolver.newAgGridComponent @ componentResolver.js?1587:271
Array.concat.ComponentResolver.createAgGridComponent @ componentResolver.js?1587:236
Array.concat.FilterManager.createFilterInstance @ filterManager.js?d1c0:376
Array.concat.FilterManager.createFilterWrapper @ filterManager.js?d1c0:393
Array.concat.FilterManager.getOrCreateFilterWrapper @ filterManager.js?d1c0:343
Array.concat.StandardMenuFactory.showPopup @ standardMenu.js?505d:52
Array.concat.StandardMenuFactory.showMenuAfterButtonClick @ standardMenu.js?505d:45
Array.concat.HeaderComp.showMenu @ headerComp.js?f669:122
(anonymous) @ headerComp.js?f669:107
componentResolver.js?1587:274 Error creating component filter=>agTextColumnFilter
Array.concat.ComponentResolver.newAgGridComponent @ componentResolver.js?1587:274
Array.concat.ComponentResolver.createAgGridComponent @ componentResolver.js?1587:236
Array.concat.FilterManager.createFilterInstance @ filterManager.js?d1c0:376
Array.concat.FilterManager.createFilterWrapper @ filterManager.js?d1c0:393
Array.concat.FilterManager.getOrCreateFilterWrapper @ filterManager.js?d1c0:343
Array.concat.StandardMenuFactory.showPopup @ …

我按照此示例进行操作，发现该表花费了很多时间来呈现工具提示。似乎没有任何延迟，我尝试了defaultBrowserTooltip和自定义工具，但是它们都很慢。有任何提示吗？

P / S：我正在使用React

我尝试过的某种方式：

tooltipField: 'myTooltipField'

tooltip: (value: string): string => value

我正在尝试将isRowSelectable其作为 prop 动态传递给AgGridReact. 在下面的玩具示例中，您希望单击“切换条件”按钮将更改网格中具有复选框的项目集。相反，网格没有改变。

截图：

interface Item { name: string, age: number, height: number}
const data: Item[] = [
    {name: "old and tall", age: 80, height: 80}, 
    {name: "old and short", age: 80, height: 20},
    {name: "young and tall", age: 10, height: 80}, 
    {name: "young and short", age: 10, height: 20}, 
]
const colDefs: ColDef[] = [
    {
        headerName: "",
        checkboxSelection: true,
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
        width: 60,
        sortable: false
    },
    { field: "name"},
    { field: …