0

データを表示および編集するためにCellTableのようなものを必要とするGWTアプリでの作業。CellTableの例でカバーされていない、私が持っている追加の要件:

  • 複数のヘッダー行。ヘッダー行自体は実際には必要ありませんが、データの数行(4〜10)ごとに、ヘッダーのようなものが必要です(基本的に次の「n」項目がどのように関連しているかを説明します)

  • 一部のデータ(現在の日付とオブジェクトで指定された日付)に基づいて、一部のフィールドは編集不可にする必要があります。列を編集不可にする方法の例を見つけましたが、カスタムレンダラーからの実際のデータにマップする方法を教えてください。(つまり、行に対応するデータオブジェクトは簡単なはずですが、何かが足りません...)

CellTableでこれを行うことはできますか?私が見なければならないより良いウィジェットはありますか?すべてをグリッドで実行できることはわかっていますが、CellTableの方がはるかに見栄えがします。

ありがとう。

答え

以下のThomasBroyerの回答を拡張して、編集不可能なものを実行することができました。「ヘッダー行」が簡単だとは思ってもみなかったので、編集がメインでした。

以下にコメントしたように、全体像を示す単純でわかりやすい例は見つかりませんでした。私はいくつかの異なるソースからそれをつなぎ合わせることができました。

誰かがコメントを持っているか、私が明白な何かを逃したならば:私に知らせてください!

// 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());
    }
};
4

1 に答える 1

1
  • 複数のヘッダー行。ヘッダー行自体は実際には必要ありませんが、データの数行(4〜10)ごとに、ヘッダーのようなものが必要です(基本的に次の「n」項目がどのように関連しているかを説明します)

(行のグループ化とも呼ばれます)
GWT 2.5(1か月ほどでリリースされる予定)が追加され、モデルからビューを構築CellTableBuilderする方法を変更できます。ここで実際 の例を見ることができます(ただし、あなたと同じユースケースではありません:行をグループ化するのではなく子行を追加します):http ://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid あなたの場合、トリッキーな部分は、グループ化行を挿入するタイミングを検出することです。CellTable

  • 一部のデータ(現在の日付とオブジェクトで指定された日付)に基づいて、一部のフィールドは編集不可にする必要があります。列を編集不可にする方法の例を見つけましたが、カスタムレンダラーからの実際のデータにマップする方法を教えてください。(つまり、行に対応するデータオブジェクトは簡単なはずですが、何かが足りません...)

最善の策Cellは、行オブジェクトの値を取得する(セルを編集可能にするかどうかを決定できる)カスタムを使用することですが、そのオブジェクトのフィールド/プロパティのみを表示/編集します。レンダリングとイベント処理を、または値が編集可能かどうか、またはそれ以外の場合
に延期できるはずです。TextInputCellEditTextCellTextCell

トリッキーな部分は、列を編集可能にする条件が、それ自体が編集可能なプロパティに依存するかどうかです。その場合、条件付きで編集可能な列が更新されるように、テーブル(少なくとも変更された行)の更新をトリガーする必要があります。その場合、最初は常に同じようにレンダリングされますが、編集可能モードに切り替えることができる
カスタムを使用すると、より良いチャンスがあると思います(と同様)。そして、イベントを処理するときにその値の編集可能な計算を行い、条件付きで編集モードへの切り替えを拒否します。 ここからたくさんコピー/貼り付けできるはずです。CellEditTextCell
EditTextCell

于 2012-06-04T02:24:35.430 に答える