Question

我在网站上的给定示例中进行了一些修改：

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

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

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

乍一看，似乎“詹妮·汤普森”的跨度适当。但是，当您进一步滚动一点时，跨度会停止。但是，如果您单击“詹妮·汤普森”并滚动，则跨度将持续到第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;
}

我希望这可以帮助其他在此问题上苦苦挣扎的人。

滚动时行跨越无法正常工作

1 个答案: