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

Question

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

任何帮助将不胜感激！

Answer 1

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

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

Answer 2

您能否使用 getRowElement(int row) 使附加行不可见，并使用 DOM 方法在渲染时将显示设置为“无”，并在单击显示它的按钮时将其设置为空白。

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、事件、视图和活动。