带有相关页脚按钮的 AG 网格

发布于 2025-01-11 17:39:13 字数 742 浏览 1 评论 0 原文

我正在考虑向我的 AG 网格添加页脚按钮，并希望它们与网格行相关，即我希望它们根据某些特定于行的数据启用/禁用。

我不确定这是否需要自定义实现，或者 Ag-grid 中是否有一些开箱即用的支持？

问题

class CustomPinnedRowRenderer {
  init(params) {
    this.eGui = document.createElement('div');
    this.eGui.innerHTML = `<button id='editBtn'>Edit<button> <button id='deleteBtn' disabled>Delete<button>`;

  }

After executing the line this.eGui.innerHTML, I somehow get an unnecessary/extra button element, NOT sure why...so the actual innerHTML rendered after I inspect is as below;
<button id="editBtn">Edit</button><button> </button><button id="deleteBtn" disabled="">Delete</button><button></button>

原文

I am looking at adding footer buttons to my AG Grid and want them to be related to the grid rows i.e. I want them to be either enabled/disabled based on certain row-specific data.

I am not sure if that would require a custom implementation OR if there is some out-of-the-box support within Ag-grid ?

ISSUE

class CustomPinnedRowRenderer {
  init(params) {
    this.eGui = document.createElement('div');
    this.eGui.innerHTML = `<button id='editBtn'>Edit<button> <button id='deleteBtn' disabled>Delete<button>`;

  }

After executing the line this.eGui.innerHTML, I somehow get an unnecessary/extra button element, NOT sure why...so the actual innerHTML rendered after I inspect is as below;
<button id="editBtn">Edit</button><button> </button><button id="deleteBtn" disabled="">Delete</button><button></button>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏末的微笑 2025-01-18 17:39:13

有几种方法可以实现这一目标：

如果您有 AG Grid 企业，那么您可以创建自己的自定义状态栏组件
如果您使用 AG Grid 社区，您可以利用固定行添加空行在网格的顶部或底部，并在该行上显示自定义单元格具有您需要的控件的渲染器

这里的关键如下：

<AgGridReact
            // ...
            onRowSelected={(params) => {
              params.api.redrawRows({
                rowNodes: [params.api.getPinnedBottomRow(0)],
              });
            }}
            isFullWidthCell={(rowNode) => rowNode.rowPinned === 'bottom'}
            fullWidthCellRenderer={CustomPinnedRowRenderer}
            pinnedBottomRowData={[{}]}
          ></AgGridReact>

我们通过提供一个空对象来添加一个空的固定底行。
我还决定启用全宽行在固定行上，这意味着单元格渲染器组件将跨越网格的整个宽度并且不使用列。如果您愿意，可以禁用此功能。
当选择一行时，我们使用网格事件 onRowSelected 重绘固定行以强制其刷新，以便可以重新计算禁用按钮的逻辑。

const CustomPinnedRowRenderer = memo((props) => {
  const selectedNodes = props.api.getSelectedNodes();

  const isFirstRowSelected =
    selectedNodes.filter((node) => node.rowIndex === 0).length > 0;
  return (
    <button disabled={isFirstRowSelected}>
      enabled only if first row is selected
    </button>
  );
});

请参阅下面的实现 Plunkr

There's a few ways of achieving this:

if you have AG Grid enterprise then you could create your own Custom Status Bar Component
if you are using AG Grid community, you could leverage Pinned Rows to add an empty row at the top or bottom of the grid, and on that row display a Custom Cell Renderer with the controls you require

The key here is the following:

<AgGridReact
            // ...
            onRowSelected={(params) => {
              params.api.redrawRows({
                rowNodes: [params.api.getPinnedBottomRow(0)],
              });
            }}
            isFullWidthCell={(rowNode) => rowNode.rowPinned === 'bottom'}
            fullWidthCellRenderer={CustomPinnedRowRenderer}
            pinnedBottomRowData={[{}]}
          ></AgGridReact>

We are adding an empty pinned bottom row by providing an empty object.
I've also decided to enable Full Width Rows on the pinned row, meaning that the cell renderer component will span the entire width of the grid and not use columns. You can disable this if you wish.
When a row is selected, we redraw the pinned row to force it to refresh using the grid event onRowSelected, so that the logic to disable the button can be recomputed

const CustomPinnedRowRenderer = memo((props) => {
  const selectedNodes = props.api.getSelectedNodes();

  const isFirstRowSelected =
    selectedNodes.filter((node) => node.rowIndex === 0).length > 0;
  return (
    <button disabled={isFirstRowSelected}>
      enabled only if first row is selected
    </button>
  );
});

See this implemented in the following Plunkr

回复收藏 0 原文

~没有更多了~