[英]How to make ag grid header sticky and responsive with resizing feature
已解決: (100% 在 chrome 和 edge 中工作)(在 IE11 中,如果網格中沒有水平滾動,它工作正常)
HTML: gridAutoHeight = true in ag-grid-angular html 標簽
TS: window.addEventListener('scroll', this.scroll); 在 ngOnit() 中
scroll = (event: any): void => {
let headerElementRef;
let bodyElementRef;
headerElementRef = document.querySelector('[ref="headerRoot"]');
bodyElementRef = document.querySelector('[ref="eBodyViewport"]');
const nav = headerElementRef;
const body = bodyElementRef;
const offset = nav.getBoundingClientRect();
if (!nav) return;
if (window.pageYOffset > offset.top && !(body.getBoundingClientRect().top - nav.getBoundingClientRect().height > 0)) {
nav.style.position = 'fixed';
nav.style.top = 0;
nav.style.zIndex = "2";
nav.style.width = this.totalGridWidth + 'px';
} else {
nav.style.position = 'relative';
nav.style.top = '';
nav.style.zIndex = "";
nav.style.width = this.totalGridWidth + 'px';
}
}
試試下面的代碼:
<div class="table-responsive">
<ag-grid-angular style="margin-top:10px; width: 100%; height: 200px;" class="ag-theme-balham" [pagination]="true" [paginationPageSize]="paginationPageSize" [enableColResize]="true" [paginationNumberFormatter]="paginationNumberFormatter" [enableSorting]="true" [enableFilter]="true" [headerHeight] = "headerHeight" [gridAutoHeight] = "true" [overlayNoRowsTemplate]="overlayNoRowsTemplate" [rowData]="gridData" [columnDefs]="columnDefs" (columnResized)="onColumnResized($event)" (gridReady)="onGridReady($event)" (rowClicked)="onRowClicked($event)"> </ag-grid-angular>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.