仅在 (Primefaces) 数据表的第一行获取 inputText,具有动态列和行
getting inputText on only the first row of a (Primefaces) dataTable, with dynamic columns and rows
我有一个包含动态列和动态行的 Primefaces (5.0) 数据表。
简而言之,我的问题是如何设置它,以便第一行的单元格是一系列 inputText 或 inputTextarea,而第一行下面的行是 outputText?
具体来说,xhtml(根据 BalusC 对 Creating and populating a DataTable dynamically in JSF2.0 的回复)如下:
<p:dataTable var="rowMap" value="#{reviewController.rowMapList}" scrollable="true" scrollWidth="900px" >
<p:columns value="#{reviewController.columnNameList}" var="columnName" headerText="#{columnName}">
<f:facet name="header" >#{columnName}</f:facet>
<f:facet name="header"><p:inputTextarea value="#{rowMap[columnName]}" /></f:facet>
<h:outputText value="#{rowMap[columnName]}" />
</p:columns>
</p:dataTable>
所以我在想,对带有 inputTexts 的行使用分面可能存在问题,因为分面似乎没有参与 dataTable 数据迭代。
那么我如何将第一行作为 "normal" 行(而不是一个方面,如果这是问题的一部分)——但仍然将 inputTextarea 应用于第一行,而不将 inputTextareas 应用于所有行?
为了使其正常工作,我在 reviewController 上使用 @PostConstruct 对其进行了静态设置,如下所示。
@Named
@ViewScoped
public class ReviewController implements Serializable {
private List<String> columnNameList;
private ArrayList<Map<String, Object>> rowMapList;
private Map<String, Object> rowMap;
@PostConstruct
public void init() {
columnNameList = new ArrayList<>();
rowMapList = new ArrayList<>();
columnNameList.add("Source Report");
columnNameList.add("Overview");
columnNameList.add("Question 1");
columnNameList.add("Question 2");
columnNameList.add("Question 3");
Map<String, Object> m = new HashMap<>();
m.put(columnNameList.get(0), "Assessor1");
m.put(columnNameList.get(1), "Assessor1 overview text");
m.put(columnNameList.get(2), "Assessor1 comment on Q1");
m.put(columnNameList.get(3), "Assessor1 comment on Q2");
m.put(columnNameList.get(4), "Assessor1 comment on Q3");
rowMapList.add(m);
m = new HashMap<>();
m.put(columnNameList.get(0), "Assessor2");
m.put(columnNameList.get(1), "Assessor2 overview text");
m.put(columnNameList.get(2), "Assessor2 comment on Q1");
m.put(columnNameList.get(3), "Assessor2 comment on Q2");
m.put(columnNameList.get(4), "Assessor2 comment on Q3");
rowMapList.add(m);
//etc
}
视觉上是这样的:
我想要的是让第一行成为 InputTextarea 的一行,这样用户可以在每个第一行单元格中添加评论以响应其下方行的内容。我已经在视觉上实现了它 - 但正如我上面所说的那样,它不起作用是因为 inputTextareas(我想是因为它们在 facets 中)没有挂接到 rowMap 和 columnName 迭代中
我查看了 primefaces 可编辑数据表 (http://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml) - 这在某种程度上符合要求。但是,它使所有行都可编辑,而不仅仅是第一行。在这种情况下,动态应用列和行会更加复杂。
感谢任何评论或帮助。谢谢。
再次感谢 Unknown:这实际上是您的回答(我不知道是否有更正式的方式将其归因于您,但我很乐意这样做)。非常感激。 xhtml代码如下:
<p:dataTable var="rowMap" rowIndexVar="row" value="#{reviewController.rowMapList}" >
<p:columns value="#{reviewController.columnNameList[0]}" var="columnName" headerText="#{columnName}">
#{rowMap[columnName]}
</p:columns>
<p:columns value="#{reviewController.columnNameList}" columnIndexVar="col" rendered="#{col!=0}" var="columnName" headerText="#{columnName}" >
<f:facet name="header" >#{columnName}</f:facet>
<h:inputTextarea value="#{rowMap[columnName]}" rendered="#{row==0}" />
<h:outputText value="#{rowMap[columnName]}" rendered="#{row!=0}" />
</p:columns>
</p:dataTable>
正如您对行所描述的那样,另外我添加了一个额外的 p:columns 块来区分第一列,并放置了一个带有 rendered="#{col!=0} 的 columnIndexVar " 以主 p:Columns 块为条件,以便第一列没有第一行其他单元格所具有的 inputTextarea。
既然你要求只有第一行是可编辑的,我已经要求你使用 rowIndexVar 来管理行。
You can use p:dataTable's rowIndexVar attribute.
rowIndexVar is Name of iterator to refer each row index.
在EL中可以使用其迭代器名来获取Row Id
例如:如果 rowIndexVar="row" 那么您可以使用 #{row}.
在 EL 中使用该迭代器名称访问每一行索引
示例代码:
<p:dataTable rowIndexVar="row" value="..." var="myVar">
<p:column>
<p:inputTextarea rows="2" cols="25" counter="display"
value="#{myVar.myText}" rendered="#{row==0}" id="comment1"
maxlength="200"
counterTemplate="{0} remaining characters"
autoResize="false">
</p:inputTextarea>
<h:outputText value="#{myVar.myText}" rendered="#{row!=0}" />
</p:column>
....
</p:dataTable>
我有一个包含动态列和动态行的 Primefaces (5.0) 数据表。 简而言之,我的问题是如何设置它,以便第一行的单元格是一系列 inputText 或 inputTextarea,而第一行下面的行是 outputText?
具体来说,xhtml(根据 BalusC 对 Creating and populating a DataTable dynamically in JSF2.0 的回复)如下:
<p:dataTable var="rowMap" value="#{reviewController.rowMapList}" scrollable="true" scrollWidth="900px" >
<p:columns value="#{reviewController.columnNameList}" var="columnName" headerText="#{columnName}">
<f:facet name="header" >#{columnName}</f:facet>
<f:facet name="header"><p:inputTextarea value="#{rowMap[columnName]}" /></f:facet>
<h:outputText value="#{rowMap[columnName]}" />
</p:columns>
</p:dataTable>
所以我在想,对带有 inputTexts 的行使用分面可能存在问题,因为分面似乎没有参与 dataTable 数据迭代。 那么我如何将第一行作为 "normal" 行(而不是一个方面,如果这是问题的一部分)——但仍然将 inputTextarea 应用于第一行,而不将 inputTextareas 应用于所有行?
为了使其正常工作,我在 reviewController 上使用 @PostConstruct 对其进行了静态设置,如下所示。
@Named
@ViewScoped
public class ReviewController implements Serializable {
private List<String> columnNameList;
private ArrayList<Map<String, Object>> rowMapList;
private Map<String, Object> rowMap;
@PostConstruct
public void init() {
columnNameList = new ArrayList<>();
rowMapList = new ArrayList<>();
columnNameList.add("Source Report");
columnNameList.add("Overview");
columnNameList.add("Question 1");
columnNameList.add("Question 2");
columnNameList.add("Question 3");
Map<String, Object> m = new HashMap<>();
m.put(columnNameList.get(0), "Assessor1");
m.put(columnNameList.get(1), "Assessor1 overview text");
m.put(columnNameList.get(2), "Assessor1 comment on Q1");
m.put(columnNameList.get(3), "Assessor1 comment on Q2");
m.put(columnNameList.get(4), "Assessor1 comment on Q3");
rowMapList.add(m);
m = new HashMap<>();
m.put(columnNameList.get(0), "Assessor2");
m.put(columnNameList.get(1), "Assessor2 overview text");
m.put(columnNameList.get(2), "Assessor2 comment on Q1");
m.put(columnNameList.get(3), "Assessor2 comment on Q2");
m.put(columnNameList.get(4), "Assessor2 comment on Q3");
rowMapList.add(m);
//etc
}
视觉上是这样的:
我想要的是让第一行成为 InputTextarea 的一行,这样用户可以在每个第一行单元格中添加评论以响应其下方行的内容。我已经在视觉上实现了它 - 但正如我上面所说的那样,它不起作用是因为 inputTextareas(我想是因为它们在 facets 中)没有挂接到 rowMap 和 columnName 迭代中
我查看了 primefaces 可编辑数据表 (http://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml) - 这在某种程度上符合要求。但是,它使所有行都可编辑,而不仅仅是第一行。在这种情况下,动态应用列和行会更加复杂。
感谢任何评论或帮助。谢谢。
再次感谢 Unknown:这实际上是您的回答(我不知道是否有更正式的方式将其归因于您,但我很乐意这样做)。非常感激。 xhtml代码如下:
<p:dataTable var="rowMap" rowIndexVar="row" value="#{reviewController.rowMapList}" >
<p:columns value="#{reviewController.columnNameList[0]}" var="columnName" headerText="#{columnName}">
#{rowMap[columnName]}
</p:columns>
<p:columns value="#{reviewController.columnNameList}" columnIndexVar="col" rendered="#{col!=0}" var="columnName" headerText="#{columnName}" >
<f:facet name="header" >#{columnName}</f:facet>
<h:inputTextarea value="#{rowMap[columnName]}" rendered="#{row==0}" />
<h:outputText value="#{rowMap[columnName]}" rendered="#{row!=0}" />
</p:columns>
</p:dataTable>
正如您对行所描述的那样,另外我添加了一个额外的 p:columns 块来区分第一列,并放置了一个带有 rendered="#{col!=0} 的 columnIndexVar " 以主 p:Columns 块为条件,以便第一列没有第一行其他单元格所具有的 inputTextarea。
既然你要求只有第一行是可编辑的,我已经要求你使用 rowIndexVar 来管理行。
You can use p:dataTable's rowIndexVar attribute.
rowIndexVar is Name of iterator to refer each row index.
在EL中可以使用其迭代器名来获取Row Id
例如:如果 rowIndexVar="row" 那么您可以使用 #{row}.
在 EL 中使用该迭代器名称访问每一行索引示例代码:
<p:dataTable rowIndexVar="row" value="..." var="myVar">
<p:column>
<p:inputTextarea rows="2" cols="25" counter="display"
value="#{myVar.myText}" rendered="#{row==0}" id="comment1"
maxlength="200"
counterTemplate="{0} remaining characters"
autoResize="false">
</p:inputTextarea>
<h:outputText value="#{myVar.myText}" rendered="#{row!=0}" />
</p:column>
....
</p:dataTable>