Question

如何使Ag网格标头粘性标头在角度6中保持粘性？这应该与调整大小功能一起使用吗？

我尝试了没有排序和过滤器选项的粘性标头AG网格？我希望它具有调整大小选项功能的响应能力？

HTml：

<div class="table-responsive">
  <ag-grid-angular style="margin-top:10px;" 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>

打字稿代码：


this.columnDefs = [
  { headerName: 'ID',
    field: 'Id',
    rowDrag: true,
    hide: true
  },
  { filter: 'agTextColumnFilter',
    headerName: 'Name',
    field: 'Name',
    rowDrag: true,
    cellClass: "cell-wrap-text",
    autoHeight: true
  },
  { filter: 'agTextColumnFilter',
    headerName: 'Designation',
    field: 'Designation',
    rowDrag: true,
    cellClass: "cell-wrap-text",
    autoHeight: true 
  },
  { filter: 'agTextColumnFilter',
    headerName: 'Broker',
    field: 'Broker',
    width: 100,
    cellClass: 'cell-wrap-text',
    autoHeight: true
  }];

自动高度的CSS：

.cell-wrap-text {
  white-space: normal !important;
}

用于粘贴标头的CSS：

.sticky_header.table-responsive {
  overflow: hidden !important;
}

.sticky_header .ag-theme-balham .ag-header-row {
  position: fixed;
  top: 270px !important;
  overflow: hidden !important;
}

.sticky_header .ag-header-container {
  z-index: 9999999;
  overflow: hidden !important;
}

.ag-body-viewport-wrapper {
  display: block;
  height: 200px !important;
  overflow-y: auto !important;
}

预期：它应该响应ag网格中的调整大小功能。

实际：它具有粘性，但无法通过调整大小功能进行响应。

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

如何使AG网格标头具有粘性并具有调整大小功能？

1 个答案: