Ag-grid 置顶 header

Question

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

我无法使用 autoHeight，因为我有超过 10k 行。所以我希望我的 header 具有粘性。我在DOMag-grid之前有一些内容。当我滚动时，我希望我的 ag-grid header 保持在顶部。我正在使用 top:0;position:sticky;z-index:1000 它适用于每个 div 标签，除了 ag-gird 的 div 标签。那么有没有办法在ag-grid中有一个粘性的header？

Answer 1

我建议消除网格外的滚动条，并使网格适合 window。你可以使用 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

Answer 2

在 onGridViewChanged() 函数上，我实现了以下逻辑。所以在这个逻辑中，DOM 中 ag-gird 上面的 HTML 应该考虑 top 因为 ag-grid header top 是 0 对我来说。然后根据您的要求（校准）添加一些值。然后为行 body 添加一些 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");
            }
        });
    }

Ag-grid 置顶 header

Ag-grid sticky header

html

css

typescript

ag-grid

angular