如何使用React和TypeScript创建一个ag-Grid单元格编辑器？
React是一个用于构建用户界面的JavaScript库，而TypeScript是一种由Microsoft开发的类型化的JavaScript超集。ag-Grid是一个用于构建数据网格的开源JavaScript库。
要使用React和TypeScript创建一个ag-Grid单元格编辑器，可以按照以下步骤进行操作：
- 首先，确保已经在项目中安装了React和TypeScript的依赖。可以使用以下命令进行安装：
- 首先，确保已经在项目中安装了React和TypeScript的依赖。可以使用以下命令进行安装：
- 接下来，安装ag-Grid的依赖。可以使用以下命令进行安装：
- 接下来，安装ag-Grid的依赖。可以使用以下命令进行安装：
- 创建一个React组件来作为ag-Grid单元格编辑器的基础。可以使用以下代码创建一个简单的编辑器组件：
- 创建一个React组件来作为ag-Grid单元格编辑器的基础。可以使用以下代码创建一个简单的编辑器组件：
- 这个编辑器组件接收一个
value属性表示当前单元格的值，并通过onValueChange回调函数来更新单元格的值。在这个例子中，我们使用了一个简单的文本输入框作为编辑器。 - 使用ag-Grid的
frameworkComponents配置选项注册这个编辑器组件。可以在ag-Grid的网格组件中添加以下代码： - 使用ag-Grid的
frameworkComponents配置选项注册这个编辑器组件。可以在ag-Grid的网格组件中添加以下代码： - 在这个例子中，我们将
MyCellEditor注册为名为myCellEditor的编辑器组件。然后在列定义中使用cellEditor: 'myCellEditor'来指定使用这个编辑器。 - 最后，使用这个网格组件来渲染和展示ag-Grid。可以在应用的根组件中添加以下代码：
- 最后，使用这个网格组件来渲染和展示ag-Grid。可以在应用的根组件中添加以下代码：
- 这个例子中，我们在应用的根组件中使用了
GridComponent来展示包含ag-Grid的界面。
这样，我们就创建了一个使用React和TypeScript的ag-Grid单元格编辑器。用户可以在单元格中编辑文本，并将新值保存到数据模型中。
对于更多关于React、TypeScript和ag-Grid的详细信息，请参考以下链接：
- React官方文档：https://reactjs.org/
- TypeScript官方文档：https://www.typescriptlang.org/
- ag-Grid官方文档：https://www.ag-grid.com/
相关·内容
1回答
如果将ag-grid与自定义标题组件和自定义单元格渲染器一起使用，则会有一个巨大的滚动性能问题。我们尝试了大约10000行x 10000列。在没有自定义渲染器的情况下，它可以平滑地运行。自定义单元格渲染器导致整体性能问题，并且仅应用自定义标题会导致水平滚动问题(垂直滚动就可以了)。我们使用的是ag-grid-react。如果使用其他框架组件而不是默认组件，使用ag-grid有什么问题吗？
浏览 14提问于2020-07-07得票数 0
我对ag-grid是个新手。
我们使用的是ag-grid Angular版本。我们所有的单元格在网格中都是可编辑的，大约有3000多个单元格。
对于网格和每个单元格的表单控件都有一个角度表单，这似乎会使网格速度变慢。特别是在加载时生成所有表单控件时，以及在所有表单控件的有效性都更新后提交表单之前。
有没有人找到更好的方法来使用Angular执行ag-grid单元格验证？
谢谢你的帮助。
浏览 30提问于2018-12-13得票数 1
我是react/ Material - UI /ag-grid的新手，我希望使用ag-grid/react添加一个Material UI组件作为单元格编辑器(通过弹出窗口)。 我在我的组件文件中使用了以下标准行： export default withStyles(styles)(ControlledOpenSelect). 这产生了一个似乎破坏了ag的更高阶分量。我仔细阅读了有关使用高阶组件here的ag-grid的文档，但对如何以兼容的方式使用forwardRefs和withStyles函数与ag-grid感到有点困惑。举个例子会很有帮助。
浏览 5提问于2019-01-18得票数 0
1回答
我刚接触Ag-grid(React版本)，在使用Ag-Grid渲染一个单元格中的多行时遇到了一个问题。 这是我们在React Table中做的事情，但我们想在Ag-grid React版本中做同样的事情。 ? 有人知道我该怎么做吗？ 我真的很感谢你的帮助。
浏览 201提问于2020-11-04得票数 1
1回答
我正在使用ag-网格在一个反应应用程序。我们有很重的任务表有定制的单元格。当使用自定义单元格呈现器作为React组件时，会出现性能问题，这是最直观的讨论。
ag-grid文档指出，这可能不是一个好主意：
不要为单元渲染器使用框架(如角度或反应)。网格呈现是高度定制的，普通的JavaScript单元呈现器将比框架等价物工作得更快。
但是它也表明普通的JS可以与React这样的框架一起使用：
仍然可以使用ag-Grid的框架版本(例如设置ag-Grid属性等)，但是由于创建和销毁了太多的单元格，框架添加的附加层无助于性能，如果您有性能问题，应该提供该层。
我是不是曲解了这个？在我看
浏览 0提问于2018-04-12得票数 9
在react AG-grid特征范围选择上工作，我正在尝试获得所选单元格的总和。我可以得到所选单元格的总和，因为我不能从相同的单元格中获得货币符号。AG-grid是否提供了任何功能来获取货币符号。
浏览 21提问于2021-01-28得票数 0
回答已采纳
2回答
日历在ag网格单元格中弹出。
、、、、
我使用ag网格来显示列的列表。其中一列包含日期部分。
用户应该能够编辑行并使用日历来选择特定的日期。一旦选定日期，它将在单元格中得到更新。
你知道怎样才能做到吗？
根据Ag-grid，我们必须使用cellEditor而不是cellRenderer来编辑单元格，并在每个单元格上显示日历以选择日期。
他们给出了几个例子，说明我们如何使用Celleditor。请让我知道如何为“日期”栏中的每个单元格使用日历。
浏览 2提问于2016-06-23得票数 2
回答已采纳
我正在与TypeScript一起使用ag-Grid，并试图在我的列定义中创建异步。
const columnDefs: ColDef[] = [
{
headerName: 'Name',
field: 'name',
editable: true,
valueSetter: async (params: ValueSetterParams): Promise<boolean> => {
return await doSomething(params); // Will return the ch
浏览 6提问于2020-01-09得票数 12
我为我的实现创建了一个代码框。
在更改日期之后，我还不太清楚如何在ag网格中设置值。
见示例
import React, {
forwardRef,
useImperativeHandle,
useState,
useRef
} from "react";
// https://www.ag-grid.com/react-grid/cell-editing/
// https://www.ag-grid.com/react-grid/component-date/
export const DateEditor = forwardRef((props, re
浏览 3提问于2021-08-24得票数 0
回答已采纳
我不明白为什么monaco editor不能处理typescript文件。 下面是我传递给编辑器的源代码： import React from 'react';
import styles from './Test.scss';
export const Test = (foo: number) => {
return (
<div className={styles.container}>Test</div>
);
} 和选项： 语言= typescript + monaco.languages
浏览 162提问于2021-09-16得票数 0
我正在尝试让屏幕阅读器和只使用键盘的用户能够访问ag-grid中的单元格的交互内容。 在ag-grid中是否有一种配置设置或技术，允许只使用键盘导航与单元格中的按钮和链接进行交互？标题和筛选器允许cells + RETURN键更改内容的焦点，但不能更改正文单元格的焦点。 我已经在Plnkr上创建了一个示例网格，其中的列既有链接又有按钮。任何提示或建议都会很棒！ 我们使用ag-grid-community 25.1.0和ag-grid-react 25.1.0。 https://plnkr.co/edit/8qDxw4GYnqdvjtAU id="myGrid" styl
浏览 92提问于2021-04-30得票数 0
我使用的是Angular 4.4.7和typescript 2.3的ag-grid 11。当我将焦点放在网格单元格中的输入框上，并且在html表格中使用tab键将焦点移动到下一个网格单元格时，光标将移动到地址栏，而不是移动到下一个输入框。
如果有人遇到了同样的问题并有解决方案，请让我知道。
谢谢。
浏览 0提问于2018-09-17得票数 0
1回答
有没有人升级他们的ag-grid安装到React 16，也就是光纤？我升级到react@next和react-dom@next，立即得到了一个致命的错误。我的工具紧密基于ag-grid-react-example，问题似乎出在单元格编辑器上。有谁见过类似的东西吗？
浏览 0提问于2017-09-12得票数 1
我正在使用ag-grid构建react应用程序，我在尝试弄清楚如何在单元格中放置链接以及在REST api响应中获取链接数据时遇到了问题。有人能帮我解决这个问题吗？谢谢
浏览 27提问于2019-03-29得票数 0
2回答
现在我已经使用了ag-Grid，它可以为每个数据单元格创建自定义渲染器，但它是必需的Html元素
例如，它们是可以通过调用document.createElement()创建的元素。
但是为了方便起见，我想使用React元素作为自定义渲染器。
不确定我能不能做到？
浏览 6提问于2016-07-06得票数 8
我想在单元格编辑器中使用React组件，但是这个单元格的高度有限，不允许看到整个组件。
你对此有什么解决方案吗？Ag-grid应该在渲染react组件时设置正确的高度。
浏览 11提问于2018-08-03得票数 1
回答已采纳
1回答
我已经用reactjs和typescript创建了ag-grid，它工作得很好。但是在我的一列中，它是日期字段的类型，在valueFormatter和moment的帮助下，我返回了fromNow()。 { headerName: "Submitted Date", field: "LastSubmittedDate", filter: 'agNumberColumnFilter', floatingFilter: true,
valueFormatter:(params: ValueFormatterParams)=>{
浏览 24提问于2020-07-27得票数 0
我正在评估将ag-grid作为我们项目中的一个解决方案。我的用户喜欢'excel‘类型解决方案的简单性。我的问题是，当在网格中输入新记录时，我们经常希望输入更多信息来创建超出ag-grid中显示内容的记录。 例如，假设您有一个名为“contact”的列，它在网格中显示联系人的姓名。当我们创建一个新的联系人记录时，我们也想要记录一些关于联系人的其他字段，如‘电话’，‘电子邮件’，‘地址’等。但是，我不希望这些字段显示在网格中。 所以我的想法是，如果我们点击一个下拉单元格，我们可以包括一个“新建”按钮或链接，它将启动一个对话框或类似于新的联系人表单。用户将输入新联系人的信息，一旦他们提交
浏览 33提问于2019-08-28得票数 0
我是一个新的Ag网格，并希望创建一个复选框选择的表格结构。这是我使用Ag grid React创建表格的方法
import React, {useState} from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
export const Gri
浏览 2提问于2020-07-02得票数 0
我正在寻找ag-Grid中的cellEditor，它允许下拉选择和输入相结合，这样用户除了可以从下拉列表中选择外，还可以添加自定义值。这是ag-Grid目前支持的东西吗？
浏览 0提问于2019-06-11得票数 2
回答已采纳
经过相当多的谷歌搜索后，我仍然找不到使用ag-grid-react和typescript的例子，尽管ag-grid-react项目似乎有typescript类型。 在我的react应用程序中，我安装了ag-grid-react：npm i --save ag-grid ag-grid-react react-dom-factories 这段代码看起来像jsx文件，但如果我尝试将它用作typescript tsx文件，我会得到编译器错误： const columnDefs = [
{headerName: 'Make', field: 'make'},
浏览 57提问于2019-03-20得票数 4
我是刚接触Typescript的人，我正在尝试弄清楚我应该如何使用React和Typescript来处理我的道具验证。 基本上，我想使用Typescript来定义props，但是如果我想发布一个包，用户需要使用Typescript来查看props验证的错误吗？在这种情况下，对于没有Typescript的用户，我是否也需要使用PropTypes？ 谢谢。
浏览 19提问于2021-08-12得票数 1
1回答
我使用的是Adaptable和ag-Grid React。我看过一个视频，上面说可以在配置中创建一个Pivot布局，但我不知道该怎么做。 我可以创建和保存“普通”布局，但我希望AdapTable在启动时将我的数据放在ag-Grid透视图中。
浏览 14提问于2021-04-30得票数 4
回答已采纳
1回答
我正在尝试弄清楚如何让ag-grid与Typescript React一起工作。我正在尝试创建一个具有自定义列类型的表。我正在定义的自定义列类型和默认列类型似乎不起作用，我不确定原因。下面是我的代码的一个简单版本： import React from 'react';
import './App.css';
import { AgGridReact } from 'ag-grid-react';
import { GridOptions } from "ag-grid-community";
import 'ag-gri
浏览 78提问于2019-12-11得票数 0
我对在新的React项目中实现Typescript是个新手。 我运行了yarn create react-app my-app --template typescript，我想知道哪些文件对我不起作用，我可以删除。与js一样，我删除了所有内容，只保留了app.js、app.css和索引。 然而，当我在这里做的时候，我得到了一个错误。 这个错误告诉我： undefined TypeScript error in undefined(undefined,undefined): File '/mnt/d/NodeJs/my-todo-list/src/App.test.tsx' n
浏览 210提问于2021-03-27得票数 2
1回答
我已经开始在我的react项目中使用ag-grid，但是找不到任何用于执行内联单元格验证的API，也就是说，每当用户编辑特定的单元格时，都需要执行必需的字段和模式验证。如果出现任何验证错误，则相应的可编辑字段将突出显示，并需要显示一条错误消息。 我使用了以下单元格事件来实现上述目的，但它们都没有提供我想要的结果。 cellEditingStarted cellEditingStopped
浏览 28提问于2019-02-01得票数 2
我对ag-grid上的一些列使用自定义单元格编辑器进行用户输入验证，以防止非数字输入。我的组件类： import { Component, ViewChild } from '@angular/core';
const KEY_TAB = 9;
const ENTER = 13;
const ARROW_RIGHT = 39;
const ARROW_LEFT = 37;
@Component({
selector: 'app-numeric-editor',
templateUrl: './numeric-editor.componen
浏览 22提问于2020-10-30得票数 0
2回答
当在ag-Grid中单击单元格时，我试图返回行数据。我定义了以下组件，并将其传递到下面显示的cellRendererFramework中。
import { ICellRendererParams } from "ag-grid-community";
import * as React from "react";
import { CellValue } from "./ClickableCell.style";
export default class ClickableCell extends React.Component<ICe
浏览 0提问于2019-04-16得票数 1
我正在查看有关创建自定义工具提示的ag-Grid示例。
import React, {Component} from 'react';
export default class CustomTooltip extends Component {
getReactContainerClasses() {
return ['custom-tooltip'];
}
render() {
const data = this.props.api.getDisplayedRowAtIndex(this.props.
浏览 16提问于2020-02-15得票数 3
回答已采纳
我看到了那个the ag-grid-react repo has types，我也看到了那个the ag-grid-react-example repo has examples。但是如何将这两者结合起来，并创建一个具有React和Types的单元格编辑器呢？ 我猜是这样的，但我不能让TypeScript高兴： class MyCellEditor implements ICellEditorReactComp {
public getValue() {
// return something
}
public render() {
const { value
浏览 27提问于2019-02-26得票数 1
如何在Ag-Grid单元格中包含基本的HTML元素。
下面是我在MyComponent.html中的html PrimeNg p-dropdown
<p-dropdown [options]="cars" [(ngModel)]="selectedCar" (click)="doSomething()" [style]="{'width':'150px'}"></p-dropdown>
和ag-grid现在用于在其中一个单元格中包含上述p-dropdown
<ag-gr
浏览 1提问于2020-07-27得票数 2
我正在使用带有React的ag-grid，并且想使用useDynamicCallback函数。但是，给定的示例是一个js示例，我想在typescript中使用它。 以下是他们所拥有的： function useDynamicCallback(callback) {
const ref = useRef();
ref.current = callback;
return useCallback((...args) => ref.current.apply(this, args), []);
} 下面是我如何添加类型来转义ts-lint错误： const useDy
浏览 23提问于2021-09-22得票数 2
回答已采纳
我遇到了一个令人困惑的问题，TypeScript似乎正在将自己的React副本安装到自己的全局缓存中(不确定它叫什么？假设它是什么)，并在我的项目中引用它。
具体地说，我最终得到了两个React引用，其中一个位于我的项目根目录中
C:\MyProject\node_modules\@types\react
中的另一个引用
C:\Users\MyUserName\AppData\Local\Microsoft\TypeScript\3.0\node_modules\@types\react
如何控制和卸载最终位于TypeScript local文件夹中的引用？我在我的项目中做了什么，可能会导致这
浏览 92提问于2018-11-13得票数 4
1回答
带有Redux的AG-Grid
、、、、
在我的工作中，我们决定在react变体中使用AG-Grid：
目前，我们的React架构是Redux。根据我对AG-Grid的一点了解，我可以说它不太适合这个体系结构。AG-Grid将它的总体状态保存在组件中。尝试将它与redux连接起来很麻烦，甚至不聪明。
我可以接受这种情况，但至少我需要观察行模型的更改--这意味着获取新的行、排序和筛选(我不需要监视单元格的更改)。我有两个想法，如何观察这一点，并将其连接到redux。
选项1-使用gridOptions.onModelUpdated()
使用gridOptions.onModelUpdated()，我知道何时执行筛选或排序，但不能访问显示
浏览 3提问于2016-07-22得票数 6
我正在尝试使用Preact + Vite + Typescript + Redux构建一个简单的Todo应用程序。但是我面临着一些与redux和类型记录的兼容性问题。
这就是我要犯的错误。
Uncaught TypeError: Cannot read properties of undefined (reading '__H')
at m (react-redux.064eb876.js:3)
at d (react-redux.064eb876.js:3)
at d.Provider [as constructor] (react-redux.064
浏览 5提问于2021-09-11得票数 7
1回答
import React, { Component } from 'react';
import ReactHighcharts from 'react-highcharts';
import axios from 'axios';
import { Link, browserHistory } from 'react-router';
import { AgGridReact, AgGridColumn } from "ag-grid-react";
import
浏览 1提问于2018-11-17得票数 2
回答已采纳
我正在尝试将linting集成到使用CRA创建的应用程序中，该应用程序使用类型记录。
在终端上复制的步骤
create-react-app my-app --typescript
./node_modules/.bin/eslint --init
选中以下选项:检查语法、查找问题和强制执行代码样式
选择: JavaScript模块(导入/导出)
选择: React
你的项目是否使用类型记录？
选中:浏览器
流行的风格指南是airbnb
我的.eslintrc json文件如下所示
{
"env": {
浏览 3提问于2019-10-07得票数 1
回答已采纳
我有一个ag-grid实例，它必须每隔几秒钟用新的数据通过调用服务来不断更新。
我希望网格只更新具有已更改数据的单元格。
有没有办法使用React来实现这一点呢？
提前谢谢。
浏览 11提问于2020-03-24得票数 0
我在整个react应用程序中使用AG-Grid，在一些情况下，当网格数据发生变化时，我希望cellRenderer能够更新。在以下两种情况下，cellRenderer最初加载都是正确的，但在数据更改时不会更新：
用户编辑可编辑的单元格并更改值。
服务器更新redux中的网格数据。
看看这个
在本例中，我用可编辑的单元格重新创建了第一个用例，并使用了类组件和函数组件。使用onCellValueChanged和params.api.refreshCells()，我能够使类组件更新，但不能得到函数组件。
第一个问题:如何使用新的道具重新呈现函数组件，就像类组件在代码框示例中重新呈现一
浏览 3提问于2020-05-14得票数 5
回答已采纳
我在我的项目中有一个配置为使用typescript的摩纳哥编辑器，我已经从typescriptDefaults对象配置了compilerOptions，并且工作良好。我们从.tsconfig文件中获取compilerOptions。事情是这样的，我们可以用不同的.tsconfig文件打开两个模块，如果这些文件有不同的配置，我需要配置与之兼容的摩纳哥编辑器。但是配置它的方式是默认的，如果我理解的话是通用的。如何仅为编辑器实例添加配置？ 这是我现在如何配置它的代码： monaco.languages.typescript.typescriptDefaults.setCompilerOpti
浏览 42提问于2021-06-15得票数 1
1回答
谁能给我解释一下：
当我使用react-native init创建新的new本机项目时，它也会生成.flowconfig。
它是否也同时增加了对流的依赖？
在使用Visual代码时，它提供了一些智能感知功能，但我没有安装TypeScript或其他任何东西。如果我想使用TypeScript而不是Flow，是否必须另外安装TypeScript？
我只是有点困惑，因为在我的项目目录中，我有.flowconfig，当使用VS代码时，它仍然使用TypeScript。
如果我只想使用Flow并完全禁用TypeScript，怎么办？这方面的信息不多。
浏览 3提问于2017-09-28得票数 3
回答已采纳
我正在尝试使用TypeScript创建一个react应用程序。我确实创建了react-app (name) --use-pnp --typescript。
TS林特一直说找不到‘react’模块。TS(2307)我已经尝试了yarn add @types/react，yarn add，restarting VScode等。
import React, { Component } from 'react';
import './App.css';
interface IAppState {
}
interface IAppProps {
}
class Ap
浏览 2提问于2019-05-18得票数 4
我最近在我的PC上安装了intellij idea，并启动了react本机应用程序。我安装了react原生和react js所需的所有库。还安装了该ide的node js模块和所有插件。我仍然在下面的import语句中得到类似这样的错误。
当我移动到这一行时，它显示了错误，比如。->安装TypeScript定义以获得更好的类型信息。但我的typeScript定义也是按照要求的。
此外，我已经将我的JS更改为ReactJSX。
我在这里附上了图片以供参考。
浏览 22提问于2018-01-04得票数 0
1回答
我正在参与一个相当大的React项目，该项目使用react-data-grid显示大量可编辑的数据。现在，您必须单击Update按钮将更改发送到服务器。我手头的任务是创建这样的自动保存功能：
用户选择单元格来编辑文本。
用户更改文本
用户要么移动到另一个单元格，要么单击远离数据网格。
更改将持久化到服务器。
以下是我尝试过的：
每个列上的onBlur事件。事件将触发，但事件似乎附加到div而不是底层的input控件上。因此，在触发此事件时，我无法访问该单元格的值。
onCellDeselected在<ReactDataGrid>组件本身上。该方法似乎
浏览 5提问于2016-11-30得票数 2
我正在使用带react 16.12.0的ag-grid。 我有这个栏目的定义： const columnsAuszeichnungenn = [{
headerName: "Award",
field: "auszeichnungsname",
resizable: true,
sortingOrder: ['asc']
}, {
headerName: "From",
field: "von",
浏览 48提问于2020-01-02得票数 2
回答已采纳
1回答
我在我的父窗口上有一个ag-grid。单击单元格上的链接将获取详细信息数据，然后启动Modal窗口。然后，Modal窗口在此窗口的另一个ag网格上显示详细信息。
我在这个Modal窗口上也有一个按钮，点击它将获取并重新填充ag-grid。这个功能对我来说很好用。
当单击parent时，数据会被获取，但不会绑定/显示在模式窗口的网格上。不知道我错过了什么。
到目前为止，我已经尝试了以下几种方法。
Parent:
function ParentWindow(props)
{
const[detailsData,setDetailsData] = React.useState();
functi
浏览 1提问于2021-09-21得票数 2
使用React+Typescript，我需要在表格上实现上下文菜单，点击行单元格和列标题。
我看了几个库: ag grid在企业版中提供了上下文菜单，它只在行单元格上。react-data-grid提供了行级上下文菜单。但是这个库的文档维护性很差，给开发带来了困难
有没有人可以建议我如何做到这一点？
浏览 1提问于2020-06-15得票数 1
我在Svelte文件中有一个ag-Grid。其中一个列定义用于显示小数点后2位的浮点数，如下所示：
const columnDefinitions = [
...
{
field: fixedScr,
headerName: "Fixed SCR",
cellClass: numberCellClassSelector,
type: "rightAligned",
width: 150,
editable: true,
valueFor
浏览 38提问于2021-02-16得票数 0
1回答
我可以像下面这样用react和ag-grid组件创建属性网格吗？ ? 我只需要简单的属性网格。 感谢你所有的回复
浏览 39提问于2019-12-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
