使用重复显示多行和多列中的多张照片

时间:2014-09-11 07:56:24

标签: xpages

我想在几行和3列的窗口中显示照片。

image1 image2 image3

image4 image5 image6

image7 image8 image9

image10 image11 image12

实际上我发现将photo1,2和3以及其他人放在photo3后面但不可见......

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>

一个想法? 谢谢你的帮助!

2 个答案:

答案 0 :(得分:1)

使用@Modulo或其他数学工具计算除法的余数3.这将允许您计算是否添加添加“”或“”标记的计算文本。

我在与Mike McGarel的IBM Connect 2013会话的“重复在类固醇”页面上做了两个类似的演示。幻灯片和演示数据库的链接位于我的博客上,位于文章底部的YouTube视频http://www.intec.co.uk/session-slides-and-sample-database-from-ibm-connect/下面

它也作为TLCC网络研讨会提供,但我找不到链接。来自Niklas Heidloff的博客看起来像是一段视频http://heidloff.net/home.nsf/dx/16.04.2013093214NHEAUQ.htm

答案 1 :(得分:1)

当你决定创建一个,其中三列完成并开始一个表行每三张图片。每当新表行开始时,将</tr><tr>添加到呈现的HTML。当indexVar i为3,6,9等时就是这种情况。

enter image description here

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

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