Question

我正在使用标签ui：repeat来显示图片及其标题列表。

我的代码是：

 <p:dialog id="idSchemaDlg5"  widgetVar="schemaDlg"  position="10" resizable="true"  modal="true"   header="Schéma des composants">


            <h:panelGrid columns="1">
                <ui:repeat value="#{imageStreamer.pictureNamesList}" var="imageName" >

                   <h:panelGrid columns="#{imageStreamer.pictureNamesList.size()}">
                        <p:graphicImage value="#{imageStreamer.image}" >
                            <f:param name="pictureName" value="#{imageName}" />
                        </p:graphicImage>
                    <h:outputText value="#{imageName}"/>

                </ui:repeat>
            </h:panelGrid>

  </p:dialog>

我会水平显示图片列表，但是带有此代码的图片列表是垂直显示的。

欢迎任何帮助。

Answer 1

我希望在输出<table><tbody><tr><td><img1/><title1/></td><td><img2/><title2/></td><img3/><titl‌e3/><td></td></tr></table>
中使用此结构

<ui:repeat>内的<h:panelGrid>不会生成多个表格单元格。它只会生成一个表格单元格。实际上，<h:panelGrid>的每个直接子UI组件都算作单个表格单元格。 <ui:repeat>是一个UI组件。

您需要<c:forEach>。它是一个标记处理程序，在构建JSF组件树期间运行，而不是在生成HTML输出期间运行。它生成物理上多个JSF组件，与<ui:repeat>相反，<h:panelGrid columns="#{imageStreamer.pictureNamesList.size()}"> <c:forEach items="#{imageStreamer.pictureNamesList}" var="imageName"> <h:panelGroup> <p:graphicImage value="#{imageStreamer.image}"> <f:param name="pictureName" value="#{imageName}" /> </p:graphicImage> <h:outputText value="#{imageName}"/> </h:panelGroup> </c:forEach> </h:panelGrid>表示物理上一个JSF组件，在生成HTML输出时每次都重复使用。

<h:panelGroup>

（请注意，您需要将图像和文本包装在<ui:repeat>中以表示单个表格单元格）

或者，如果您坚持使用<table> <tbody> <tr> <ui:repeat value="#{imageStreamer.pictureNamesList}" var="imageName"> <td> <p:graphicImage value="#{imageStreamer.image}"> <f:param name="pictureName" value="#{imageName}" /> </p:graphicImage> <h:outputText value="#{imageName}"/> </td> </ui:repeat> </tr> </tbody> </table>，那么您必须自己写下所需的HTML输出。

{{1}}

另见：

Answer 2

你必须改变h：panelGrid和p：graphicImage的顺序。因为你重复创建h：panelGrid，其size（）为列数。你的代码变成了：

     <p:dialog id="idSchemaDlg5"  widgetVar="schemaDlg"  position="10" resizable="true"  modal="true"   header="Schéma des composants">

                     <h:panelGrid columns="#{imageStreamer.pictureNamesList.size()}"> 

<ui:repeat value="#{imageStreamer.pictureNamesList}" var="imageName" > 

<table border="0" cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
<td> <p:graphicImage value="#{imageStreamer.image}" > 
<f:param name="pictureName" value="#{imageName}" /> 
</p:graphicImage> 
</td> 
</tr> 
<tr> 
<td ><h:outputText value="#{imageName}"/></td> 
</tr> 
</table> 
</ui:repeat> 
</h:panelGrid>
              </p:dialog>

在ui：repeat中水平显示p：graphicImage列表及其标题

2 个答案:

另见：