0

JSF我有这个JPA用于存储的市场 Java Web 应用程序。我决定使用Zurb - Foundation 4css 前端框架让它看起来更好。不幸的是，我仍然是一个缺乏经验的前端设计师。我的问题是：如何根据从持久性单元中检索到的数据在 HTML 和 CSS 中动态创建项目？

为了澄清这一点，我将添加一些关于我当前xhtml代码和部分Zurb - Foundation 4 商店模板的代码，我想用它们动态显示结果。

xhtml:

  <div id="Wrapper"> 
       <div id="content">
   <h:form>
      <h:dataTable var="_items"
                   value="#{itemManager.item}"
                   border="1"
                   binding="#{itemManager.table}">
         <h:column>
            <f:facet name="header">Item</f:facet>
            #{_item.name}
         </h:column>
         <h:column>
            <f:facet name="header">Available Units</f:facet>
            #{_item.stock}
         </h:column>
         <h:column>
            <f:facet name="header">Price</f:facet>
            #{_item.price}
         </h:column>
         <h:column>
            <f:facet name="header">Select</f:facet>
            <h:commandButton value="Select"
                             action="#{itemManager.selectItem}"/>
         </h:column>
      </h:dataTable>
   </h:form>

Zurb - 基础 4：

<div class="large-8 columns">
          <div class="row">

            <div class="large-4 small-6 columns">
              <img src="http://placehold.it/1000x1000&text=Thumbnail">

              <div class="panel">
                <h5>Item Name</h5>
                <h6 class="subheader">$000.00</h6>
              </div>
            </div>

            <div class="large-4 small-6 columns">
              <img src="http://placehold.it/500x500&text=Thumbnail">

等等，你知道它是如何结束的。无论如何，正如您所看到的，这些“面板”是静态的，它们是一一添加的。如何根据检索到的项目动态添加它们？

4

1 回答 1

3

<h:dataTable>如果您希望生成的 HTML 看起来像这样，则不能使用标准。<ui:repeat>但是如果你使用which 将简单地迭代一个项目列表而不渲染任何东西，你可以实现这样的事情。这样您就可以自己渲染表格的内容。像这样的东西：

<div class="large-8 columns">

  <ui:repeat var="_items" value="#{itemManager.item}">

    <div class="row">

      <div class="large-4 small-6 columns">
        <img src="#{_item.image}">

        <div class="panel">
          <h5>#{_item.name}</h5>
          <h6 class="subheader">#{_item.price}</h6>
        </div>
      </div>
于 2013-10-13T06:53:10.507 回答