带有 GridCell 导航屏幕的 ui Grid 在单击和聚焦时跳转答案

【问题标题】：uiGrid with uiGridCellNav screen jumps on click and focus带有 GridCell 导航屏幕的 ui Grid 在单击和聚焦时跳转
【发布时间】：2016-02-09 02:35:37
【问题描述】：

我有一个使用 ui-grid-cellNav 的 uiGrid，它提供单击编辑字段。如果屏幕顶部有空间使得网格不在顶部，单击将导致页面跳转到顶部。此外，发生这种情况后，网格上方的任何按钮都会停止响应第一次单击的单击。要查看行为，请打开 PLNKR 并单击第一个标记为“1”的单元格。屏幕将跳转滚动，使网格位于屏幕顶部。现在滚动屏幕，以便您可以看到“取消”按钮并单击它。屏幕将跳回网格。再次向上滚动并单击取消，现在该按钮将起作用。

这是一个 plnkr https://plnkr.co/edit/OVNUeaGqTAoJqdZvqmQ8?p=preview

我推断出大于 gridOptions 中默认值的 rowHeight 是原因。

rowHeight: 87

如果您注释掉 rowHeight 选项，则不会发生这种情况。我一直在调试 uiGridCellNav 代码，这似乎是由 focus.byElement 函数中的某些东西引起的，但据我所知。

【问题讨论】：

实际上您需要单击“所有者”列才能使取消按钮行为停止工作。单击不可编辑的字段只会导致页面跳转。另请注意，这似乎与在一行上处于编辑模式，然后单击另一行有关。

标签： javascript angularjs focus angular-ui-grid

【解决方案1】：

任何阻止页面滚动的网格高度都可以解决这个问题

.ccl-ui-grid {
  height: 350px !important; //random height that skips page scroll
  overflow: scroll;
}

我已经用一些随机高度编辑了你的 plunker，因此问题解决了https://plnkr.co/edit/VWR0qeVvmbmnQUaNpudD?p=preview

【讨论】：