Display several photos in several rows AND columns with a repeat

问题

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

image1 image2 image3

image4 image5 image6

image7 image8 image9

image10 image11 image12

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 ....]

This is my code :

<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 !

回答1:

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.

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

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

Your code would look like this:

<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>

回答2:

Use @Modulo or some other maths tool to work out the remainder of a division by 3. That will allow you to compute whether to add Computed Text that adds a "" or a "" tag.

I did a similar demo with two columns in the Repeats on Steroids page of my IBM Connect 2013 session with Mike McGarel. The link for the slides and demo database is on my blog, at the bottom of the article, below the youtube video http://www.intec.co.uk/session-slides-and-sample-database-from-ibm-connect/

It was also delivered as a TLCC webinar, though I can't find the link. From Niklas Heidloff's blog it looks like a video was taken http://heidloff.net/home.nsf/dx/16.04.2013093214NHEAUQ.htm

来源：https://stackoverflow.com/questions/25782095/display-several-photos-in-several-rows-and-columns-with-a-repeat

标签

xpages