Question

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

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

我曾尝试过多种方法来解决这个问题，但我找不到一种能够按照我想要的方式运作的解决方案。

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

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

我在网上搜索了这个，看起来我是唯一一个有这个问题的人。我错过了什么？

Answer 1

我有同样的问题，我发现如果dataGrid有错误就会发生 keyboardSelectionPolicy = n＃34; BOUND_TO_SELECTION n＃34;

Answer 2

如果使用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;
        }
    }

填写DataGrid：

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



    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：

此私有方法用于构建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不会滚动。

删除GWT Datagrid中的行而不滚动到网格的顶部

2 个答案:

DataGrid行的类：

填写DataGrid：

构建DataGrid：