Comment faire l'expansion d'une seule ligne avec CellTable?

Question

Je suis en train d'utiliser le nouveau widget GWT CellTable mais ma table a besoin pour soutenir une expansion de la ligne, soit il y a un zippy à gauche d'une ligne et quand on clique dessus, la ligne devrait étendre à fournir des informations plus détaillées et cette ligne devrait étendre sur toutes les colonnes. Est-il possible d'y parvenir avec le CellTable? Comment puis-je ajouter une ligne qui couvre toutes les colonnes entre autres lignes dynamiquement?

Toute aide sera appréciée!

Answer 1

GWT 2.5 ajoutera un CellTableBuilder dans le but précis de permettre ce genre de choses.

Vous pouvez trouver un exemple en direct http: //showcase2.jlabanca-testing.appspot .com / #! CwCustomDataGrid (cliquez sur les cellules "amis") montrent

Answer 2

Pouvez-vous pas la ligne supplémentaire invisible à l'aide getRowElement(int row) et en utilisant des méthodes DOM pour régler l'affichage « none » lors du rendu et comme vide lorsque le bouton, pour le montrer, est frappé.

Answer 3

Je travaille sur la solution aussi, et mon plan est maintenant d'utiliser des classes CSS + manipulation styles manuels pour le faire paraître comme je l'ai besoin. Je ne sais pas si je suis capable de le joyeux avec GWT si: http://jsfiddle.net/7WFcF/

Answer 4

Je pris une approche différente pour résoudre ce même problème.

Le concept de base utilise des éléments de dom pour ajouter et supprimer des lignes en fonction d'un événement. Le code suivant est une extension abstraite de CellTable. Vous voulez appeler cette méthode à partir de votre événement qui se fera virer du clic pour développer une ligne.

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 est utilisé pour suivre quel élément est « élargi », cela pourrait probablement être réalisée à l'aide des classes ou ID. Si besoin, je peux élaborer davantage sur les CellTable, des événements, des vues et des activités.