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.
二维表如下所示:我
<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 | | | |
| | +----+ | | |
+------+--------+--------+--------+
| .... |
| .... |
....
是否可以使用第 3 个维度(字符串列表)在 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 维的数组.可以从
和 的
分别.rowIndexVar
和 colIndexVar
属性访问行和列的索引.p:columns>
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屋!