Question

我正在尝试使用新的GWT CellTable小部件，但我的表需要支持一行扩展，即行的左侧有一个zippy，当它被单击时，该行应该展开以提供更多详细信息和此行应跨越所有列。是否可以通过CellTable实现这一目标？如何动态添加跨越其他行之间所有列的行？

任何帮助将不胜感激！

Answer 1

GWT 2.5将添加一个CellTableBuilder，其确切目标是允许这类事情。

您可以在http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid找到一个实时示例（点击“显示朋友”单元格）

Answer 2

使用getRowElement(int row)并使用DOM方法在渲染时设置显示'none'并且在显示按钮时将其设置为空白，是否不能使附加行不可见。

Answer 3

我正在研究解决方案，我现在的计划是使用CSS类+手动样式操作来使它看起来像我需要的那样。不知道我是否能够将它与GWT结合起来：http://jsfiddle.net/7WFcF/

Answer 4

我采取了不同的方法来解决同样的问题。

基本概念是使用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用于跟踪哪个项目“已展开”，这可能是使用类或ID实现的。如果需要，我可以详细说明CellTable，事件，视图和活动。

如何使用CellTable进行单行扩展？

4 个答案: