ag-grid：使用 domLayout='autoHeight' 时是不是可以有固定的标题？

Posted 2023-03-28

【中文标题】ag-grid：使用 domLayout=\'autoHeight\' 时是不是可以有固定的标题？

【英文标题】：ag-grid: is it possible to have fixed headers when using domLayout='autoHeight'?ag-grid：使用 domLayout='autoHeight' 时是否可以有固定的标题？

【发布时间】：2018-11-19 21:57:19

【问题描述】：

ag-grid 有一个设置可以让您禁用默认的类似 iframe 的行为（网格有自己的滚动条），而只是在主页内容中显示网格的整个高度。然后您可以使用主页垂直滚动条向下查看网格。

记录在这里...https://www.ag-grid.com/javascript-grid-width-and-height/#autoHeight

使用autoHeight 功能时，向下滚动时每列顶部的标题不再粘在顶部。

当用户在使用autoHeight 时向下滚动时，标题是否仍然可以粘在屏幕顶部？

【问题讨论】：

你做到了吗？我也有同样的问题。

@KrwawyKefir 不，永远无法让它发挥作用。

【参考方案1】：

我使用 ngStyle 和 window.innerHeight 解决了这个问题：

html：

<div style="padding:10px 10px 0px 10px;  ">

  <div style="font-size: x-large; font-weight: bold; 
      border: 2px solid black;border-radius: 5px;
      padding: 10px 10px 10px 10px; margin-bottom: 15px;
      ">
    ag-grid domLayout autoheight work-around for scrolling 
  <div>

  <!-- there is no scroll bar when using domLayout autoHeight  -->  
  <!-- 
    <ag-grid-angular  style="width: 100%;" 
      domLayout='autoHeight' 
      class="ag-theme-balham" 
      [rowData]="rowData"
      [columnDefs]="columnDefs">
    </ag-grid-angular>
    -->  

    <!-- but you can use ngStyle and window.innerHeight instead  -->
    <ag-grid-angular  style="width: 100%;" 
                      [ngStyle]=gridStyle
                      class="ag-theme-balham" 
                      [rowData]="rowData"
                      [columnDefs]="columnDefs">
    </ag-grid-angular>

  </div>
</div>

角度：

import  Component  from '@angular/core';

@Component(
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
)
export class AppComponent 
    title = 'ag-grid domLayout autoheight work-around for scrolling ';

    columnDefs = [
        headerName: 'Row', field: 'row'  
    ];
    rowData: any[] = [];
    gridStyle:any; 

    ngOnInit() 

        // set the height dynamically to the current window height
        let windowHeight:string = window.innerHeight + 'px'; 


        this.gridStyle = 'height': windowHeight; 
        for (let row = 1; row <= 100; row++) 
            this.rowData.push('row': 'Row: ' + row );
        
    

【参考方案2】：

使用下面的 css，我们可以固定标题并让浏览器在 ag 网格中滚动。

CSS

.ag-theme-alpine .ag-header 
    top: 0;
    position: fixed;
    width: auto;
    display: table;
    z-index: 99;

.ag-theme-alpine .ag-root-wrapper 
     border: none!important; 

参考附上的代码：Plunker