gwt - CellTableで単一行の拡張を行うには?

Question

新しい GWT CellTable ウィジェットを使用しようとしていますが、テーブルは 1 つの行の拡張をサポートする必要があります。つまり、行の左側にジッピーがあり、それをクリックすると、行が拡張されて詳細情報が提供され、この行が拡張される必要があります。すべての列にまたがります。CellTable でこれを達成することは可能ですか? 他の行の間のすべての列にまたがる行を動的に追加するにはどうすればよいですか?

どんな助けでも大歓迎です！

Answer 1

GWT 2.5 はCellTableBuilder、この種のことを可能にするという正確な目標を持って を追加します。

http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGridで実際の例を見つけることができます(「友達を表示」セルをクリックします)。

Answer 2

私もソリューションに取り組んでおり、今のところ私の計画は、CSSクラスと手動のスタイル操作を使用して必要に応じて表示することです。しかし、GWTでそれを楽しむことができるかどうかはわかりません：http：//jsfiddle.net/7WFcF/

Answer 3

この同じ問題を解決するために、別のアプローチを取りました。

基本的な概念は、dom 要素を使用して、イベントに基づいて行を追加および削除することです。次のコードは、CellTable の抽象拡張です。クリックして行を展開すると発生するイベントからこのメソッドを呼び出す必要があります。

import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NodeList;

public abstract class ActionCellTable<T> extends CellTable<T> {
    protected abstract void addActionsColumn();

Integer previousSelectedRow = null;

public void displayRowDetail(int selectedRow, Element e){
    //Get the tbody of the Cell Table
    //Assumption that we want the first (only?) tbody.
    Element tbody = this.getElement().getElementsByTagName("tbody").getItem(0);
    //Get all the trs in the body
    NodeList<Element> trs = tbody.getElementsByTagName("tr");

    //remove previously selected view, if there was one
    if(previousSelectedRow!=null){
        trs.getItem(previousSelectedRow+1).removeFromParent();
        //If the current is further down the list then the current your index will be one off.
        if(selectedRow>previousSelectedRow)selectedRow--;
    }
    if(previousSelectedRow==null || selectedRow != previousSelectedRow){// if the are equal we don't want to do anything else
        Element td = Document.get().createTDElement();
        td.setAttribute("colspan", Integer.toString(trs.getItem(selectedRow).getChildNodes().getLength()));
        td.appendChild(e);

        Element tr = Document.get().createTRElement();
        tr.appendChild(td);
        tbody.insertAfter(tr, trs.getItem(selectedRow));
        previousSelectedRow=selectedRow;
    } else {
        previousSelectedRow=null;
    }
}

}

previousSelectedRow は、どのアイテムが「展開」されているかを追跡するために使用されます。これは、おそらくクラスまたは ID を使用して実現できます。必要に応じて、CellTable、イベント、ビュー、およびアクティビティについて詳しく説明できます。

Answer 4

getRowElement(int row)追加の行を非表示にすることはできませんか?