Ag-grid固定表头

Question

因为我的行高也是动态的，所以我的ag-grid会自适应大小。对于高度，我使用[style.height.px]="beta"和this.beta = document.getElementsByClassName('ag-full-width-container')["0"].offsetHeight + 139。并且将pagination设置为100。

我无法使用autoHeight，因为我有超过10k行。所以我想让我的标题粘在顶部。在DOM中的ag-grid之前有一些内容。随着滚动，我希望我的ag-grid标题固定在顶部。我使用top:0;position:sticky;z-index:1000。它可以在每个div标签中工作，但不能在ag-gird的div标签中工作。所以有没有办法在ag-grid中使用粘性标题？

- Naman Jain

---

@MindRoasterMir 什么？ - Naman Jain

@Racal 你是在寻找一种叫做列固定的功能吗？ - Naman Jain

@NamanJain 是的，但是对于水平滚动条，我应该怎么做呢？当然是在 Angular 中实现。 - NsdHSO

@Racal 希望这是你所寻找的内容 https://www.ag-grid.com/javascript-data-grid/column-pinning/ - Naman Jain

@NamanJain 有点类似，但是适用于分组的情况。请参考：https://www.ag-grid.com/javascript-data-grid/grouping-multiple-group-columns/ - NsdHSO

Answer 1

在onGridViewChanged()函数中，我实现了以下逻辑。在这个逻辑中，应该考虑DOM中ag-grid头部上方的HTML作为top，因为对我来说，ag-grid头部的top是0。然后根据您的要求添加一些值(校准)。然后为行体添加一些margin(校准)。

    onGridViewChanged() {
        let header = $('.ag-header')
        let headerPos = $('.btn-row').position().top + 50
        $(window).on("scroll", function () {
            if ($(window).scrollTop() > headerPos) {
                header.css("position", "fixed").css("top", 0).css("z-index", "99");
                $('.ag-body-viewport.ag-layout-normal').css("margin-top", "88px");
            }
            else {
                header.css("position", "static");
                $('.ag-body-viewport.ag-layout-normal').css("margin-top", "0px");
            }
        });
    }

- Naman Jain

Answer 2

我建议消除网格外的滚动条，并使网格适应窗口大小。你可以使用flexbox来实现这一点。确保父元素使用"display: flex"并具有100%的高度。然后将网格设置为"flex-grow: 1"。

在父元素上：

height: 100%;
display: flex;
flex-direction: column;

在网格上：

flex-grow: 1;

https://stackblitz.com/edit/angular-ag-grid-full-height?embed=1&file=src/app/app.component.html

- Matt Nienow

---

上面的内容很大，所以我无法消除主页的滚动条。 - Naman Jain

@Naman 我现在明白你的情况了。我猜你不想在网格上设置一个固定的高度，因为这样页面上会出现多个滚动条，对吗？如果是这种情况，很抱歉，我不知道有什么好的解决办法。 - Matt Nienow

是的。网格的高度是动态的。我只是想知道为什么 position:sticky;top:0;z-index:9999 不起作用。 - Naman Jain

Answer 3

我尝试了很多方法，但这个对我有效。这里的.grid-table是我的自定义类。另外，如果你在该类中已经设置了外部溢出属性，这个解决方案将不起作用。

::ng-deep .grid-table .ag-body-viewport {        
        overflow: auto;               
    }

- shrinath deshmukh