GWT CellTable或类似

Question

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

• 多头行。我实际上不需要这样的标题行，但是每隔几行(4-10行)我想要类似于头(基本上解释了下一个'n‘项是如何关联的)
• 基于某些数据(对象中指定的当前日期和日期)，一些字段应该是不可编辑的。我已经找到了如何使列不可编辑的示例，但是如何将其映射回自定义呈现器中的实际数据呢？(也就是说，与行对应的数据对象应该很简单，但我遗漏了一些东西.)

我能用CellTable做这个吗？我应该看看更好的寡妇吗？我知道我可以在网格中完成这一切，但是CellTable看起来好多了！

谢谢。

回答

在以下扩展托马斯·布罗耶的答案之后，我成功地完成了一些不可编辑的工作。我从来没有真正期望“标题行”是容易的，所以编辑是主要部分。

正如我在下面的评论，我没有发现任何简单的，容易遵循的例子，向我展示了整个画面。我从几个不同的来源把它拼凑在一起。

如果有人有任何评论，或者我错过了一些显而易见的事情:让我知道！

// 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()方法中的上下文和单元格所属的行的链接。它通过索引(它只是一个对象)来实现这一点。

所以你的结局是：

// 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‘项是如何关联的)

。

(也称为分组行)

GWT2.5(将在一个月左右发布)将添加CellTableBuilder，它允许您更改CellTable如何从其模型构建视图。

您可以在这里看到一个示例(与您的用例不同:添加子行而不是分组行)：http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid

在这种情况下，棘手的部分是检测何时插入分组行。

基于某些数据(对象中指定的当前日期和日期)的

• ，某些字段应该是不可编辑的。我已经找到了如何使列不可编辑的示例，但是如何将其映射回自定义呈现器中的实际数据呢？(也就是说，与行对应的数据对象应该很简单，但我缺少了something...)

最好的方法是使用一个自定义Cell，它接受一个行对象值(这样它就可以决定单元格是否应该是可编辑的)，但是只显示/编辑该对象的一个字段/属性。

如果值是可编辑的，则应该可以将呈现和事件处理推迟到TextInputCell或EditTextCell，而不是TextCell。

棘手的部分是，使列可编辑的条件是否取决于本身是可编辑的属性。在这种情况下，您必须触发表的刷新(至少是修改过的行)，以便刷新条件可编辑的列。

在这种情况下，我认为使用自定义Cell会有更好的机会，它最初总是呈现相同的，但可以切换到可编辑模式(类似于EditTextCell)；在处理事件时执行值可编辑计算，并且有条件地拒绝切换到编辑模式。

您应该能够在这里复制/粘贴大量的EditTextCell。