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

Question

Estoy intentando utilizar el nuevo GWT CellTable Reproductor pero mis necesidades de mesa para apoyar una expansión fila, es decir, hay un enérgico de la izquierda de una fila y cuando se hace clic en él, la fila debe ampliar para proporcionar información más detallada y esta fila debe extenderse a lo largo de todas las columnas. ¿Es posible lograr esto con el CellTable? ¿Cómo puedo añadir una fila que se extiende por todas las columnas entre otras filas dinámicamente?

Cualquier ayuda será apreciada!

Answer 1

GWT 2.5 añadirá un CellTableBuilder con el objetivo exacto de lo que permite este tipo de cosas.

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

Answer 2

¿Puede usted no hacer la fila adicional invisible utilizando getRowElement(int row) y el uso de métodos DOM a la pantalla conjunto 'ninguno' y cuando se representa como blanco cuando el botón, para mostrar que, es éxito.

Answer 3

Estoy trabajando en la solución también y mi plan por ahora es utilizar las clases CSS + estilos manuales de manipulación para que se vea como que necesito. No estoy seguro si sería capaz de feliz con GWT aunque: http://jsfiddle.net/7WFcF/

Answer 4

Me tomó un enfoque diferente para resolver este mismo problema.

El concepto básico está utilizando elementos DOM para añadir y eliminar filas en función de un evento. El código siguiente es una extensión abstracta de CellTable. Usted querrá llamar a este método desde el supuesto de que es despedido 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 los CellTable, eventos, vistas y actividades.