Come fare l'espansione fila singola con CellTable?

Question

Sto cercando di utilizzare il nuovo GWT CellTable widget di ma le mie esigenze da tavolo per sostenere un'espansione fila, cioè c'è una Zippy a sinistra di una riga e quando viene cliccato, la riga dovrebbe espandersi per fornire informazioni più dettagliate e questa riga dovrebbe estendersi su tutte le colonne. E 'possibile raggiungere questo obiettivo con il CellTable? Come faccio ad aggiungere una riga che abbraccia tutte le colonne tra le altre righe in modo dinamico?

Ogni aiuto sarà apprezzato!

Answer 1

GWT 2.5 aggiungerà un CellTableBuilder con l'obiettivo preciso di consentire questo genere di cose.

È possibile trovare un esempio dal vivo al http: //showcase2.jlabanca-testing.appspot com / #! CwCustomDataGrid (clicca sulle "mostra amici" celle)

Answer 2

Si può non fare la riga aggiuntiva invisibile utilizzando getRowElement(int row) e l'utilizzo di metodi DOM per visualizzare Imp 'none', quando rese e come vuoto quando il pulsante, per vederlo, è successo.

Answer 3

Sto lavorando sulla soluzione troppo e il mio piano per ora è quello di utilizzare le classi CSS + stili manuali di manipolazione per far sembrare come ho bisogno. Non sono sicuro se sarò in grado di allegro con GWT però: http://jsfiddle.net/7WFcF/

Answer 4

ho preso un approccio diverso per risolvere questo stesso problema.

Il concetto di base sta usando elementi DOM per aggiungere e rimuovere righe in base a un evento. Il seguente codice è un'estensione astratta di CellTable. Ti consigliamo di chiamare questo metodo dal vostro evento che viene licenziato dal click per espandere una riga.

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 viene utilizzato per tenere traccia quale elemento viene "espansa", questo potrebbe probabilmente essere raggiunto utilizzando le classi o gli ID. Se necessario posso elaborare più sui CellTable, eventi, viste e attività.