问题标签 [ag-grid-angular]

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 投票
0 回答
2240 浏览

javascript - Ag grid 对齐主从网格列

我正在关注Ag-Grid 主细节文档,并尝试让主网格列和细节网格列对齐并保持同步,如对齐网格文档中所述。但它似乎不适用于主细节布局。

我去调试 Ag-gridalignedGridService并发现传递的网格配置应该有一个网格 API 引用,用于在两个网格之间绑定网格事件,

这不是细节网格的情况,因为在执行上述代码时它们没有 API 引用,我猜可能是因为只有在需要时才会实例化细节网格,其次它的配置将被每个细节网格重用,因此它们的 API 对象不是配置的一部分,而不是主配置的一部分,根据文档,可以使用详细 API ref 访问,

另一方面,这是我按照对齐的网格文档尝试做的事情,

在这种情况下这显然是错误的,我想我可能需要实施自定义实现来将两个网格事件绑定在一起,但我不确定从哪里开始,或者即使这可能,

其次,设置autoHeight: true似乎对细节网格的高度没有影响,基本上我想做的是松开细节网格的滚动条,因为它不应该有很多行。根据文档,您可以提供静态高度或在运行时提供高度,但似乎没有自动确定高度的选项,

在我的情况下,单元格中的文本长度可能会更长,并且我希望行自动换行并具有可变高度,而不是将它们限制在某个高度,这是由于我一直在使用的原因,autoHeight但这在这里似乎也没有影响.

这是一个stackBlitz,它演示了这两个问题,有人可能会说主/细节布局可能不适合这里的用例,而简单的树形布局可能会很好,但前提是细节网格可以有自己的标题和提供树视图无法提供的东西,我倾向于使用主/详细视图。

非常感谢任何可以帮助我解决这两个问题的帮助。

编辑:我使用以下方法使对齐的网格部分工作:

注意:由于网格的虚拟滚动必须masterGridOption.alignedGrids在每个细节onGridReady回调上更新,因为即使扩展的细节网格也会被破坏并重新生成。

现在除了使细节和主网格行真正遵循 autoHeight 之外,我唯一想要的就是对齐主和细节之间的非常见列,例如

  • 调整主名称列的大小应调整详细信息的名字或姓氏列的大小,以便它们保持同步,反之亦然
  • 隐藏主人的姓名列应隐藏详细信息 f name 和 l name 列
  • 同样由于这两个子列(f name 和 l name)对应于 master 'name' 列,重新排序似乎被破坏了,
0 投票
3 回答
2249 浏览

ag-grid - ag-grid 中的合并标题

ag-grid 是否可以使用以下格式:

  • 带有空白名称的合并标题
  • 2 行中带有名称的合并标题(“原始值”)
  • 父标题居中(“带有子标题的标题”)

在此处输入图像描述

0 投票
0 回答
53 浏览

javascript - 该元素是否有一个具有特定类的子元素?

我有以下问题。我有一张桌子。在此表中,我知道哪些单元格已处理或无效。但是,我不知道表中的行。现在我想在开头设置一个标记,无论一行是否被编辑。这可以是行上的前元素或第一个单元格中的标记。我是一个更大项目的新手,我只是不知道如何给一行上课,并希望没有它也能工作。它用于 Ag Grid 和 Angular。

我已经尝试看看我是否与兄弟元素相处,或者是否有任何伪类。不幸的是,还没有()。如果它适用于 Chrome,我可以做到。老实说,我有点绝望。

0 投票
1 回答
264 浏览

ag-grid - 我可以阻止主行更改关闭详细信息吗?

我正在使用 angular 6 的 ag-grid 企业。我有一个带有自定义 detailCellRenderer 的主/详细信息设置。

我遇到的问题是,如果主行中的任何数据发生更改,详细信息将关闭。我找不到任何关于停止甚至检测到它正在发生的文档。

这是我的网格定义:

这是我的渲染器:

refresh()不区分真假。事实上,它从未被调用过。

