3

我有一个数据网格，每页可以显示很多行。假设我每页显示 25 行。然而，网格的可视区域只有 10 行。即整个网格只有400px，每行40px。所以网格上有一个滚动条。

当我删除网格中的单行时，网格会自动移动到网格中的第一行。如果我滚动了底部并删除了最后一行，我将再次移动到第一行。

我尝试了几种方法来解决这个问题，但我找不到一个可以按照我想要的方式工作的解决方案。

我尝试使用 scrollIntoView() 方法将已删除行之前或之后的行直接滚动到视图中。

我已经尝试弄清楚如何确定删除之前哪些行在可见范围内，但是 getVisibleRange() 方法与页面范围相关，而不是实际显示的范围。

我已经在网上搜索过这个问题，似乎我是唯一一个遇到这个问题的人。我错过了什么？

4

2 回答 2

2

我有同样的问题，我发现如果 dataGrid 有 keyboardSelectionPolicy="BOUND_TO_SELECTION"

于 2014-05-03T21:02:02.117 回答
0

如果您使用ListDataProvider来管理 DataGrid 的数据，那么在删除/添加项目时，DataGrid 将不会滚动。

这是一个在不滚动的情况下删除网格行的最小示例（全部包含在入口点类中）：

DataGrid 行的类：



    private class Item{
        public String text;
        public int value;
        public Item(String text, int value){
            this.text = text;
            this.value = value;
        }
    }

填充数据网格：

这里我使用一个私有变量 ,data来保存 DataGrid 的项目。请注意，我们必须通过该方法附加dataGrid到。dataaddDataDisplay



    ListDataProvider data;
    public void onModuleLoad() {
        // build grid:
        DataGrid dataGrid = new DataGrid();
        BuildColumns(dataGrid);
        dataGrid.setWidth("300px");
        dataGrid.setHeight("300px");
        // add items:
        data = new ListDataProvider();
        for(int i = 1; i < 25; i++){
            data.getList().add(new Item("Item " + i, i));
        }
        data.addDataDisplay(dataGrid);
        // display:
        RootPanel.get().add(dataGrid);
    }

构建数据网格：

此私有方法用于构建 DataGrid 的列。delCol在用于侦听按钮列的单击事件的 FieldUpdater 内部，我们从 中删除相应的项目data，并调用data.refresh()以更新 DataGrid 显示。



    private void BuildColumns(DataGrid dataGrid){
       Column textCol = new Column(new SafeHtmlCell()) {
            @Override
            public SafeHtml getValue(Item object) {
                    SafeHtmlBuilder sb = new SafeHtmlBuilder();
                sb.appendEscaped(object.text);
                    return sb.toSafeHtml();
            }
        };
        dataGrid.addColumn(textCol);
        dataGrid.setColumnWidth(textCol, 75, Unit.PCT);

        Column deleteCol = new Column(new ButtonCell()) {
            @Override
            public String getValue(Item object) {
                return "Delete " + object.value;
            }
        };
        deleteCol.setFieldUpdater(new FieldUpdater() {

            @Override
            public void update(int index, Item object, String value) {
                data.getList().remove(index);
                data.refresh();
            }
        });
        dataGrid.addColumn(deleteCol);
    }

我将此代码放在一个新的 GWT 项目中并对其进行了测试。删除行时 DataGrid 不滚动。

于 2013-05-10T23:02:55.437 回答