PrimeFaces 3维数据表 [英] PrimeFaces 3 dimensional DataTable

问题描述

我有一个2D数据表，我想在其中插入可变数量的面板，本质上是创建3D数据表.

I have a 2D DataTable which I would like to insert a variable number of panels inside, essentially creating a 3D DataTable.

二维表如下所示: ll

The 2D table looks as follows: ll

<p:dataTable var="rowName" value="#{tableBean.rowNames}">
   <p:column headerText="" styleClass="ui-widget-header">
      <h:outputText value="#{rowName}"/>
   </p:column>

   <p:columns var="columnName" value="#{tableBean.colNames}" headerText="#{columnName}">
      <p:panel>
         <h:outputText value="panel"/>
      </p:panel>
   </p:columns>
</p:dataTable>

和Java:

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.util.ArrayList;
import java.util.List;

@ManagedBean
@RequestScoped
public class TableBean {
    private List<String> rowNames = new ArrayList<String>();
    private List<String> colNames = new ArrayList<String>();
    private ArrayList<ArrayList<ArrayList<String>>> data3D = new ArrayList<ArrayList<ArrayList<String>>>();

    public TableBean() {
        rowNames.add("row1");
        rowNames.add("row2");

        colNames.add("col1");
        colNames.add("col2");
        colNames.add("col3");

        // Setup 3 dimensional structure
        for (int i = 0; i < rowNames.size(); i++) {
            data3D.add(new ArrayList<ArrayList<String>>());
            for (int j = 0; j < colNames.size(); j++) {
                data3D.get(i).add(new ArrayList<String>());
            }
        }

        // row 1, col 1, 3 items
        data3D.get(0).get(0).add("item1");
        data3D.get(0).get(0).add("item2");
        data3D.get(0).get(0).add("item3");

        // row 1, col 2, 1 items
        data3D.get(0).get(1).add("item1");

        // row 1, col 3, 2 items
        data3D.get(0).get(2).add("item1");
        data3D.get(0).get(2).add("item2");

        // row 2, col 1, 2 item
        data3D.get(1).get(0).add("item1");
        data3D.get(1).get(0).add("item2");

        // row 2, col 2, 1 item
        data3D.get(1).get(1).add("item1");
    }

    public List<String> getRowNames() { return rowNames; }
    public void setRowNames(List<String> rowNames) { this.rowNames = rowNames; }

    public List<String> getColNames() { return colNames; }
    public void setColNames(List<String> colNames) { this.colNames = colNames; }

    public ArrayList<ArrayList<ArrayList<String>>> getData3D() { return data3D; }
    public void setData3D(ArrayList<ArrayList<ArrayList<String>>> data3D) { this.data3D = data3D; }
}

但是我想实现以下目标，其中p1，p2，p3等是PrimeFaces面板:

But I would like to achieve the following, where p1, p2, p3, etc are PrimeFaces panels:

+------+--------+--------+--------+--
|      |  Col1  |  Col2  |  Col3  |  .... .... .... ....
+------+--------+--------+--------+--
|      | +----+ | +----+ | +----+ |
|      | | p1 | | | p1 | | | p1 | |
|      | +----+ | +----+ | +----+ |
| Row1 | | p2 | |        | | p2 | |
|      | +----+ |        | +----+ |
|      | | p3 | |        |        |
|      | +----+ |        |        |
+------+--------+--------+--------+
|      | +----+ | +----+ |        |
|      | | p1 | | | p1 | |        |
| Row2 | +----+ | +----+ |        |
|      | | p2 | |        |        |
|      | +----+ |        |        |
+------+--------+--------+--------+
| .... |
| .... |
  ....

是否可以使用三维空间(字符串列表)在DataTable的每个单元格中为每个字符串创建一个面板?

Is it possible to use the 3rd dimension (list of strings) to create a panel for each string, within each cell of the DataTable?

推荐答案

RongNK建议的解决方案是使用ui:repeat.

The solution as RongNK suggested is to use ui:repeat.

通过使用大括号符号[][]，可以指定第3维的数组.可以分别从<p:dataTable>和<p:columns>的rowIndexVar和colIndexVar属性访问行和列的索引.

By using the brace notation [][], the array from the 3rd dimension can be specified. The index of the row and column can be accessed from the rowIndexVar and colIndexVar attributes from <p:dataTable> and <p:columns> respectively.

<p:dataTable var="rowName" value="#{tableBean.rowNames}" rowIndexVar="rowIdx">
    <p:column headerText="" styleClass="ui-widget-header">
        <h:outputText value="#{rowName}"/>
    </p:column>

    <p:columns var="columnName" value="#{tableBean.colNames}" headerText="#{columnName}"
               columnIndexVar="colIdx">
        <ui:repeat value="#{tableBean.data3D[rowIdx][colIdx]}" var="data">
            <p:panel>
                <h:outputText value="#{data}"/>
            </p:panel>
        </ui:repeat>
    </p:columns>
</p:dataTable>

这篇关于PrimeFaces 3维数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！