2017-09-14 250 views
2

我想建立这样一个电网:当父组件呈现属性为false时呈现子组件?

元素1元素2元素3

元素4元素5元素6

我有以下代码:

<ui:repeat value=#{beans.myElementList} var="element" varStatus="i"> 
    <b:row rendered=#{i.index%3==0}> 
     <b:column medium-screen="4"> 
     #{element.display} 
     </b:column> 
    </b:row> 
</ui:repeat> 

我的代码的结果:

元素1

元素4

如何解决这个问题?

+0

你不能像这样使用“渲染”......如果你想真正开始一个新的行,每三个项目你需要一个更有创意的解决方案。其中之一:https://stackoverflow.com/questions/10481742/jsf-2-uirepeat-group-every-n-items-inside-a-div – Kukeltje

回答

1

请尝试下面的代码。
第一个UI:为每个3个元素重复渲染<row>,第二个渲染元素(在<column>之内)以3个元素为一组。

<ui:repeat value="#{beans.myElementList}" step="3" varStatus="i" > 

    <b:row> 
     <ui:repeat value="#{beans.myElementList}" var="element" 
        step="1" offset="#{i.index}" 
        size="#{i.index + 3 le beans.myElementList.size() ? i.index + 3 : beans.myElementList.size() }" 
        varStatus="j" > 
      <b:column medium-screen="4"> 
       #{element.display} 
      </b:column>   
     </ui:repeat> 
    </b:row> 

</ui:repeat> 
+0

所以你同意它(除了'div's被替换通过'行'和'列')重复https://stackoverflow.com/questions/10481742/jsf-2-uirepeat-group-every-n-items-inside-a-div? – Kukeltje

+0

谢谢。我的问题解决了。 –

3

<b:panelGrid>救援:

<ui:repeat value=#{beans.myElementList} var="element"> 
    <b:panelGrid columns="3" size="md"> 
    #{element.display} 
    </b:panelGrid> 
</ui:repeat> 

<b:panelGrid>由标准<h:panelGrid>,这使得一个HTML表格的启发。同样,<b:panelGrid>呈现由Bootstrap行和列组成的表。简单地把你想要显示的所有东西放到面板网格中。 BootsFaces自动检测何时渲染新行。

我最初想到的用例是表单。通常情况下,这种形式是重复相同的行:标签,输入字段,错误消息。 <b:panelGrid>允许您以最小的努力创建像这样的表格形式。

另请参阅documentation of <b:panelGrid>

直到BootsFaces 1.2.0发布: 看看文档,我看到的不是很高兴。所以我纠正并更新了它。在BootsFaces 1.2.0发布之前,请参阅documentation of the developer showcase