在多行和多列中显示多张照片并重复 [英] Display several photos in several rows AND columns with a repeat

问题描述

我想在一个窗口中显示多行 3 列的照片.

I would like display photos in a window on several rows and 3 columns.

image1 image2 image3

image1 image2 image3

image4 image5 image6

image4 image5 image6

image7 image8 image9

image7 image8 image9

image10 image11 image12

image10 image11 image12

其实我发现把 photo1, 2, 3 和其他的放在 photo3 后面但是不可见...

Actually I find to put photo1, 2 and 3 and the others are behind photo3 but not visible...

image1 image2 image3 [image4 image5 image6 image7 ....]

image1 image2 image3 [image4 image5 image6 image7 ....]

这是我的代码:

<xp:table>
                <xp:tr> 
                <xp:repeat id="picturesRpt" value="#{dsvListePhoto}"
                    indexVar="i" var="picture" rows="3" >

                    <xp:panel>
                        <xp:this.data>
                            <xp:dominoDocument var="pictureDoc"
                                action="openDocument"
                                documentId="#{javascript:picture.getUniversalID()}"
                                ignoreRequestParams="true">
                            </xp:dominoDocument>
                        </xp:this.data>

                        <xp:div>
                            <xp:td>
                            <xp:div styleClass="listePhotos">
                                <xp:div>                                            
                                        <xp:image id="image1">
                                            <xp:this.url><![CDATA[#{javascript: "http://monserveur/devpt/Xpages/xphoto/PhotoWeb.nsf/" + compositeData.vueUtilisee + "/" + pictureDoc.getDocument().getUniversalID() + "/$File/TIMBRE_image.jpg?OpenElement"}]]></xp:this.url>
                                        </xp:image>
                                        <xp:text
                                            value="#{pictureDoc.Titre}" />
                                                                        <xp:br></xp:br>
                                </xp:div>
                                <xp:div>
                                    <xp:text
                                        value="#{pictureDoc.IdNiveau1} / #{pictureDoc.IdNiveau2}" />
                                </xp:div>

                        </xp:div>
                    </xp:panel>                 

                </xp:repeat>
                </xp:tr>
                </xp:table>

一个想法?感谢您的帮助！

An idea ? Thanks for your help !

推荐答案

当你决定创建一个 表格 包含三列 每三张图片结束并开始一个表格行.每当新的表格行开始时，将 </tr><tr> 添加到呈现的 HTML 中.当 indexVar i 为 3、6、9 等时就是这种情况.

As you decided to create a table with three columns finish and start a table row every three pictures. Add </tr><tr> to rendered HTML whenever a new table row shall start. That is the case when indexVar i is 3, 6, 9, and so on.

使用内容类型为 HTML 的计算字段添加 </tr><tr> 标记并使用呈现条件

Add the </tr><tr> tags with a computed field of content type HTML and use the rendered condition

(i > 0) && (i%3 == 0)

您的代码如下所示:

<xp:table>
    <xp:tr>
        <xp:repeat
            id="picturesRpt"
            value="#{dsvListePhoto}"
            indexVar="i"
            var="picture"
            rows="1000">
            <xp:text escape="false">
                <xp:this.rendered><![CDATA[#{javascript:
                    (i > 0) && (i%3 == 0)   }]]></xp:this.rendered>
                <xp:this.value><![CDATA[#{javascript:
                    "</tr><tr>"             }]]></xp:this.value>
            </xp:text>
            <xp:td>
                ... picture ...
            </xp:td>
        </xp:repeat>
    </xp:tr>
</xp:table>

这篇关于在多行和多列中显示多张照片并重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！