html - 如何通过调整大小功能使 ag 网格标题具有粘性和响应性
问题描述
已解决:(100 % 使用 chrome 和 edge)(在 IE11 中,如果网格中没有水平滚动,它可以正常工作)
HTML:在 ag-grid-angular html 标记中的 gridAutoHeight = true
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>
推荐阅读
- r - 如何使用 R 将 gganimate 图与表(数据框)合并
- javascript - Javascript——如何将多个元素分配给一个对象?
- shopify - Shopify 购物车中的自定义相关产品 Ajax
- javascript - Javascript - 电子邮件验证不起作用
- reactjs - 在 redux 中更新状态
- c# - 如何使用数据集获取返回值形式的存储过程
- javascript - 如何从 VueJs 中的不同字段上传多个图像?
- python - 乌班图;Python3 - Textract 安装 - Ebooklib 和 pocketsphinx 的编解码器错误
- python - 安装 pyrcc4 时有什么指导吗?
- scala - Twitter 未来与猫箭