Javascript ag网格：滚动时将标题保持在顶部

在滚动ag网格div时，我不能将表头放在div的顶部。是否有一个特定的ag类可用于获取此数据

谢谢

编辑：

代码如下：

HTML:

出于业务原因，我在表定义中省略了以下选项

---

CSS中的ag-header类尚未修改。

已解决：我需要向div添加height属性

---

谢谢大家

解决了：我需要向div添加height属性

---

谢谢大家

我希望表格中的标题始终可见，即使您像这样在窗口中向下滚动。不确定这是否是OP想要的，但这是我的解决方案

首先，需要获取表的header元素和body元素

header=document.querySelector（'[ref=“headerRoot”]'）；
body=document.querySelector（'[ref=“eBodyViewport”]'）；
//稍后将对此进行详细介绍
original.position=header.style.position；
original.top=header.style.top；
original.zIndex=header.style.zIndex；

将滚动处理程序添加到

窗口

对象，该对象将在用户每次滚动时执行下面的逻辑

window.addEventListener（“滚动”（（）=>{
//更多关于这一点，请参见下文
})

逻辑很简单。它使收割台粘不粘取决于其位置

const shouldStick=header.getBoundingClientRect（）.top 0；
if（shouldStick）{stick（header）；}
if（shouldlunstick）{unstick（header）；}

最后添加一些css样式，使其固定在窗口顶部

功能斗杆（收割台）{
header.style.position=“固定”；
header.style.top=“0”；
//这是可选的，但如果有其他内容与
//收割台您可能需要相应地调整zIndex
header.style.zIndex=“2”；
}
函数取消单击（标题）{
header.style.position=原始位置；
header.style.top=original.top；
header.style.zIndex=original.zIndex；
}

下面是React中的示例实现。您只需复制此挂钩并将其粘贴到组件的渲染方法中。就这样

从“react”导入{useCallback，useRef，useffect}；
const useStickyHeader=（）=>{
const headerElementRef=useRef（）；
const bodyElementRef=useRef（）；
const stickyRef=useRef（false）；
const originalStyles=useRef（{position:，top:，zIndex:}）；
useffect（（）=>{
headerElementRef.current=document.querySelector（'[ref=“headerRoot”]'）；
bodyElementRef.current=document.querySelector（'[ref=“eBodyViewport”]'）；
const header=headerElementRef.current；
originalStyles.current.position=header.style.position；
originalStyles.current.top=header.style.top；
originalStyles.current.zIndex=header.style.zIndex；
}, []);
const onScroll=useCallback（（）=>{
const header=headerElementRef.current；
const body=bodyElementRef.current；
如果（！header | |！body）返回；
让shouldStick=false；
let shouldUnstick=错误；
如果（！stickyRef.current）{
shouldStick=header.getBoundingClientRect（）.top
0;
如果（应取消单击）stickyRef.current=false；
}
如果（应该坚持）{
header.style.position=“固定”；
header.style.top=“0”；
//这是可选的，但如果有其他内容与
//标题您可能需要相应地调整zIndex
header.style.zIndex=“2”；
}
如果（应取消单击）{
const original=originalStyles.current；
header.style.position=原始位置；
header.style.top=original.top；
header.style.zIndex=original.zIndex；
}
}, []);
useffect（（）=>{
window.addEventListener（“滚动”，onScroll）；
return（）=>window.removeEventListener（“滚动”，onScroll）；
});
返回stickyRef；
};

用法

