Wie einreihige Expansion mit CellTable zu tun?

Question

Ich versuche, die neue GWT CellTable Widget zu verwenden, aber meine Tabelle Bedürfnisse einer Reihe Expansion zu unterstützen, dh es gibt eine flotte auf der linken Seite einer Zeile und wenn es angeklickt wird, sollte die Reihe erweitern, um mehr Detailinformationen zur Verfügung zu stellen und diese Zeile sollte über alle Spalten erstrecken. Ist es möglich, dies mit dem CellTable zu erreichen? Wie füge ich eine Zeile, dass erstreckt sich über alle Spalten zwischen anderen Zeilen dynamisch?

Jede Hilfe wird geschätzt!

Answer 1

GWT 2.5 eine CellTableBuilder mit dem genauen Ziel, so dass diese Art der Dinge hinzuzufügen.

Sie können ein Live-Beispiel finden Sie unter http: //showcase2.jlabanca-testing.appspot .com / #! CwCustomDataGrid (klicken Sie auf den "Show Freunde" Zellen)

Answer 2

Können Sie nicht machen die zusätzliche Zeile unsichtbar mit getRowElement(int row) und unter Verwendung von DOM-Methoden zur eingestellten Anzeige ‚none‘, wenn gerendert und als leer, wenn Sie die Taste, um es zu zeigen, ist Hit.

Answer 3

Ich arbeite an der Lösung zu und mein Plan für jetzt ist zu CSS-Klassen + manuelle Manipulation Stile zu verwenden, um es so aussehen, wie ich brauche. Nicht sicher, ob ich in der Lage sein, es fröhlich mit GWT aber: http://jsfiddle.net/7WFcF/

Answer 4

Ich habe einen anderen Ansatz das gleiche Problem zu lösen.

Das Grundkonzept ist mit dom Elementen Reihen basierend auf einem Ereignis hinzuzufügen und zu entfernen. Der folgende Code ist eine abstrakte Erweiterung von CellTable. Sie wollen diese Methode von Ihrer Veranstaltung nennen, die aus dem Klick wird ausgelöst, um eine Zeile zu erweitern.

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;
    }
}

}

wird previousSelectedRow verwendet, um zu verfolgen, welches Element wird „erweitert“, ist dies wahrscheinlich erreicht werden könnte, Klassen oder IDs. Bei Bedarf kann ich mehr über die CellTable, Veranstaltungen, Ansichten erarbeiten und Aktivitäten.