问题标签 [ag-grid-vue]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
330 浏览

reactjs - 计算行:如何使用 AG Grid 根据同一列中其他行的值计算特定列的单元格值?

我想使用同一列中其他行的值为特定行实现自定义计算。我发现 AG Grid 提供了定义列定义表达式aggFunc的能力,但它们并不能解决我想要的问题:

  1. Column Definition Expressions(我们称之为 CDE)允许用户引用同一行的其他列
  2. aggFunc在用户可以使用内置函数或定义自定义聚合函数的分组情况下很有帮助,该函数只能在特定组内使用同一列的单元格值。

我需要解决以下问题:

结果应该是这样的:

那么,我如何通过 AG Grid (react)为Net Income行和Net Income Total行定义公式(表达式/聚合函数) ,我可以在其中引用同一列中任何需要的行(在上述情况下Net Income = In 1 + In 2 - Liabilities以及Net Income Total = Income - LiabilitiesJan、Feb 等)。 )?可以使用哪个 API?

目前,我实现了这个DEMO,但在官方 AG Grid 文档中没有找到任何关于如何实现所需案例的线索,而且这个库是否有可能......

升级版。我试图通过以下方式实现它:

  1. 覆盖getRowNodeId()回调以具有可预测的 rowNodeId;
  2. api.getRowNode(rowId)通过;获取 rowNode
  3. 使用具有 2 个参数的getValue()(colKey, rowNode)函数,理论上它应该返回指定行的目标列的值。

结果我有:

这不起作用并getValue("Jan", in1Row) + getValue("Jan", in2Row)导致Uncaught RangeError: Maximum call stack size exceeded.

感谢您提供解决此案例的任何想法/示例!

0 投票
0 回答
51 浏览

windows - 在 125% 缩放 [ag-grid-vue] 的 Windows OS chrome 浏览器中未触发 bodyScrollEnd 事件

重现 Windows 8、10、11的环境“vue”:“2.5.16”“ag-grid”:“18.1.2”“ag-grid-vue”:“26.2.0”

浏览器:Chrome 96.0.4 +

提供可重现的场景

  1. 将窗口显示分辨率设置为 125% 或 150% 打开
  2. chrome 并打开应用程序
  3. https://codesandbox.io/s/ag-grid-vue-example-forked-gy47e?file=/src/App.vue
  4. 现在尝试滚动到网格底部,bodyScrollEnd当滚动到达末尾时不会触发

bodyScrollEndImg

CodeSandBox 链接:https ://codesandbox.io/s/ag-grid-vue-example-forked-gy47e?file=/src/App.vue

当前行为 bodyScrollEnd 事件在每个浏览器上的 MacOS BigSur(11.6) 和 Windows(100% 缩放)上运行良好

无论操作系统和浏览器如何,都应在到达结束或滚动时触发预期行为bodyScrollEnd 事件

AG 网格版本:18.1.2

浏览器:'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36'

语言:[ES6/7]

0 投票
0 回答
12 浏览

vue.js - AG 网格中的 tooltipShowDelay 选项不起作用

我正在使用 AG Grid 版本 26.2 和 Vue 2。

我想要做的是将 tooltipShowDelay 设置为 0,这样工具提示就会立即呈现。

第一次渲染大约需要 2 秒,这是默认值,之后是瞬时的。

我尝试了所有我能想到的可能性:

或者

并在模板内

我什至将 enableBrowserTooltips 设置为 false,因此它不会干扰自定义工具提示。

0 投票
1 回答
13 浏览

vue.js - AG-grid Vue 中的 suppressDragLeaveHidesColumns 属性不起作用

我正在使用 AG-Grid 26.2 版本和 Vue 2。

我想要做的是,当用户将列拖到网格外时,该列不应该消失。

但是该属性不起作用。

0 投票
0 回答
6 浏览

ag-grid - 悬停在单元格上时突出显示标题

我有一个屏幕截图,在悬停在单元格上时显示行和列突出显示,但我只需要列的行和标题的突出显示,而不是所有列。我怎么做?以及如何自定义标题突出显示的外观?

屏幕

0 投票
0 回答
35 浏览

laravel - Ag-grid cellRenderer 未在主/详细网格 columnDefs 内呈现组件

在此处输入图像描述

与上面的按钮相同,希望在主/详细网格中使用相同的组件,但无法渲染该组件

我在 open main.js 下面附加了 plunker 链接并通过它。

“https://plnkr.co/edit/s6wAsWSpvRcwPsIX?preview”

Vue.JS 2

提前致谢!

0 投票
1 回答
47 浏览

vue.js - ag-grid-vue 出错 找不到组件 XXX,是不是忘记配置这个组件了?

我正在使用 ag-grid-vue,并且正在尝试创建自定义工具提示。

这是我的代码:

CustomToolTipVue.js 组件:

网格组件 - 我在哪里使用它(仅附上主要代码):

我不断收到这个错误:

“找不到组件CustomToolTipVue,你忘记配置这个组件了吗?”

知道为什么吗?

0 投票
1 回答
13 浏览

vuejs3 - 使用 Vue 3 为 AG-Grid 显示具有背景颜色的两个连续行

我想显示 2 行具有相同的背景颜色。例如,第 1 行和第 2 行需要背景颜色为浅灰色;第 3 行和第 4 行需要有白色背景;再次,第 5 行和第 6 行将具有灰色背景。有没有一种方法可以基于行数据来实现?

示例网格数据:

[{ id: null, duplicateFor: 123, name: 'abc', }, { id: 123, duplicateFor: null, name: 'def', }, { id: null, duplicateFor: 456, name: 'xyz', }, { id: 456, duplicateFor: null, name: 'qwe', }, ]