GWT CellTable或類似產品

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（）方法中獲得的上下文以及單元格所屬行的鏈接。 它通過索引（這只是一個對象）來實現。

因此，您最終得到：

// 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從其模型構建視圖的方式 。
您可以在此處看到一個實際的示例（盡管與您的用例不同：添加子行而不是對行進行分組 ）： http : //showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid
對於您而言，棘手的部分是檢測何時插入分組行。

• 根據某些數據（當前日期和對象中指定的日期），某些字段不可編輯。 我找到了有關如何使列不可編輯的示例，但是如何將其映射回自定義渲染器的實際數據呢？ （即與該行相對應的數據對象-應該很簡單，但是我缺少了某些東西...）

最好的選擇是使用具有行對象值的自定義Cell （以便它可以決定該單元格是否可編輯），但僅顯示/編輯該對象的字段/屬性。
如果該值是可編輯的，那么您應該能夠將呈現和事件處理推遲到TextInputCell或EditTextCell否則將其推遲到TextCell 。

棘手的部分是使列可編輯的條件是否取決於本身可編輯的屬性。 在這種情況下，您必須觸發表的刷新（至少是修改后的行），以便刷新有條件的可編輯列。
在那種情況下，我認為您可以使用自定義Cell來獲得更好的機會，該Cell最初始終呈現相同的外觀，但是可以切換到可編輯模式（類似於EditTextCell ）； 並且在處理事件時要做的是值可編輯的計算，並有條件地拒絕切換到編輯模式。
您應該可以在此處從EditTextCell復制/粘貼很多內容。