ag-grid：滚动时将标题保持在顶部答案

【问题标题】：ag-grid: keep header on top while scrollingag-grid：滚动时将标题保持在顶部
【发布时间】：2021-07-20 01:37:09
【问题描述】：

滚动 ag-grid div 时，我无法将表头保留在 div 顶部。是否有特定的农业类可用于获取此信息？

谢谢

编辑：

有代码：

HTML：

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

JS 网格定义如下：

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,
        ...
};

出于商业原因，我在此处省略了表定义中的以下选项。

CSS 中的ag-header 类没有被修改。

【问题讨论】：

我们需要查看您的代码以提供帮助...另外请查看 ag-grid 的 section 讨论宽度和高度的内容。
请附上您目前拥有的代码 sn-p
默认情况下标题应保持在顶部 - 事实上，它滚动到屏幕外的唯一方法是滚动整个页面，而不仅仅是网格中的数据。正如这里的其他人所说，您可能需要提供一个示例
你的问题很模糊。您是否在遇到问题的表格上方放置了一些额外的标题？还是您在谈论 column 标题？垂直滚动有问题吗？还是水平滚动？
您能否为 ag 网格设置一个粘性标题？

标签： javascript ag-grid

【解决方案1】：

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

首先需要获取表格的表头元素和正文元素

header = document.querySelector('[ref="headerRoot"]');
body = document.querySelector('[ref="eBodyViewport"]');

// More on this later
original.position = header.style.position;
original.top = header.style.top;
original.zIndex = header.style.zIndex;

为window 对象添加一个滚动处理程序，每次用户滚动时都会执行下面的逻辑

window.addEventListener("scroll", () => {
  // More on this below
})

逻辑很简单。它使标题是否粘滞取决于其位置

const shouldStick = header.getBoundingClientRect().top <= 0;
const shouldUnstick = body.getBoundingClientRect().top -
    header.getBoundingClientRect().height > 0;

if (shouldStick) { stick(header); }
if (shouldUnstick) { unstick(header); }

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

function stick(header) {
  header.style.position = "fixed";
  header.style.top = "0";
  // this is optional, but if you have other contents that overlap the
  // header you may want to adjust the zIndex accordingly
  header.style.zIndex = "2";
}

function unstick(header) {
  header.style.position = original.position;
  header.style.top = original.top;
  header.style.zIndex = original.zIndex;
}

这是 React 中的示例实现。您需要做的就是复制这个钩子并将其粘贴到组件的渲染方法中。就是这样。

import { useCallback, useRef, useEffect } from "react";

const useStickyHeader = () => {
  const headerElementRef = useRef();
  const bodyElementRef = useRef();
  const stickyRef = useRef(false);
  const originalStyles = useRef({ position: "", top: "", zIndex: "" });

  useEffect(() => {
    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;
    if (!header || !body) return;

    let shouldStick = false;
    let shouldUnstick = false;

    if (!stickyRef.current) {
      shouldStick = header.getBoundingClientRect().top <= 0;
      if (shouldStick) stickyRef.current = true;
    } else {
      shouldUnstick =
        body.getBoundingClientRect().top -
          header.getBoundingClientRect().height >
        0;
      if (shouldUnstick) stickyRef.current = false;
    }

    if (shouldStick) {
      header.style.position = "fixed";
      header.style.top = "0";
      // this is optional, but if you have other contents that overlap the
      // header you may want to adjust zIndex accordingly
      header.style.zIndex = "2";
    }
    if (shouldUnstick) {
      const original = originalStyles.current;
      header.style.position = original.position;
      header.style.top = original.top;
      header.style.zIndex = original.zIndex;
    }
  }, []);

  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  });

  return stickyRef;
};

用法

function GridExample() {
  useStickyHeader();

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <div className="grid-wrapper">
        <div
          style={{
            height: "100%",
            width: "100%"
          }}
          className="ag-theme-balham"
        >
          <AgGridReact
            ...
          />
        </div>
      </div>
    </div>
  );
}

现场示例

【讨论】：

【解决方案2】：

简单的技巧是为 rows 容器添加 css。

.ag-body-viewport {
    overflow: scroll;
    height: 300px;
}

相应地更新高度或宽度。

【讨论】：

【解决方案3】：

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

}

【讨论】：

【解决方案4】：

已解决：我需要将高度属性添加到 div。

谢谢大家

【讨论】：

抱歉不清楚。你在哪里添加高度属性？
-1 您的回答确实回答了您的问题，但对其他人没有帮助。什么div？有很多 div。哪个必须有高度。什么是高价值？
看起来 ag-grid 的容器 div 需要一个高度。