Question

我使用JSF和JPA开发的这个市场java web应用程序用于存储。我决定使用Zurb - Foundation 4 css前端框架使其看起来更好。不幸的是，我仍然是一位经验不足的前端设计师。我的问题是：如何根据来自持久性单元的检索数据动态创建HTML和CSS中的项目？

为了澄清这一点，我将添加一些有关我当前xhtml代码和Zurb - Foundation 4 store template部分代码的代码，我希望动态显示结果。

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

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

Answer 1

如果您希望生成的HTML看起来像这样，则无法使用标准<h:dataTable>。但是如果使用<ui:repeat>，你可以实现类似的东西，它只是迭代思考项目列表而不渲染任何东西。这样您就可以自己呈现表格的内容。像这样：

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

动态创建HTML和CSS项目

1 个答案: