Вложенная сетка в GWT

Question

Мне нужно разработать элемент управления, который похож на Nested Grid в Smart GWT.

У пользователя будет столбец для расширенных изображений, когда пользователь нажимает на изображение в определенной строке, там должна быть открыта подсетка. Здесь все остальные ряды должны двигаться вниз.

Как я могу достичь этой функциональности? Кто-нибудь может дать мне несколько подсказок, чтобы я мог продолжить.

У меня уже есть сетка, которая представляет собой ячейку с настраиваемым заголовком (с реализованной функцией поиска).

Спасибо, Сарита.

Answer 1

Создайте свой вложенный виджет (myNestedWidget), который вы хотите показать. Он должен иметь стиль CSS "position: absolute", если только ваша сетка не добавлена ​​в 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-индексы, вы должны это учитывать. Вы также должны убедиться, что ваш вложенный виджет вписывается в ширину вашей сетки, или вам нужно будет обернуть его в ScrollPanel и установить ширину для него явно.