Question

我想要显示动态数量的2列表使用水平滚动条而不垂直包裹。我尝试过很多次使用ui：repeat和c：forEach的组合，但我似乎无法做到获取水平滚动显示。我不一定与Primefaces结合（我使用的是5.0版），虽然我喜欢它的功能集。

我很熟悉编写Java，所以我可以根据需要修改bean 不同的模型有道理。以下示例是我最接近的例子，但是CSS＆＃34; float：left＆＃34;在p：datatable似乎脆弱，横向滚动条没有出现 - 表格环绕。我也无法想象一种方法来显示具有动态数量的表的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 Tutorial中的bean / entity类：

@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>显示水平滚动条，孩子容器必须比可查看的scrollPanel区域宽。虽然有点很明显，这通常不会发生，因为许多容器似乎更喜欢垂直而不是水平扩展。

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

<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>

请随时改进这个答案。

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

1 个答案: