CellTableを持つ単一行の拡張を行うにはどのように？

Question

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

という行を追加します

すべてのヘルプは理解されるであろう！

Answer 1

GWT 2.5は、物事のこの種のを可能にする正確な目標にCellTableBuilderを追加します。

//showcase2.jlabanca-testing.appspot：

あなたは HTTPでのライブの例を見つけることができます.COM /＃！CwCustomDataGridする

（ "ショーの友人" セルをクリックしてください）

Answer 2

あなたはgetRowElement(int row)を使用して、設定画面にレンダリングとボタンが、それを示すために、ブランクとして、ヒットは「none」にDOMメソッドを使用して、追加の行を非表示にすることはできません。

Answer 3

私も解決策に取り組んでいますし、今の私の計画は、私が必要として、それが見えるようにマニュアルのスタイルに+の操作をCSSクラスを使用することです。わからない私もGWTでそれを陽気することができた場合： http://jsfiddle.net/7WFcF/する

Answer 4

私はこの同じ問題を解決するために異なるアプローチを取っています。

基本的な考え方は、イベントに基づいて行を追加および削除する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、イベント、ビュー、および活動をより詳しく説明することができます。