根据中心主体中的滚动事件更新固定列样式

Question

https://plnkr.co/edit/ScBxEoxRPV83AE4g

每当固定列样式与居中显示列组“重叠”时，我都会尝试更新它们。对于左侧固定列，这很简单，只需检查 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/ScBxEoxRPV83AE4g

Answer 1

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

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

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

关于满足固定行样式的条件，您可以将回调传递给cellStyle，它从网格接收参数，包括rowNode（网格保存行状态信息的位置）和行数据对象（所有行中的值）。

请注意，行对象中还有一个 rowPinned 属性，您可以使用它来识别左、右、上、下固定行。 链接到文档 - React Data Grid：行对象（又名行节点） - https://www.ag-grid.com/react-data-grid/row-object/

我在单元格样式中添加了一些随机条件。 请参阅下面的代码示例。

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