Question

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

但是我还有另一个用户可以与之交互的小部件。根据该用户操作，应选择 DataGrid 中的项目有时，所选项目不在可见屏幕区域，用户必须在DataGrid中向下滚动才能看到它有没有办法自动或手动向下滚动，以便所选项目可见？我检查了DataGrid的JavaDocs，发现没有适当的方法或功能。

Answer 1

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

示例代码：

dataGrid.getRowElement(INDEX_OF_SELECTED_ITEM).scrollIntoView();

Answer 2

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

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

Answer 3

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

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

哦，因为这是一个与另一个小部件交谈的小部件，你可能有一些消息设置和一些消息处理程序，这样当用户与第二个小部件交互并“选择”该项时，消息将在EventBus上触发，该消息的处理程序沿着我描述的行修复了DataGrid。我想你必须自己做这个布线。

Answer 4

我的解决方案，好一点：

dataGrid.getRow(model).scrollIntoView();

Answer 5

我在上面做了一个Out of bounds异常。

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

Answer 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();
}

GWT 2.4 DataGrid在选择项目时自动滚动

6 个答案: