Ag-grid 粘性标头

Posted 2023-03-28

【中文标题】Ag-grid 粘性标头

【英文标题】：Ag-grid sticky header

【发布时间】：2020-07-25 16:38:57

【问题描述】：

所以我的 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 它适用于除ag-gird 的div 标签之外的每个div 标签。那么有没有办法在 ag-grid 中设置一个粘性标题？

【问题讨论】：

投反对票但现在发表评论？

@MindRoasterMir 什么？

有人给了你一个负面评论，但他没有给出理由。

是的，这个问题超出了他们的理解水平。

@Shlok Nangia 嘿，我想为组标题文本制作一个可滚动但水平的，当我向右滚动文本组时，它显示下一个标题组文本是第一个。一种渐变，但不适用于标题组文本的颜色。

【参考方案1】：

在onGridViewChanged() 函数上，我实现了以下逻辑。所以在这个逻辑中，DOM 中 ag-gird 上方的 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");
            
        );
    

【参考方案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

【讨论】：

网格上方的内容很大，无法消除主页滚动条。

@Naman 我现在了解您的情况。而且我猜你不想在网格上有一个硬编码的高度，因为那样页面上会有多个滚动条？如果是这种情况，那么抱歉，但我不知道有什么好的解决方案。

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