¿Cómo hacer la expansión de una sola fila con CellTable?

Question

Estoy tratando de usar el nuevo widget GWT CellTable pero mi tabla necesita admitir una expansión de fila, es decir, hay un zippy a la izquierda de una fila y cuando se hace clic, la fila debe expandirse para proporcionar más información detallada y esto la fila debe abarcar todas las columnas. ¿Es posible lograr esto con CellTable? ¿Cómo agrego una fila que abarca todas las columnas entre otras filas de forma dinámica?

¡Cualquier ayuda será apreciada!

Answer 1

GWT 2.5 agregará un CellTableBuilder con el objetivo exacto de permitir este tipo de cosas.

Puede encontrar un ejemplo en vivo en http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid (haga clic en la opción "Mostrar amigos" células)

Answer 2

No se puede hacer que la fila adicional sea invisible usando getRowElement(int row) y usando los métodos DOM para configurar la pantalla 'none' cuando se muestra y en blanco cuando se pulsa el botón para mostrarlo.

Answer 3

estoy trabajando en la solución también y mi plan por ahora es el uso de clases CSS + estilos manuales de manipulación para que sea mira lo que necesito Sin embargo, no estoy seguro de poder alegrarme con GWT: http://jsfiddle.net/7WFcF/

Answer 4

Tomé un enfoque diferente para resolver este problema.

El concepto básico es usar elementos dom para agregar y eliminar filas en función de un evento. El siguiente código es una extensión abstracta de CellTable. Deberá llamar a este método desde su evento que se activa desde el clic para expandir una fila.

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 se utiliza para realizar un seguimiento de qué elemento se "expande", esto probablemente podría lograrse mediante clases o ID. Si es necesario, puedo elaborar más sobre la CellTable, eventos, vistas y actividades.