0 投票
1 回答
6304 浏览

angular - 从 ag-grid 列获取复选框值

我在 ag-grid 中有一个复选框,我按以下方式显示:

我想要实现的是,当用户单击“保存”按钮时,我会遍历每一行并找出已选中的复选框。

我尝试使用下面的代码来找出已选中的复选框。不幸的是,即使我选中了 ag-grid 中的复选框,node.data.IsCancel 也是错误的:

以下是所有代码:

取消.component.html

取消组件.ts

更新 我也尝试使用 checkboxSelection: true。但它在复选框旁边显示“真”或“假”。

更新#2

我使用了复选框选择:真。

有两个问题:

1) 复选框旁边显示值“true”或“false”。请看图片。

2) 对于那些已经从数据库返回为“真”的复选框,该复选框尚未被选中。

在此处输入图像描述

这是更新的代码:

0 投票
1 回答
400 浏览

angular - 当我们将行选择启用为多个时,ag-grid 复制选项不起作用

AG-Grig 上下文菜单默认选项复制(cntl+c)不复制所选行,当gridOptions.rowSelection = 'multiple' 的行选择时,我们如何覆盖复制选项以复制整行?

它适用于单行,当我们选择多行时,复制单元格而不是复制行?我们怎样才能得到这两种行为?

0 投票
1 回答
97 浏览

ag-grid - 如何在 ag-grid 中创建此表?可能吗?

我是 ag-grid 的新手,想创建这个(附在下面)表,其中列在 ag-grid 中动态添加。有什么解决办法吗?

在此处输入图像描述

0 投票
2 回答
2213 浏览

angular - 将数据加载到网格后不显示滚动条

我无法在我的角度应用程序中实现 ag-grid。我可以将数据加载到网格中,但是当我加载数据集时,没有滚动条。

向右显示更多列的键盘导航显示空白数据,告诉我 ag-grid 没有发现我正在滚动。

我遵循了 ag-grid 提供的所有教程,并尝试将其封装在<div>. 我可以更改网格的大小,但无法滚动。

从下面的屏幕截图中可以看出,没有滚动条。我至少有 500 行数据,但无法滚动。很抱歉停电。有人知道这里发生了什么吗?

没有滚动

0 投票
0 回答
1045 浏览

ag-grid - 将文件拖放到 ag-grid 以上传到文件夹

我正在尝试使用“drop-”扩展来自ag-Grid文档站点(https://www.ag-grid.com/javascript-grid-tree-data/#example-file-browser )的文件浏览器示例文件上传”功能。

在此处输入图像描述

这个想法是用户可以将文件拖放到网格的任何位置。然后,应用程序应检测文件的放置位置(文件夹/文件路径或空白区域)。通过上传,应用程序可以将该信息发送到服务器。

我添加了ng2-file-upload ( https://github.com/valor-software/ng2-file-upload ) 来处理文件删除事件和上传本身。

到目前为止我在这里的演示:https ://stackblitz.com/edit/angular-rvspzq

我遇到的问题是我还没有找到一种好方法来检测文件被放到网格上并能够获取上下文。在演示中,我使用了 (ng2-file-upload)onFileDrop事件(检测被删除的文件)和 ag-gridcellMouseOver事件(获取上下文)的组合。这工作得相当好,但确实需要用户在拖放后移动鼠标光标:如果他们不这样做,cellMouseOver则不会触发事件。

有什么建议么?

0 投票
0 回答
511 浏览

angular - 在 ag-grid 中为 agSelectCellEditor 加载 celleditorParams 值的异步值时,将值获取为未定义

下面是我的一个标题字段的代码:

下面是我的函数,我在其中获取异步值以显示在 Action 字段中。

在我获取数据之前,celleditorparams 将值设为未定义。我在这里使用回调函数来等到网格中的 celleditorparams 需要我的 actionsForGrid 值。任何人都可以帮助我显示从我的异步调用中获取的值。