Question

我有这个UI结构：

<ice:panelSeries value="#{bean.list}" var="item" varStatus="vs">
    <div class="row-fluid">
        <div class="span6"></div>
    </div>
</ice:panelSeries>

我想使用模块条件div.row-fluid创建#{vs.index % 2 == 0}，以便在div.row-fluid个div之后附加span6，以创建动态网格视图。

我尝试使用ice:panelGroup用rendered="#{vs.index % 2 == 0}"包裹的内部内容，但是当条件变为真时，这会隐藏行。

另外，我尝试用div.row-fluid标记包装c:if，正如我们通常用其他语言动态创建html元素一样：

<c:if test="#{vs.index % 2 == 0}"><div class="row-fluid"><c:if>
    <div class="span4"></div>
<c:if test="#{vs.index % 2 == 0}"></div><c:if>

这会导致页面崩溃，导致<div>未正确关闭。主要问题是我必须单独打开和关闭div。

有没有办法在JSF中使用icefaces组件实现这一点???

Answer 1

根据您的实际成就，您有两种选择：

如果要静态控制（在服务器端）必须如何显示内容，那么只需将bean放在2D数组而不是列表中，然后在UI声明中使用两个嵌套循环
如果行没有任何商业意义，但仅仅是为了最好地使用水平监视器空间，那么使用一些网格框架专门在客户端工作，可能是以响应方式。例如，使用Twitter Bootstrap can write：

<div class="container">
    <div class="row">
      <div class="col-md-6 O"></div>
      <div class="col-md-6 O"></div>
      <div class="col-md-6 O"></div>
      <div class="col-md-6 O"></div>
    </div>
</div>

不在标记中创建多行

Answer 2

这会导致页面崩溃，导致<div>未正确关闭

您可以通过<h:outputText escape="false">传递转义的XML来欺骗这一点。

<h:outputText value="&lt;div class=&quot;row-fluid&quot;&gt;" escape="false" rendered="#{vs.index mod 2 eq 0}" />
    <div class="span4"></div>
<h:outputText value="&lt;/div&gt;" escape="false" rendered="#{vs.index mod 2 eq 0}" />

使用ice：panelSeries中的索引值有条件地附加包装器div

2 个答案: