gwt-celltable - GWT 中的嵌套网格

Question

我需要开发一个类似于 Smart GWT 中的嵌套网格的控件。

用户将有一个用于扩展图像的列，当用户单击特定行中的图像时，必须在其中打开一个子网格。这里所有剩余的行都需要向下移动。

我怎样才能实现该功能？任何人都可以给我一些线索，以便我可以继续。

我已经有一个网格，它是一个带有自定义标题的单元格表（实现了搜索功能）。

谢谢，萨丽莎。

Answer 1

创建要显示的嵌套小部件 (myNestedWidget)。它应该有一个 CSS 样式“位置：绝对”，除非您的网格被添加到 LayoutPanel（或类似的），在这种情况下，您可以直接定位您的小部件。让我们调用您的网格 gridParentWidget 的父小部件。

在您的 CellTable 中添加以下处理程序：

myTable.addCellPreviewHandler(new Handler<myObject>() {
    @Override
    public void onCellPreview(CellPreviewEvent<myObject> event) {
        if ("click".equals(event.getNativeEvent().getType())) {
            if (event.getColumn() == 0) {
                int top = myTable.getRowElement(event.getIndex()).getAbsoluteBottom();
                int left = myTable.getRowElement(event.getIndex()).getAbsoluteLeft();
                myNestedWidget.getElement().getStyle().setTop(top, Unit.PX);
                myNestedWidget.getElement().getStyle().setLeft(left, Unit.PX);
                gridParentWidget.add(myNestedWidget);

                Scheduler.get().scheduleDeferred(new ScheduledCommand() {
                    @Override
                    public void execute() {
                        int height = myNestedWidget.getOffsetHeight();
                        myTable.getRowElement(event.getIndex()).getStyle().setHeight(height + "px");
                    ]
                });
            }
        }
    });
}

这显然是解决方案的概要。实现的细节可能会略有不同，具体取决于您用于父小部件和嵌套小部件的小部件。如果您在某处更改 z-index，您也必须将其考虑在内。您还需要确保嵌套小部件适合网格的宽度，或者您需要将其包装在 ScrollPanel 中并显式为其设置宽度。