举报投诉联系我们 手机版 热门标签 编程学
您的位置：编程学 > JSF DataTable添加删除示例

JSF DataTable添加删除示例

2023-04-01 17:18 Java教程

JSF DataTable添加删除示例

JSF教程 - JSF DataTable添加删除示例


JSF有一个丰富的控件，命名为DataTable来渲染和格式化html表。

使用DataTable，我们可以遍历集合或值数组以显示数据。

DataTable具有以简单的方式修改其数据的属性。

为了使用DataTable，我们需要以下HTML头部。

<html 
   xmlns="http://www.w3.org/1999/xhtml"   
   xmlns:h="http://java.sun.com/jsf/html">
</html>

以下JSF标记

<h:dataTable value="#{userData.employees}" var="employee"
   styleClass="employeeTable"
   headerClass="employeeTableHeader"
   rowClasses="employeeTableOddRow,employeeTableEvenRow">
   <h:column>            
      <f:facet name="header">Name</f:facet>            
      #{employee.name}
   </h:column>
   <h:column>
      <f:facet name="header">Department</f:facet>
      #{employee.department}
   </h:column>
   <h:column>
      <f:facet name="header">Age</f:facet>
      #{employee.age}
   </h:column>
   <h:column>
      <f:facet name="header">Salary</f:facet>
      #{employee.salary}
   </h:column>
</h:dataTable>

将渲染为以下HTML标记。

<table class="employeeTable">
<thead><tr>
   <th class="employeeTableHeader" scope="col">Name</th>
   <th class="employeeTableHeader" scope="col">Department</th>
   <th class="employeeTableHeader" scope="col">Age</th>
   <th class="employeeTableHeader" scope="col">Salary</th>
</tr></thead>
<tbody>
<tr class="employeeTableOddRow">
   <td>Tom</td>
   <td>Marketing</td>
   <td>10</td>
   <td>2000.0</td>
</tr>
<tr class="employeeTableEvenRow">
   <td>Robert</td>
   <td>Marketing</td>
   <td>15</td>
   <td>1000.0</td>
</tr>
</table>

标签属性

属性描述
id标签的标识
dir文本的方向。 有效值为 ltr (从左到右)和 rtl (从右到左)。
styleClass级联样式表(CSS)类名称
value组件的值，通常是值绑定
bgcolor表的背景颜色
border表的边框宽度
cellpadding表格单元周围的填充
cellspacing表格单元格之间的间距
columnClasses列的CSS类的逗号分隔列表
first表中第一行的索引
footerClass表的页脚的CSS类
frame应绘制围绕桌子的框架;有效值:none，above，below，hsides，vsides，lhs，rhs，box，border
headerClass表头的CSS类
rowClasses用于行的CSS类的逗号分隔列表
rules小区之间线路规范; 有效值:组，行，列，全部
summary表格摘要“用于非视觉反馈的目的和结构
var由表示当前项的数据表创建的变量名
title用于辅助功能的标题。 浏览器通常为标题的值创建工具提示
type链接类型; 例如样式表
width元素的宽度
onblur失去焦点的事件处理程序
onchange值更改的事件处理程序
onclick鼠标按钮的事件处理程序点击该元素
ondblclick双击鼠标按钮的事件处理程序
onfocus元素接收焦点的事件处理程序
onkeydown按键的事件处理程序
onkeypress键按下并释放的事件处理程序
onkeyupKey的事件处理程序发布
onmousedown鼠标按钮的事件处理程序
onmousemove鼠标移动的事件处理程序
onmouseout鼠标左的事件处理程序
onmouseover鼠标移动到的事件处理程序
onmouseup释放鼠标按钮的事件处理程序

例子

以下代码来自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">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:column>
            <f:facet name="header">Action</f:facet>
            <h:commandLink value="Delete" action="#{book.deleteAction(o)}" />
          </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:commandButton value="Add" action="#{book.addAction}" />
      </h:form>
    </h:body>
</html>

下面的代码来自UserBean.java。

package cn..common;

import java.io.Serializable;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;

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;
  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 static final ArrayList<Book> bookList = 
    new ArrayList<Book>(Arrays.asList(
    
    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 ArrayList<Book> getBookList() {
    return bookList;
  }
  public String addAction() {
    Book book = new Book(this.bookNo, this.productName, 
      this.price, this.qty);
    bookList.add(book);
    return null;
  }
  public String deleteAction(Book book) {
      
    bookList.remove(book);
    return null;
  }

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

}

以下代码来自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;
}
下载 DataTable_Add_Delete.zip

运行

将生成的WAR文件从目标文件夹复制到Tomcat部署文件夹，并运行Tomcat-Install-folder/bin/startup.bat。

Tomcat完成启动后，在浏览器地址栏中键入以下URL。

http://localhost:8080/simple-webapp/demo.xhtml


阅读全文
以上是编程学为你收集整理的 JSF DataTable添加删除示例全部内容。
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
相关文章
猜您喜欢
标签TAG
本月热门
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部