以下代碼顯示如何向DataTable添加行號。
以下代碼來自demo.xhtml。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> <h:outputStylesheet library="css" name="table-style.css" /> </h:head> <h:body> <h:form> <h:dataTable value="#{book.bookList}" var="o" styleClass="book-table" headerClass="book-table-header" rowClasses="book-table-odd-row,book-table-even-row"> <h:column> <f:facet name="header">No</f:facet> #{book.bookList.rowIndex + 1} </h:column> <h:column> <f:facet name="header">Book No</f:facet>#{o.bookNo} </h:column> <h:column> <f:facet name="header">Product Name</f:facet>#{o.productName} </h:column> <h:column> <f:facet name="header">Price</f:facet>#{o.price} </h:column> <h:column> <f:facet name="header">Quantity</f:facet>#{o.qty} </h:column> </h:dataTable> <h3>Enter Book</h3> <table> <tr> <td>Book No :</td> <td><h:inputText size="20" value="#{book.bookNo}" /></td> </tr> <tr> <td>Product Name :</td> <td><h:inputText size="20" value="#{book.productName}" /></td> </tr> <tr> <td>Quantity :</td> <td><h:inputText size="20" value="#{book.price}" /></td> </tr> <tr> <td>Price :</td> <td><h:inputText size="20" value="#{book.qty}" /></td> </tr> </table> </h:form> </h:body> </html>
以下代碼來自table-style.css。
.book-table-header{ bbook-bottom:1px solid #BBB; padding:16px; } .book-table-odd-row{ bbook-top:1px solid #BBB; } .book-table-even-row{ bbook-top:1px solid #BBB; }
下面的代碼來自UserBean.java。
package cn.w3cschool.common; import java.io.Serializable; import java.math.BigDecimal; import java.util.ArrayList; import java.util.Arrays; import javax.faces.model.ArrayDataModel; import javax.faces.model.DataModel; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name="book") @SessionScoped public class UserBean implements Serializable{ private static final long serialVersionUID = 1L; String bookNo; String productName; BigDecimal price; int qty; private static final Book[] bookList = new Book[]{ new Book("1", "CSS", new BigDecimal("123.12"), 1), new Book("2", "HTML", new BigDecimal("321.12"), 2), new Book("3", "SQL", new BigDecimal("12333.33"), 8), new Book("4", "Javascript", new BigDecimal("1233.33"), 3), new Book("5", "Web", new BigDecimal("123.22"), 10) }; public String getBookNo() { return bookNo; } public void setBookNo(String bookNo) { this.bookNo = bookNo; } public String getProductName() { return productName; } public void setProductName(String productName) { this.productName = productName; } public BigDecimal getPrice() { return price; } public void setPrice(BigDecimal price) { this.price = price; } public int getQty() { return qty; } public void setQty(int qty) { this.qty = qty; } private DataModel<Book> book = new ArrayDataModel<Book>(bookList); public DataModel<Book> getBookList() { return book; } public static class Book{ String bookNo; String productName; BigDecimal price; int qty; public Book(String bookNo, String productName, BigDecimal price, int qty) { this.bookNo = bookNo; this.productName = productName; this.price = price; this.qty = qty; } public String getBookNo() { return bookNo; } public void setBookNo(String bookNo) { this.bookNo = bookNo; } public String getProductName() { return productName; } public void setProductName(String productName) { this.productName = productName; } public BigDecimal getPrice() { return price; } public void setPrice(BigDecimal price) { this.price = price; } public int getQty() { return qty; } public void setQty(int qty) { this.qty = qty; } } }下載 DataTable_Row_Number.zip
將生成的WAR文件從目標文件夾復制到Tomcat部署文件夾,并運行Tomcat-Install-folder/bin/startup.bat。
Tomcat完成啟動后,在瀏覽器地址欄中鍵入以下URL。
http://localhost:8080/simple-webapp/demo.xhtml
更多建議: