Como fazer expansão de linha única com a CellTable?
Pergunta
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!
Solução
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")
Outras dicas
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.
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/
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.