Как сделать расширение одной строки с CellTable? - PullRequest
Новая
       5

Как сделать расширение одной строки с CellTable?

6 голосов
/ 23 октября 2010

Я пытаюсь использовать новый виджет GWT CellTable, но моя таблица должна поддерживать расширение на одну строку, т. Е. Слева от строки есть застежка-молния, и при ее нажатии строка должна развернуться, чтобы предоставить более подробную информацию эта строка должна охватывать все столбцы. Возможно ли достичь этого с помощью CellTable? Как добавить строку, которая динамически охватывает все столбцы между другими строками?

Любая помощь будет оценена!

Ответы [ 4 ]

2 голосов
/ 23 октября 2011

GWT 2.5 добавит CellTableBuilder с точной целью разрешить подобные вещи.

Вы можете найти живой пример на http://showcase2.jlabanca -testing.appspot.com / #! CwCustomDataGrid (нажмите на ячейки "показать друзей")

0 голосов
/ 17 января 2012

Я использовал другой подход для решения этой же проблемы.

Основная концепция заключается в использовании элементов dom для добавления и удаления строк на основе события. Следующий код является абстрактным расширением CellTable. Вы захотите вызывать этот метод из своего события, которое вызывается щелчком, чтобы развернуть строку. 

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 используется для отслеживания того, какой элемент «расширен», это может быть достигнуто с помощью классов или идентификаторов. При необходимости я могу подробнее рассказать о CellTable, событиях, представлениях и действиях.

0 голосов
/ 25 октября 2011

Я тоже работаю над решением, и сейчас я планирую использовать классы CSS + ручное манипулирование стилями, чтобы оно выглядело так, как мне нужно.Не уверен, что смогу ли я объединить это с GWT, хотя: http://jsfiddle.net/7WFcF/

0 голосов
/ 23 октября 2010

Вы не можете сделать дополнительную строку невидимой, используя getRowElement(int row) и используя методы DOM, чтобы установить отображение 'none' при рендеринге и как пустое, когда кнопка, чтобы показать ее, нажата.

...