滚动时跨行无法正常工作

Question

我对网站给出的例子做了一些修改：

具体来说，我添加了以下内容：

} else if (athlete === "Jenny Thompson") {
        return 500;
...

cellClassRules: { "cell-span": "value==='Jenny Thompson' || value==='Aleksey Nemov' || value==='Ryan Lochte'" },

乍一看，'Jenny Thompson' 似乎跨度正确。但是，当您再滚动一点时，跨越就会停止。但是，如果您单击 'Jenny Thompson' 并滚动，则跨越会继续到第 500 个单元格。

Answer 1

问题是当您向下滚动时，之前的行被删除并被新行替换。因此，删除了 rowSpan。我为此做了一个解决方法。

在 rowData 中，我添加了这些新属性：rowSpan-<index> 和 grpSpan-<index>。 rowSpan-<index> 将指示单元格跨越多少行。我必须计算主组单元格下其他行的行跨度。例如，我的单元格跨越 50 行。因此，它的行跨度为 50。它下面的单元格的行跨度为 49，下一个单元格的行跨度为 48，依此类推。这样当上面的行从视口中移除时，新单元格仍然知道它需要跨越多少行。这些其他单元格的行跨度小于主单元格（本例中为 50），将有另一个属性 grpSpan-<index>。这只是为了确定他们是主要群体的一部分。顺便说一下，index 是列索引。

然后我将下面的属性添加到columnDefs：

    column['rowSpan'] = (params) => {
      return params.data[`rowSpan-<index>`] ? params.data[`rowSpan-<index>`] : 1;
    };
    column['cellClassRules'] = {
      'cell-span': (params) => {
        return params.data[`rowSpan-<index>`] ? true : false;
      },
      'cell-group': 'true',
      'cont-span': (params) => {
        return params.data[`grpSpan-<index>`] ? true : false;
      }
    };

在css中：

.cell-span {
  border-bottom: 1px solid #d9dcde !important;
}

.cell-group {
  background: white;
}

.cont-span {
  color: white;
}

我希望这能帮助其他人解决这个问题。

滚动时跨行无法正常工作

Row spanning not working properly when you scroll

ag-grid