Показать несколько фотографий в нескольких строках И столбцы с повторением

Question

Я хотел бы отображать фотографии в окне на несколько строк и 3 столбца.

image1 image2 image3

image4 image5 image6

image7 image8 image9

image10 image11 image12

На самом деле я считаю, поставить фото1, 2 и 3, а остальные находятся за Фото3, но не вид ...

изображение1 изображение2 изображение3 [изображение4 изображение5 изображение6 изображение7 ....]

Это мой код:

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

идея? Спасибо за помощь!

Answer 1

Как вы решили создать таблицу с тремя столбцами закончить и начать строку таблицы каждых три картины. Добавьте </tr><tr> к визуализированному HTML, когда начнется новая строка таблицы. Это тот случай, когда indexVar i равен 3, 6, 9 и т. Д.

Добавить </tr><tr> метки с вычисленным полем типа содержимого HTML и использовать обработанную условие

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

Answer 2

Используйте @Modulo или какой-либо другой инструмент математики, чтобы выработать остаток от деления на 3. Это позволит вам вычислить, следует ли добавлять вычисляемый текст, добавляющий тег «» или «».

Я сделал аналогичную демоверсию с двумя столбцами на странице «Повторы на стероидах» моей сессии IBM Connect 2013 с Майком МакГарелем. Ссылка на слайды и демонстрационную базу данных находится в моем блоге, внизу статьи, ниже видео с youtube. http://www.intec.co.uk/session-slides-and-sample-database-from-ibm-connect/

Он также был предоставлен в качестве вебинара TLCC, хотя я не могу найти ссылку. Из блог Никлас Хайдлофф в это выглядит как видео было размещено http://heidloff.net/home.nsf/dx/16.04.2013093214NHEAUQ.htm