GWT 单元列表；元素选项之间的编程滚动

Question

我想了解可用于滚动到 CellList 中特定元素的选项？目前，我的列表中有 100 个元素，需要通过单击按钮“跳转”元素，但似乎无法在单元列表（或代码中）中找到提供此功能的任何方法。

有什么想法吗？

非常感谢，

伊恩。

**编辑

下面的工作代码示例；

public class CellListTest implements EntryPoint {

private CellList<String> cellList;
private SingleSelectionModel<String> stringSingleSelectionModel;

/**
 * This is the entry point method.
 */
public void onModuleLoad() {
    cellList = new CellList<String>(new TextCell());
    cellList.setRowData(buildStringList(200));


    cellList.setKeyboardSelectionPolicy(HasKeyboardSelectionPolicy.KeyboardSelectionPolicy.BOUND_TO_SELECTION);

    Button byTen = new Button("Jump Forward 10");
    stringSingleSelectionModel = new SingleSelectionModel<String>();
    cellList.setSelectionModel(stringSingleSelectionModel);
    byTen.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
            jumpForward(10);
        }
    });
    byTen.setHeight("30px");
    HTMLPanel htmlPanel = new HTMLPanel("");
    VerticalPanel verticalPanel = new VerticalPanel();
    cellList.setHeight("600px");
    ScrollPanel scrollPanel = new ScrollPanel(cellList);
    verticalPanel.add(byTen);
    verticalPanel.add(scrollPanel);
    htmlPanel.add(verticalPanel);
   RootLayoutPanel.get().add(htmlPanel);
}

final Random random = new Random();
private List<String> buildStringList(int numberToCreate) {
    final ArrayList<String> randomValues = new ArrayList<String>();
    for (int i = 0; i < numberToCreate; i++) {
        randomValues.add(String.valueOf(random.nextInt()));
    }
    return randomValues;
}

private int currentPosition = 0;
private void jumpForward(int toJump) {
    Element rowElement = cellList.getRowElement(currentPosition += toJump);
    rowElement.scrollIntoView();
}

}

Answer 1

我认为 CellList 没有适合您目的的直接方法。

您可以做的是使用 Element 的 scrollIntoView< /a> 方法。该方法调整每个可滚动元素的scrollLeft和scrollTop属性，以确保指定的元素完全在视图中。为了使用该方法，您需要获取包含要显示的单元格的元素。实现此目的的一种方法是使用 CellList public getRowElement(int indexOnPage)。

我还没有尝试过，但我相信下面的代码应该可以工作：

//Ensures cell 22 on page is shown
Element element = myCellList.getRowElement(22);
element.scrollIntoView();

Answer 2

将元素滚动到视图中是一回事；将元素滚动到视图中是一回事；将元素滚动到视图中是一回事。将键盘焦点更改为特定元素是另一回事。经过多次探索，我发现实现这一目标的最佳方法是触发本机事件来模拟用户按键。

private void hitKeyOnList(int keyCode) {
  NativeEvent keyDownEvent = Document.get().createKeyDownEvent(
    false, false, false, false, keyCode);
  list.getElement().dispatchEvent(keyDownEvent);
}

在上面的代码片段中，list 变量是对 CellList 的引用。

因此，要将光标移动到列表末尾，请执行以下操作：

hitKeyOnList(KeyCodes.KEY_END);

将光标移动到当前具有键盘焦点的项目的下一项：

hitKeyOnList(KeyCodes.KEY_DOWN);

此方法应该适用于所有这些键，这些键由 AbstractHasData：

KeyCodes.KEY_DOWN
KeyCodes.KEY_UP
KeyCodes.KEY_PAGEDOWN
KeyCodes.KEY_PAGEUP
KeyCodes.KEY_HOME
KeyCodes.KEY_END