Question

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

此处记录了...... https://www.ag-grid.com/javascript-grid-width-and-height/#autoHeight

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

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

Answer 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 });
        }
    }
}

Answer 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

ag-grid：使用domLayout ='autoHeight'时是否可以使用固定标头？

2 个答案: