jsf初学数据表(DataTable)的绑定

来看看简单的datatable例子：

faces:

<h:form>
         <h:dataTable value="#{tableData.names}" var="name">
            <h:column>
               #{name.last},
            </h:column>

            <h:column>
               #{name.first}
            </h:column>
         </h:dataTable>
      </h:form>

在上面的页面中有几个属性值得注意，

value：表示数据源，一般为List、ArrayList、数组等，是从bean得到的数据

var:可以看着是数据源中的一条数据的别名。

在看看bean如下：

@Named // or @ManagedBean
@SessionScoped
public class TableData implements Serializable {
   private static final Name[] names = new Name[] {
       new Name("William", "Dupont"),
       new Name("Anna", "Keeney"),
       new Name("Mariko", "Randor"),
       new Name("John", "Wilson")
   };

   public Name[] getNames() { return names;}
}

就这样一个简单datatable例子。

在开发中一般表格都是有表头和表尾的，表头在DataTable中用<f:facet name="header">表示。修改下上面faces如下：

<h:dataTable value="#{tableData.names}" var="name">
            <h:column>
                <f:facet name="header">last</f:facet>
                #{name.last},
            </h:column>

            <h:column>
                <f:facet name="header">first</f:facet>
               #{name.first}
            </h:column>
         </h:dataTable>

当然样式是可以自己控制的。

 

二：

在我们快速开发中特别是在MVC中使用HTML标签很多。这里还有一种方法来代替Datatable比如下面的例子：

<table class="table-list">
                    <thead>
                        <tr>
                            <th></th>
                            <th style="width:140px">
                                ISBN
                            </th>
                            <th style="width:182px">
                                书名
                            </th>
                            <th>
                                出版日期
                            </th>
                            <th>
                                单价
                            </th>
                            
                        </tr>
                    </thead>
                     <tbody>
                         <ui:repeat value="#{summary.data}" var="name" varStatus="status">
                         <tr>
                            <td>#{status.index + 1}</td>
                            <td>
                                #{name.isbn}
                            </td>
                            <td title="#{name.title}">
                                <input type="text" readonly="readonly" value="#{name.title}" style="background-color:#FFFFFF; border:1px; width:180px;" />
                            </td>
                            <td>
                                #{name.pubdate}
                            </td>
                            <td>
                                #{name.price}
                            </td>
                         </tr>
                         </ui:repeat>
                     </tbody>
                </table>

用

<ui:repeat>来代替DataTable。
repeat的具体用法和datatable一样。。