函数GridExample（）{
useStickyHeader（）；
返回(
我希望我的表格中的标题始终可见，即使您在窗口中向下滚动也是如此。不确定这是否是OP想要的，但这是我的解决方案


首先，需要获取表的header元素和body元素

header=document.querySelector（'[ref=“headerRoot”]'）；
body=document.querySelector（'[ref=“eBodyViewport”]'）；
//稍后将对此进行详细介绍
original.position=header.style.position；
original.top=header.style.top；
original.zIndex=header.style.zIndex；

将滚动处理程序添加到
窗口
对象，该对象将在用户每次滚动时执行下面的逻辑

window.addEventListener（“滚动”（（）=>{
//更多关于这一点，请参见下文
})

这个逻辑很简单，它使报头粘不粘取决于它的位置

const shouldStick=header.getBoundingClientRect（）.top 0；
if（shouldStick）{stick（header）；}
if（shouldlunstick）{unstick（header）；}

最后添加一些css样式，使其固定在窗口顶部

功能斗杆（收割台）{
header.style.position=“固定”；
header.style.top=“0”；
//这是可选的，但如果有其他内容与
//收割台您可能需要相应地调整zIndex
header.style.zIndex=“2”；
}
函数取消单击（标题）{
header.style.position=原始位置；
header.style.top=original.top；
header.style.zIndex=original.zIndex；
}

下面是React中的示例实现。您只需复制此钩子并将其粘贴到组件的render方法中即可

从“react”导入{useCallback，useRef，useffect}；
const useStickyHeader=（）=>{
const headerElementRef=useRef（）；
const bodyElementRef=useRef（）；
const stickyRef=useRef（false）；
const originalStyles=useRef（{position:，top:，zIndex:}）；
useffect（（）=>{
headerElementRef.current=document.querySelector（'[ref=“headerRoot”]'）；
bodyElementRef.current=document.querySelector（'[ref=“eBodyViewport”]'）；
常数头=头
<md-tab ng-repeat="tab in mbpTabs"> 
        <md-tab-label>{{tab.title}}</md-tab-label>  
        <md-tab-body>
            <div ag-grid="tab.mbpTable.table" class="ag-dark ag-scrolls"></div>
        </md-tab-body> 
    </md-tab> 

this.cols = [{headerName: "Security",marryChildren: true,
    children: [{headerName: "CTRL", field: this.FIELD_KEY_CTRL,hide: true,cellRenderer: MbpTable.prototype.ctrlRenderer.bind(this)},
               {headerName: "Id", field: this.FIELD_KEY_ID,width: 0,hide: true},
               {headerName: "Issuer", field: this.FIELD_KEY_ISSUER,width: 100},
               {headerName: "Cusip", field: this.FIELD_KEY_CUSIP,width: 80,},
               {headerName: "Board Label", field: this.FIELD_KEY_BOARD_LABEL,width: 150}]
},
{headerName: 'Best',marryChildren: true,
    children: [{headerName: "Bid Size", field: this.FIELD_KEY_BEST_BID_SIZE, width: 125,cellClass:"mbp-ag-cell-best-bid",cellRenderer: MbpTable.prototype.szPriceRenderer.bind(this)},
               {headerName: "Bid Price", field: this.FIELD_KEY_BEST_BID_PRICE, width: 125,cellClass:"mbp-ag-cell-best-bid",cellRenderer: MbpTable.prototype.szPriceRenderer.bind(this)},
               {headerName: "Ask Price", field: this.FIELD_KEY_BEST_ASK_PRICE, width: 125,cellClass:"mbp-ag-cell-best-ask",cellRenderer: MbpTable.prototype.szPriceRenderer.bind(this)},
               {headerName: "Ask Size", field: this.FIELD_KEY_BEST_ASK_SIZE, width: 125,cellClass:"mbp-ag-cell-best-ask",cellRenderer: MbpTable.prototype.szPriceRenderer.bind(this)}]
},
{headerName: this.headerMyOrder,marryChildren: true,
    children: [{headerName: "Bid Size", field: this.FIELD_KEY_ORDER_BID_SIZE, width: 80,cellClass:"mbp-ag-cell-order",editable: true,cellRenderer: MbpTable.prototype.bidOrderRenderer.bind(this),cellEditor: "text",newValueHandler: MbpTable.prototype.sizeValueHandler.bind(this)},
               {headerName: "Bid Price", field: this.FIELD_KEY_ORDER_BID_PRICE, width: 80,cellClass:"mbp-ag-cell-order",editable: true,cellRenderer: MbpTable.prototype.bidOrderRenderer.bind(this),cellEditor: "text",newValueHandler: MbpTable.prototype.priceValueHandler.bind(this)},//cellEditor: NumericCellEditor},
               {headerName: "",headerCellTemplate:this.headerMyBidOrder, field: this.FIELD_KEY_ORDER_BID_ACTION,minWidth:18,maxWidth:18,width:18,cellClass:["mbp-ag-cell-order","mbp-ag-cell-order-action"],cellRenderer: MbpTable.prototype.bidOrderRenderer.bind(this)},
               {headerName: "Ask Price", field: this.FIELD_KEY_ORDER_ASK_PRICE, width: 80,cellClass:"mbp-ag-cell-order",editable: true,cellRenderer: MbpTable.prototype.askOrderRenderer.bind(this),cellEditor: "text",newValueHandler: MbpTable.prototype.priceValueHandler.bind(this)},//cellEditor: NumericCellEditor},
               {headerName: "Ask Size", field: this.FIELD_KEY_ORDER_ASK_SIZE, width: 80,cellClass:"mbp-ag-cell-order",editable: true,cellRenderer: MbpTable.prototype.askOrderRenderer.bind(this),cellEditor: "text",newValueHandler: MbpTable.prototype.sizeValueHandler.bind(this)},
               {headerName: "",headerCellTemplate:this.headerMyAskOrder, field: this.FIELD_KEY_ORDER_ASK_ACTION,minWidth:18,maxWidth:18,width:18,cellClass:["mbp-ag-cell-order","mbp-ag-cell-order-action"],cellRenderer: MbpTable.prototype.askOrderRenderer.bind(this)}]}];



    this.table={
        columnDefs: this.cols,
        rowData: MbpTable.prototype.createRndRows(numRows,offset,this),
        rowSelection: 'multiple',
        enableColResize: true,
        enableSorting: true,
        enableFilter: true,
        groupHeaders: true,
        ...
};

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';
  }