GWT DataGrid中可扩展行的简单示例

Question

我正试图从自定义DataGrid示例中拔出所需的代码

来实现如上述示例所示的可扩展行(单击"show friends"单元格)，但是所提供的源代码非常臃肿，因此并不像看起来那么容易。

是否有人有更直接的例子如何实现数据网格上的可扩展行?

Answer 1

我遇到了和你一样的问题，并开发了以下解决方案:

POJO包含一行的所有必要信息，还包含可以打开的子行:

import java.util.List;
public class MyPojo {
    private String value;
    private List<MyPojo> children;
    public MyPojo(String value, List<MyPojo> children) {
        this.value = value;
        this.children = children;
    }
    public String getValue1() {
        return value;
    }
    public List<MyPojo> getChildren() {
        return children;
    }
}

现在是datagrid，它包含可以打开的行:

import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;
import com.google.gwt.cell.client.ClickableTextCell;
import com.google.gwt.cell.client.FieldUpdater;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.text.shared.AbstractSafeHtmlRenderer;
import com.google.gwt.text.shared.SafeHtmlRenderer;
import com.google.gwt.user.cellview.client.Column;
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.TextColumn;
public class MyGrid extends DataGrid<MyPojo> {
    private List<MyPojo> allRows = new ArrayList<>();
    private final Set<MyPojo> openedRows = new HashSet<MyPojo>();
    public MyGrid() {
        TextColumn<MyPojo> column1 = new TextColumn<MyPojo>() {
            @Override
            public String getValue(MyPojo object) {
                return object.getValue1();
            }
        };
        addColumn(column1, "Column1");
        SafeHtmlRenderer<String> anchorRenderer = new AbstractSafeHtmlRenderer<String>() {
            @Override
            public SafeHtml render(final String object) {
                if (!object.isEmpty()) {
                    SafeHtmlBuilder sb = new SafeHtmlBuilder();
                    sb.appendHtmlConstant("<a href="javascript:;">").appendEscaped(object)
                            .appendHtmlConstant("</a>");
                    return sb.toSafeHtml();
                }
                return null;
            }
        };
        Column<MyPojo, String> openRowColumn = new Column<MyPojo, String>(
                new ClickableTextCell(anchorRenderer)) {
            public String getValue(final MyPojo object) {
                if (object.getChildren() != null && object.getChildren().size() != 0) {
                    if (openedRows.contains(object)) {
                        return "Hide";
                    }
                    return "Open";
                } else {
                    return null;
                }
            }
        };
        addColumn(openRowColumn, "Open Column");
        openRowColumn.setFieldUpdater(new FieldUpdater<MyPojo, String>() {
            @Override
            public void update(final int index, final MyPojo object, final String value) {
                handleChild(index, object);
            }
        });
        addContent();
    }
    private void handleChild(int index, MyPojo object) {
        List<MyPojo> children = object.getChildren();
        if (children != null && children.size() != 0 && !openedRows.contains(object)) {
            allRows.addAll(index + 1, children);
            openedRows.add(object);
            setRowData(allRows);
        } else if (openedRows.contains(object)) {
            for (int i = 0; i < children.size(); i++) {
                allRows.remove(index + 1);
            }
            openedRows.remove(object);
            setRowData(allRows);
        }
    }
    private void addContent() {
        MyPojo child = new MyPojo("Child 1", null);
        List<MyPojo> children = new ArrayList<>();
        children.add(child);
        for (int i = 0; i < 5; i++) {
            allRows.add(new MyPojo("c" + i, children));
        }
        setRowData(allRows);
    }
}

思路是跟踪打开的行，因此我们使用HashSet openedRows。如果用户点击打开/关闭，要么子条目被添加到被点击条目的下面，要么可见的子条目将被删除。

这种方法的缺点是不能对表进行排序，因为这会混淆子条目和父条目。我也没有测试当行被删除/操作/插入时会发生什么。

可能有更好或更简单的方法(我不知道)，但这个方法相对简单，如果不需要修改，应该可以可靠地工作。