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一樣。。