GWT CellTable 或类似的

Question

在需要像 CellTable 之类的东西来显示和编辑数据的 GWT 应用程序上工作。我在 CellTable 示例中没有看到的额外要求：

• 多个标题行。我真的不需要这样的标题行，但是每隔几行（4-10）数据我想要一个标题（基本上解释了下一个'n'项是如何相关的）

  李>

• 根据某些数据（当前日期和对象中指定的日期），某些字段应该是不可编辑的。我找到了有关如何使列不可编辑的示例，但是如何将其映射回来自自定义渲染器的实际数据？ （即对应于行的数据对象 - 应该很容易，但我错过了一些东西......）

我可以用 CellTable 做到这一点吗？我应该看一个更好的小部件吗？我知道我可以在 Grid 中完成所有操作，但 CellTable 看起来要好得多！

谢谢。

回答

在下面扩展 Thomas Broyer 的答案时，我已经设法让不可编辑的东西继续下去。我从没想过“标题行”会这么简单，所以编辑是主要部分。

正如我在下面评论的那样，我没有找到任何简单、易于遵循的示例来向我展示全貌。我设法从几个不同的来源拼凑起来。

如果有人有任何 cmets 或者我遗漏了一些明显的东西：请告诉我！

// Step 1: Create a cell (in this case based on text)
class MyEditTextCell extends EditTextCell {
    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context,
            String value, SafeHtmlBuilder sb) 
    {
        bool editable = true;
        // TODO: What goes here?

        if (!editable) {
        sb.appendHtmlConstant("<div contentEditable='false' unselectable='true'>" + value + "</div>");
    }
    else {
            super.render(context, value, sb);
        }
    }
}

// It gets used to add a column to the table like this
final MyEditTextCell myCell = new MyTextCell();
Column<RowType, String> nmyCol = new Column<RowType, String>(myCell) {
    @Override
    public String getValue(RowType o) {
        return o.someMethod(); // This gets the particular row out of your column.
    }
};
table.addColumn(myCol, "Heading");

所以所有这些工作都相当容易，但我仍然无法弄清楚使用该行的 TODO。这一切都与另一个处理 KeyProviders 的示例结合在一起。 KeyProvider 提供了一个链接，该链接来自您在单元格的 render() 方法中获得的 Context 以及该单元格所属的行。它通过一个索引（它只是一个对象）来做到这一点。

所以你最终得到：

// Step 2: Cell can get the row and use it to decide how to draw.
class MyEditTextCell extends EditTextCell {
    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context,
            String value, SafeHtmlBuilder sb) 
    {
        Object key = context.getKey();
        // What the key is is uo to you: if could be an Integer that indexes into
        // a collection of objects, it could be a key for a hashmap. I'm guessing
        // it could even be the real object itself (but I haven't tried that...)
        // e.g.
        boolean editable = true;
        int index = ((Integer)key).intValue();
        RowType row = myRowCollection.get(index);
        if (row != null) {
            if (/*some condition on the row*/) {
                editable = false;
            }
        }
        if (!editable) {
        sb.appendHtmlConstant("<div contentEditable='false' unselectable='true'>" + value + "</div>");
    }
    else {
            super.render(context, value, sb);
        }
    }
}

// Key provider links gets a unique id from the rows - I just used an in.
// This gets provided to the CellTable on creation
// e.g. CellTable tab = new CellTable(LEY_PROVIDER);
//
private static final ProvidesKey<RowType> KEY_PROVIDER = new ProvidesKey<RowType>() {
    public Object getKey(RowType item) {
        return Integer.valueOf(item.getId());
    }
};

Answer 1

• 多个标题行。我真的不需要这样的标题行，但是每隔几行 (4-10) 的数据我想要一个标题之类的东西（基本上解释了下一个“n”项是如何相关的）

（又名分组行）
GWT 2.5（将在一个月左右发布）将添加 CellTableBuilder，让您可以更改 CellTable 从其模型构建其视图的方式。
您可以在此处查看 in action 示例（但与您的用例不同：添加 child rows 而不是 grouping rows）：@ 987654321@
在您的情况下，棘手的部分是检测何时插入分组行。

• 根据某些数据（当前日期和对象中指定的日期），某些字段应该是不可编辑的。我找到了有关如何使列不可编辑的示例，但是如何将其映射回来自自定义渲染器的实际数据？ （即对应于该行的数据对象 - 应该很容易，但我错过了一些东西......）

您最好的选择是使用自定义 Cell，它接受 row 对象 值（因此它可以决定单元格是否应可编辑）但仅显示/编辑该字段/属性对象。
如果值是可编辑的，您应该能够将呈现和事件处理推迟到 TextInputCell 或 EditTextCell，否则推迟到 TextCell。

棘手的部分是使列可编辑的条件是否取决于本身可编辑的属性。在这种情况下，您必须触发表的刷新（至少是修改后的行），以便刷新 有条件可编辑 列。
在这种情况下，我认为使用自定义Cell 会有更好的机会，它最初总是呈现相同但可以切换到可编辑模式（类似于EditTextCell）；并在处理事件时进行值是否可编辑计算，并有条件地拒绝切换到编辑模式。
您应该可以在此处从EditTextCell 复制/粘贴很多内容。