6

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

任何帮助将不胜感激！

4

4 回答 4

2

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

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

于 2011-10-23T15:48:05.360 回答
0

您能否使用getRowElement(int row)和使用 DOM 方法在渲染时设置显示“无”并在按下按钮以显示它时设置为空白，从而使附加行不可见。

于 2010-10-23T04:29:01.097 回答
0

我也在研究解决方案，我现在的计划是使用 CSS 类 + 手动样式操作来让它看起来像我需要的那样。不确定我是否可以使用 GWT 来享受它：http: //jsfiddle.net/7WFcF/

于 2011-10-25T02:34:47.970 回答
0

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

基本概念是使用 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、事件、视图和活动。

于 2012-01-16T21:19:05.857 回答