根据中心正文中的滚动事件更新固定列样式答案

【问题标题】：Updating pinned columns styles based on scroll events in center body根据中心正文中的滚动事件更新固定列样式
【发布时间】：2022-09-30 23:12:01
【问题描述】：

每当它们“重叠”居中的显示列组时，我都会尝试更新我的固定列样式。对于左侧固定列，这很简单，只需检查 onBodyScroll 事件e.left > 0。对于右固定列，这比较棘手，因为我看不到通过 ag-grid api/columnApi 确定正确偏移量的明确方法。我想可以在这里使用 refs，或者在ColumnModel 上使用私有值，但我想知道是否有更好的方法，可能使用 ag-grid 函数？

下面是一个如何完成的示例，但它在ColumnModel 上使用私有值。

  //...
  const [leftPinnedOverlaying, setLeftPinnedOverlaying] = useState(false);
  const [rightPinnedOverlaying, setRightPinnedOverlaying] = useState(true);
  const hasMounted = useRef(false);

  return (
    <div style={{ width: \'100%\', height: \'100%\' }}>
      <pre>
      {JSON.stringify({leftPinnedOverlaying,rightPinnedOverlaying})}
      </pre>

      <div className=\"example-wrapper\">        
        <div
          id=\"myGrid\"
          style={{
            height: \'100%\',
            width: \'100%\',
          }}
          className=\"ag-theme-alpine\"
        >
          <AgGridReact
            defaultColDef={{ resizable: true }}
            debug={true}
            rowData={rowData}
            onGridReady={onGridReady}
            onBodyScroll={(e)=> {
              // first pass seems to pass non-ideal state
              if(!hasMounted.current) {
                hasMounted.current=true
                return
              }
              setLeftPinnedOverlaying(e.left > 0);
              const columnModel = e.columnApi.columnModel;
              // Get around these properties being private by indexing via array
              const scrollWidth = columnModel[\"scrollWidth\"] || 0;
              const bodyWidth = columnModel[\"bodyWidth\"] || 0;

              setRightPinnedOverlaying((e.left+scrollWidth) < bodyWidth)

            }}
          >
            <AgGridColumn
              headerName=\"Athlete\"
              field=\"athlete\"
              width={150}
              pinned=\"left\"
              cellStyle={leftPinnedOverlaying ? {backgroundColor: \'blue\'}:{backgroundColor: \'white\'}}
            />
// ...
  </div>
 </div>
</div>)

https://plnkr.co/edit/PbPizespgodTZMRg

标签： ag-grid ag-grid-react

【解决方案1】：

我不清楚什么必须重叠，但我会假设必须满足某些条件。

我查看了您的代码，并注意到您正在使用旧语法在 react 中声明列定义。所以我希望你不介意我的多动症必须改变这一点:)

此外，关于标题名称 - 除非您计划使用与您的字段不同的标题名称，否则您不需要提供列标题属性。

关于满足固定行样式的条件，您可以通过回调到 单元格样式，它从网格接收参数，包括rowNode（网格保存行状态信息的地方）和行数据对象（行中的所有值）。

请注意还有一个行固定可用于标识的行对象中的属性 - 左侧、右侧、顶部和底部固定行。链接到文档 - React Data Grid: Row Object (aka Row Node) - https://www.ag-grid.com/react-data-grid/row-object/

我在 cellStyles 中添加了一些随机条件。请参阅下面的代码示例。

const columnDefs = useMemo(
    () => [
      {
        field: 'athlete',
        width: 150,
        pinned: 'left',
        cellStyle: (params) =>
          params.value.includes('el')
            ? { backgroundColor: 'blue' }
            : { backgroundColor: 'white' },
      },
      { field: 'country', width: 150 },
      { field: 'year', width: 90 },
      { field: 'date', width: 110 },
      { field: 'sport', width: 150 },
      { field: 'gold', width: 100 },
      { field: 'silver', width: 100 },
      { field: 'bronze', width: 100 },
      {
        field: 'total',
        width: 100,
        pinned: 'right',
        cellStyle: (params) =>
          params.rowIndex % 2 == 0
            ? { backgroundColor: 'blue' }
            : { backgroundColor: 'white' },
      },
    ],
    []
  );

这是网格组件。

  <AgGridReact
    defaultColDef={{ resizable: true }}
    rowData={rowData}
    columnDefs={columnDefs}
    onGridReady={onGridReady}
  ></AgGridReact>

这是您的代码示例已更新：https://plnkr.co/edit/n3Rum6YeOqHOngki

【讨论】：