Como fazer expansão de linha única com a CellTable?

Question

Estou tentando usar o novo widget GWT CellTable, mas minha tabela precisa suportar uma expansão de uma linha, ou seja, há um zippy à esquerda de uma linha e, quando é clicado, a linha deve se expandir para fornecer mais informações detalhadas e esta linha deve abrange todas as colunas. É possível conseguir isso com o celular? Como adiciono uma linha que abrange todas as colunas entre outras linhas dinamicamente?

Qualquer ajuda será apreciada!

Answer 1

GWT 2.5 vai adicionar um CellTableBuilder com o objetivo exato de permitir esse tipo de coisa.

Você pode encontrar um exemplo ao vivo em http://showcase2.jlabanca-testing.appspot.com/#!cwcustomdatagrid (Clique nas células "Show Friends")

Answer 2

Você não pode tornar a linha adicional invisível usando getRowElement(int row) e usando os métodos DOM para definir o Exibir 'Nenhum' quando renderizado e em branco quando o botão, para mostrá -lo, é atingido.

Answer 3

Também estou trabalhando na solução e meu plano por enquanto é usar as classes CSS + manipulação de estilos manuais para fazê -lo parecer que eu preciso. Não tenho certeza se eu consigo feliz com GWT: http://jsfiddle.net/7wfcf/

Answer 4

Eu adotei uma abordagem diferente para resolver o mesmo problema.

O conceito básico está usando elementos DOM para adicionar e remover linhas com base em um evento. O código a seguir é uma extensão abstrata do celular. Você deseja chamar esse método do seu evento que é demitido do clique para expandir uma linha.

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

}

O anteriorSelectedRow é usado para rastrear qual item "expandido", isso provavelmente poderia ser alcançado usando classes ou IDs. Se necessário, posso elaborar mais sobre as células, eventos, vistas e atividades.