选择项目时 GWT 2.4 DataGrid 自动滚动答案

【问题标题】：GWT 2.4 DataGrid automatic scrolling when selecting an item选择项目时 GWT 2.4 DataGrid 自动滚动
【发布时间】：2011-11-26 19:39:52
【问题描述】：

我在一个项目中使用 GWT 2.4 的新 DataGrid。我将 DataGrid 配置为页面大小为 50。
可用屏幕不够大，无法显示所有项目，因此会显示一个垂直滚动条（这实际上是首先使用 DataGrid 的主要目的）。
我将 SingleSelectionModel 附加到 DataGrid 以便能够选择项目。
到目前为止，这工作正常。

不过，我还有另一个用户可以与之交互的小部件。根据该用户操作，应选择 DataGrid 中的一项。
有时所选项目不在可见屏幕区域中，用户必须在 DataGrid 中向下滚动才能看到它。
有什么方法可以自动或手动向下滚动，使所选项目可见？
我检查了 DataGrid 的 JavaDocs 并没有找到合适的方法或函数。

【问题讨论】：

标签： gwt datagrid vertical-scrolling

【解决方案1】：

不知道这是否有效，但您可以尝试获取用于选择的行元素并使用 scrollIntoView 方法。

示例代码：

dataGrid.getRowElement(INDEX_OF_SELECTED_ITEM).scrollIntoView();

【讨论】：

感谢您的建议。这很好用。这是完整的代码：dataGrid.getRowElement(dataGrid.getVisibleItems().indexOf(MyObject)).scrollIntoView();

【解决方案2】：

上面的答案效果很好，但如果网格比你的窗口宽并且有一个水平滚动条，它也会一直滚动到右边，这很烦人。通过获取所选行中的第一个单元格然后让它滚动到视图中，我能够让它向下滚动并保持向左滚动。

dataGrid.getRowElement(dataGrid.getVisibleItems().indexOf(object)).getCells().getItem(0).scrollIntoView();

【讨论】：

【解决方案3】：

没有时间尝试，但 DataGrid 实现了 HasRows 接口，而 HasRows 有一个名为 setVisibleRange 的方法。您只需要找出您想要关注的项目的行号，然后将可见范围从该数字设置为 n 到 n+50。这样，DataGrid 将重置以将该项目放在顶部（或者如果它位于支持 DataGrid 的列表的最后 50 个元素中，则靠近顶部）。不要忘记重绘您的 DataGrid。

你已经看过这个了吗？如果是这样，我会很惊讶它不起作用。

哦，由于这是一个小部件与另一个小部件对话，您可能设置了一些消息传递和一些消息处理程序，以便当用户与第二个小部件交互并“选择”项目时，消息会在 EventBus 上触发并该消息的处理程序按照我所描述的方式修复了 DataGrid。我认为您必须自己进行此接线。

【讨论】：

感谢您的建议。我确实在另一个 CellTable 中实现了类似的东西，在那里我计算了 CellTable 的高度，这样我就不会得到任何滚动条。然而，我切换到 DataGrid 的原因是能够滚动。你的建议当然会奏效。但是，我想避免重新绘制显示的初始信息，这些信息不会通过选择项目而改变。交互是通过 Presenter 完成的（我使用的是 GWTP）。两个小部件都在视图中，并且通信正常。

【解决方案4】：

我的解决方案，稍微好一点：

dataGrid.getRow(model).scrollIntoView();

【讨论】：

【解决方案5】：

我在执行上述操作时遇到了超出范围的异常。

我解决了它在 DataGrid 中获取 ScrollPanel 并在 ScrollPanel 上使用了 .scrollToTop() 等。但是，要访问 DataGrid 中的 ScrollPanel，我必须使用以下注释： http://code.google.com/p/google-web-toolkit/issues/detail?id=6865

【讨论】：

【解决方案6】：

正如 Kem 指出的，在 scrollIntoView 之后的“scrollToRight”效果很烦人。在我之后，Kem 的解决方案提供了比基本解决方案更好的行为，因为通常表中的第一列更有意义。我改进了一点他的方法，通过在应用滚动然后滚动到它之前计算左侧的第一个可见列，水平滚动到我们想要可见的行的第一列。

最后一点：绝对左侧的列是针对“51”进行测试的。这是我通过查看浏览器开发者工具中的 JS 值“实验”发现的一个值，我认为这取决于表格的样式，您可能需要更改/计算它。

代码下方：

public void scrollIntoView(T next) {
        int index = datagrid.getVisibleItems().indexOf(next);
        NodeList<TableCellElement> cells = datagrid.getRowElement(index).getCells();
        int firstVisibleIndex = -1;
        for(int i=0; i<cells.getLength() && firstVisibleIndex<0;i++)
            if(UIObject.isVisible(cells.getItem(i)) && (cells.getItem(i).getAbsoluteLeft() > 51) && (cells.getItem(i).getAbsoluteTop() > 0))
                firstVisibleIndex = i;

        cells.getItem(firstVisibleIndex>=0? firstVisibleIndex : 0).scrollIntoView();
}

【讨论】：