答案

Question

使用需要类似CellTable的GWT应用程序来显示和编辑数据。我在CellTable示例中没有看到的额外要求：

多个标题行。我不需要这样的标题行，但每隔几行（4-10）数据我就像标题一样（基本上解释了下一个'n'项是如何相关的）
根据某些数据（对象中指定的当前日期和日期），某些字段应该是不可编辑的。我找到了关于如何使列不可编辑的示例，但是如何将其映射回自定义渲染器的实际数据？（即对应于行的数据对象 - 应该很容易，但我遗漏了一些东西......）

我可以使用CellTable吗？我应该看一下更好的Widget吗？我知道我可以在Grid中完成所有操作，但CellTable看起来好多了！

感谢。

答案

扩展Thomas Broyer在下面的答案我已经成功地获得了不可编辑的东西。我从来没有真正期望“标题行”很容易，因此编辑是主要部分。

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

如果有人有任何意见或我错过了一些明显的事情：请告诉我！

// 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 （与您的用例不同：添加子行而不是对行进行分组）：{ {3}}
在您的情况下，棘手的部分是检测何时插入分组行。

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

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

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

GWT CellTable或类似的

答案

1 个答案: