水平滚动表的动态数量（Primefaces/JSF）

Question

我想要显示动态数量的 2 列表 带有水平滚动条，而不会垂直折叠。我试过很多 使用 ui:repeat 和 c:forEach 的组合，但我似乎永远无法 让水平滚动出现。我不一定喜欢 Primefaces （我使用的是 5.0 版），虽然我喜欢它的功能集。

我很擅长编写 Java 代码，所以我可以根据需要修改 bean，如果 不同的模型是有意义的。以下示例是我最接近的示例， 但是 p:datatable 上的 CSS "float: left" 似乎很脆弱，而水平 滚动条不出现 - 表格环绕。我也想不通 一种使用动态表数显示 columnGroup 标题的方法。 有什么建议吗？

<p:scrollPanel  mode="native" style="height: 200px; width: auto">
  <ui:repeat value="#{tableBean.tables}" var="table">
    <p:dataTable id="cars" var="car" value="#{table.carsSmall}"
                 style="float: left; padding-right: 10px" >
      <!-- Can't use columnGroup with p:columns...
        <p:columnGroup type="header">
          <p:column colspan="2" headerText="Table X"/>
        </p:columnGroup>
      -->
      <p:columns value="#{table.columns}" var="column"
                 columnIndexVar="colIndex">
        <f:facet name="header">
            #{column.header}
        </f:facet>
        <h:outputText value="#{car[column.property]}"></h:outputText>
      </p:columns>
    </p:dataTable>
  </ui:repeat>
</p:scrollPanel>

这是 Primefaces 教程中的 bean/实体类：

@ManagedBean(name = "tableBean")
@ViewScoped
public class TableBean implements Serializable {
  private List<TableBean> tables;
  private String name;
  private List<Car> carsSmall;
  private static List<ColumnModel> columns = new ArrayList<>();

  static {
    columns.add(new ColumnModel("MODEL", "model"));
    columns.add(new ColumnModel("YEAR", "year"));
  }

  public List<TableBean> getTables() {
    // Populate 4-8 tables
    int tableCount = (int) (Math.random() * 4 + 4);
    if (tables == null) {
      tables = new ArrayList<>();
      for (int i = 0; i < tableCount; i++) {
        TableBean t = new TableBean();
        t.name = new String("Table " + (i+1));
        tables.add(t);
      }
    }
    return tables;
  }

  public TableBean() {
    carsSmall = new ArrayList<Car>();
    populateRandomCars(carsSmall, 8);
  }

  private void populateRandomCars(List<Car> list, int size) {
    int count = (int) (Math.random() * size + 1);
    for (int i = 0; i < count; i++) {
        list.add(new Car(getRandomModel(), getRandomYear()));
    }
  }

  public List<Car> getCarsSmall() {
    return carsSmall;
  }

  private int getRandomYear() {
    return (int) (Math.random() * 50 + 1960);
  }

  private String getRandomModel() {
    return UUID.randomUUID().toString().substring(0, 8);
  }

  public String getName() {
    return name;
  }

  public List<ColumnModel> getColumns() {
    return columns;
  }

  static public class ColumnModel implements Serializable {
    private static final long serialVersionUID = 1L;
    private String header;
    private String property;

    public ColumnModel(String header, String property) {
        this.header = header;
        this.property = property;
    }

    public String getHeader() {
        return header;
    }

    public String getProperty() {
        return property;
    }

    @Override
    public String toString() {
        return "[header=" + header + ", property=" + property + "]";
    }
  }
}

public class Car implements Serializable {
  private static final long serialVersionUID = 1L;
  private String model;
  private int year;

  public Car(String model, int year) {
    super();
    this.model = model;
    this.year = year;
  }

  public String getModel() {
    return model;
  }

  public void setModel(String model) {
    this.model = model;
  }

  public int getYear() {
    return year;
  }

  public void setYear(int year) {
    this.year = year;
  }
}

Answer 1

好的，我想出了一些办法，虽然可能有更好的解决方案。

为了让<p:scrollPanel> 显示水平滚动条，子 容器必须比可查看的滚动面板区域更宽。虽然有点 显然，这通常不会发生，因为许多容器似乎更喜欢 垂直扩展而不是水平扩展。

所以我发现的技巧是添加一个额外的<h:form>，宽度为 2500px， 强制水平滚动条。我宁愿让这种情况基于动态发生 关于桌子的数量，但这至少符合我的要求。

<p:scrollPanel  mode="native" style="height: 250px"> 
  <h:form style='width: 2500px' >
    <ui:repeat value="#{tableBean.tables}" var="table">
      <p:panel style="float: left">
        <f:facet name="header">  
          <h:outputText value="#{table.name}"/>
        </f:facet>
        <p:dataTable id="cars" var="car" value="#{table.carsSmall}"
                     style="float: left" >
          <p:columns value="#{table.columns}" var="column"
                     columnIndexVar="colIndex">
            <f:facet name="header">  
              #{column.header}  
            </f:facet>
            <h:outputText value="#{car[column.property]}"></h:outputText>
          </p:columns>
        </p:dataTable>
      </p:panel>
    </ui:repeat>
  </h:form>
</p:scrollPanel>

请随时改进此答案。