Jak wykonać rozwijanie pojedynczego wiersza za pomocą CellTable?

Question

Próbuję użyć nowego widgetu GWT CellTable, ale moja tabela musi obsługiwać jedno rozszerzenie wiersza, tj. Po lewej stronie wiersza znajduje się zippy, a po kliknięciu wiersz powinien się rozwinąć, aby podać więcej szczegółowych informacji. wiersz powinien obejmować wszystkie kolumny. Czy można to osiągnąć za pomocą CellTable? Jak dodać wiersz, który dynamicznie obejmuje wszystkie kolumny między innymi wierszami?

Każda pomoc zostanie doceniona!

Answer 1

GWT 2.5 doda CellTableBuilder z dokładnym celem dopuszczenia tego rodzaju rzeczy.

można znaleźć na żywo przykład na http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid (kliknij na przycisk „Pokaż znajomych” komórki)

Answer 2

Nie można uczynić dodatkowego wiersza niewidocznym za pomocą getRowElement(int row) i używając metod DOM, aby ustawić wyświetlanie "brak" podczas renderowania i jako puste, gdy przycisk, aby go wyświetlić, został trafiony.

Answer 3

pracuję nad rozwiązaniem zbyt i mój plan jest użycie klas CSS + Style manualnej, aby go spójrz, jak potrzebuję. Nie jestem pewien, czy jestem w stanie to zrobić z GWT: http://jsfiddle.net/7WFcF/

Answer 4

Podjąłem inne podejście, aby rozwiązać ten sam problem.

Podstawową koncepcją jest użycie elementów domowych do dodawania i usuwania wierszy na podstawie zdarzenia. Poniższy kod jest abstrakcyjnym rozszerzeniem CellTable. Będziesz chciał wywołać tę metodę ze zdarzenia, które zostanie wyrzucone z kliknięcia, aby rozwinąć wiersz.

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 służy do śledzenia, który element jest „rozszerzony”, może to być prawdopodobnie osiągnięty za pomocą klas lub identyfikatory. W razie potrzeby mogę rozwinąć więcej na temat CellTable, wydarzeń, widoków i działań.