java - GWT CellTable 或类似的

Question

正在开发需要 CellTable 之类的东西来显示和编辑数据的 GWT 应用程序。我有一些额外的要求，但我在 CellTable 示例中没有看到:

• 多个标题行。我实际上并不需要这样的标题行，但是每隔几行(4-10)数据我就想要一个类似标题的东西(基本上解释了接下来的“n”个项目是如何相关的)

  <

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

我可以使用 CellTable 执行此操作吗？我应该寻找更好的小部件吗？我知道我可以在网格中完成这一切，但 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() 方法中获取的上下文以及单元格所属的行的链接。它通过索引(只是一个对象)来完成此操作。

所以你最终会得到:

// 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

• Multiple header rows. I don't really need a header row as such, but every few rows (4-10) of data I'd like something like a header (basically explains how the next 'n' items are related)

(又名分组行)
GWT 2.5(将在一个月左右发布)将添加 CellTableBuilder，它允许您更改 CellTable 从其 构建其 View 的方式型号。
您可以在此处查看一个示例(但与您的用例不同:添加子行而不是分组行):http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid
在您的情况下，棘手的部分是检测何时插入分组行。

• Based on some data (current date and dates specified in an object), some of the fields should be non editable. I've found examples on how to make a column non editable, but how do I map that back through to actual data from the custom renderer? (i.e. the data object corresponding to the row - should be easy, but I'm missing something...)

你最好的选择是使用一个自定义的Cell，它接受一个行对象值(这样它就可以决定单元格是否应该可编辑)，但只显示/编辑一个该对象的字段/属性。
如果值可编辑，您应该能够将渲染和事件处理推迟到 TextInputCell 或 EditTextCell，否则推迟到 TextCell。/p>

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