如何通过调整大小功能使 ag 网格标题具有粘性和响应性

Posted 2023-03-13

【中文标题】如何通过调整大小功能使 ag 网格标题具有粘性和响应性

【英文标题】：How to make ag grid header sticky and responsive with resizing feature

【发布时间】：2019-09-05 10:25:14

【问题描述】：

已解决：（100% 使用 chrome 和 edge）（在 IE11 中，如果网格中没有水平滚动，它可以正常工作）

html： gridAutoHeight = true 在 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';
  

【问题讨论】：

你能提供一个minimal reproducible example吗？也许在 stackblitz.com 上？还是codesandbox.io？

尝试删除[gridAutoHeight] = "true" 看看这个plunker。 plnkr.co/edit/U38afajrk1f57ZOlS4Ns?p=preview。第一个网格有固定的标题，其中gridAutoHeight 被删除，除了来自您的 sn-p 的所有其他属性。而 second 包含所有属性。

@Nik ：上面的 CSS 已经很粘人了，但它对 ag-grid 的调整大小功能没有响应。删除 [gridAutoHeight] = "true" 不会解决问题。

你使用的 this.totalGridWidth 的值是多少？

【参考方案1】：

试试下面的代码：

<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>