GWT单元列表水平

GWT单元列表水平,gwt,uibinder,Gwt,Uibinder,有人知道如何制作水平方向的单元格列表吗?如果可能,请使用UiBinder,但这不是必需的。尝试覆盖CellList.renderRowValues方法。您必须能够创建一个水平演示模板。我不想复制该方法中的许多逻辑,但我用span替换所有div的老套解决方案奏效了: 公共类HorizontalCellList扩展了CellList{ 公共水平单元格列表(单元格){ 超级电池; } @凌驾 受保护的无效renderRowValues( SafeHtmlBuilder sb,List value,in

有人知道如何制作水平方向的单元格列表吗?如果可能,请使用UiBinder,但这不是必需的。

尝试覆盖CellList.renderRowValues方法。您必须能够创建一个水平演示模板。

我不想复制该方法中的许多逻辑,但我用span替换所有div的老套解决方案奏效了:

公共类HorizontalCellList扩展了CellList{
公共水平单元格列表(单元格){
超级电池;
}
@凌驾
受保护的无效renderRowValues(

SafeHtmlBuilder sb,List value,int start,SelectionModel一个带有CSS的变量-在单元格列表上设置CSS类名

CellList<T> list = new CellList<T>(...);
list.addStyleName('myList');

我可以通过扩展CellList并创建自己的模板+覆盖renderRowValues方法来解决这个问题。简单地将div更改为span对我来说并没有效果,可能是因为我有自定义单元格(每个单元格都呈现为表)。在CSS上添加display:inline对我也不起作用

除了添加了“float:left;”样式外,我的模板代码与原始代码几乎相同:

接口模板扩展了安全HtmlTemplates{
@模板(“{1}”)
SAFEHTMLSPAN(intIDX,SAFEHTMLCellContents)。。。
下面是我的renderRowValue方法的一个片段:

    int length = values.size();
    int end = start + length;
    for (int i = start; i < end; i++) {
        SingleKeyValueModel value = values.get(i - start);

        //super.renderRowValues(sb, values, start, selectionModel);

        SafeHtmlBuilder cellBuilder = new SafeHtmlBuilder();
        Context context = new Context(i, 0, getValueKey(value));
        cell.render(context, value, cellBuilder);


        sb.append(TEMPLATE.span(i, cellBuilder.toSafeHtml()));

    }
int length=values.size();
int end=开始+长度;
for(int i=start;i
按照Thomas Broyer的建议,我们可以向CellList构造函数中注入新的CSS资源

获取水平格式的CSS
mycellist.CSS

/* This file is based on the CSS for a GWT CellList:
 * https://gwt.googlesource.com/gwt/+/master/./user/src/com/google/gwt/user/cellview/client/CellList.css
 * The primary purpose is to arrange for the <div> elements that contain each cell to be laid out inline (horizontally).
 */

/* Using inline-block, following Thomas Broyer's recommendations (with link to justification) here:
 * https://groups.google.com/forum/#!topic/google-web-toolkit/rPfCO5H91Rk
 */
.cellListEvenItem {
    display: inline-block;
    padding: 5px;
}

.cellListOddItem {
    display: inline-block;
    padding: 5px;
}
注入新样式,并将其传递给CellList的构造函数:

    MyCellListResource.INSTANCE.cellListStyle().ensureInjected();

    CellList<Fare> cellList = new CellList<Fare>(cell, MyCellListResource.INSTANCE);
MyCellListResource.INSTANCE.cellListStyle().ensureInjected();
CellList CellList=新的CellList(cell,MyCellListResource.INSTANCE);

请注意,新样式出现在CellList的默认样式之后的级联中,因此您只需将所需的修改放入MyCellList.css中。

您对此有过好的答案吗?@slugmandrew-希望您的问题现在的答案是“是”:-)两年前我问了你这个问题,你一年前就回答了,现在我又回到这里,利用这个问题:)干杯!
/* This file is based on the CSS for a GWT CellList:
 * https://gwt.googlesource.com/gwt/+/master/./user/src/com/google/gwt/user/cellview/client/CellList.css
 * The primary purpose is to arrange for the <div> elements that contain each cell to be laid out inline (horizontally).
 */

/* Using inline-block, following Thomas Broyer's recommendations (with link to justification) here:
 * https://groups.google.com/forum/#!topic/google-web-toolkit/rPfCO5H91Rk
 */
.cellListEvenItem {
    display: inline-block;
    padding: 5px;
}

.cellListOddItem {
    display: inline-block;
    padding: 5px;
}
public interface MyCellListResource extends CellList.Resources {
  public static MyCellListResource INSTANCE = GWT.create(MyCellListResource.class);
  interface MyCellListStyle extends CellList.Style {}

  @Override
  @Source({CellList.Style.DEFAULT_CSS, "MyCellList.css"})
  MyCellListStyle cellListStyle();
}
    MyCellListResource.INSTANCE.cellListStyle().ensureInjected();

    CellList<Fare> cellList = new CellList<Fare>(cell, MyCellListResource.INSTANCE);