JSFのdataTableで行を削除する方法

投稿日: 2019-11-05 2019-11-05
タグ: datatable, delete, jsf2

この例では、dataTableの行を削除するための “delete”関数を追加して、以前の

JSF 2 dataTableの例

を拡張しています。

コンセプトを削除する

全体のコンセプトは非常にシンプルです。

{空} 1。各行の最後に「削除」リンクを割り当てます。

….//…
<h:dataTable value=”#{order.orderList}” var=”o”>

<h:column>

<f:facet name="header">Action</f:facet>

<h:commandLink value="Delete" action="#{order.deleteAction(o)}"/>

</h:column>

{空} 2。 "Delete"リンクがクリックされた場合は、現在の行オブジェクトをdeleteAction（）に渡します。 deleteAction（）メソッドでは、現在の行オブジェクトを「リスト」から削除し、現在のページに戻します。

public String deleteAction(Order order) {

    orderList.remove(order);
    return null;
}

=== 例

dataTableの行を削除するための上記のコンセプトを実装するJSF 2.0の例。

===  1.マネージドBean

"order"という名前のマネージドBeanは、自明です。

package com.mkyong;

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=”order”)
@SessionScoped
public class OrderBean implements Serializable{

private static final long serialVersionUID = 1L;

private static final ArrayList<Order> orderList =
    new ArrayList<Order>(Arrays.asList(

    new Order("A0001", "Intel CPU",
            new BigDecimal("700.00"), 1),
    new Order("A0002", "Harddisk 10TB",
            new BigDecimal("500.00"), 2),
    new Order("A0003", "Dell Laptop",
            new BigDecimal("11600.00"), 8),
    new Order("A0004", "Samsung LCD",
            new BigDecimal("5200.00"), 3),
    new Order("A0005", "A4Tech Mouse",
            new BigDecimal("100.00"), 10)
));

public ArrayList<Order> getOrderList() {

return orderList;

public String deleteAction(Order order) {

    orderList.remove(order);
    return null;
}

public static class Order{

String orderNo;
String productName;
BigDecimal price;
int qty;

public Order(String orderNo, String productName,
        BigDecimal price, int qty) {
    this.orderNo = orderNo;
    this.productName = productName;
    this.price = price;
    this.qty = qty;
}

       //getter and setter methods
    }
}

===  2. JSFページ

JSFページでdataTableタグを使用してデータを表示し、「削除」リンクを作成して行レコードを削除します。

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

<h1>JSF 2 dataTable example</h1>
<h:form>
    <h:dataTable value="#{order.orderList}" var="o"
        styleClass="order-table"
        headerClass="order-table-header"
        rowClasses="order-table-odd-row,order-table-even-row"
    >

<h:column>

<f:facet name="header">Order No</f:facet>
#{o.orderNo}

</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="#{order.deleteAction(o)}"/>

</h:column>

</h:dataTable>

        </h:form>
    </h:body>
</html>

=== デモ

上から順に、削除される行レコードを示します。

image://wp-content/uploads/2010/10/jsf2-dataTable-Delete-Example-1.png[jsf2-dataTable-Delete-Example-1、title = "jsf2-dataTable-Delete-Example-1"、幅= 640、高さ= 417]

image://wp-content/uploads/2010/10/jsf2-dataTable-Delete-Example-2.png[jsf2-dataTable-Delete-Example-2、title = "jsf2-dataTable-Delete-Example-2"、幅= 640、高さ= 417]

=== ソースコードをダウンロードする

ダウンロード - リンク://wp-content/uploads/2010/10/JSF-2-DataTable-Delete-Example.zip[JSF-2-DataTable-Delete-Example.zip]（10KB）

link://tag/datatable/[datatable]link://タグ/delete/[delete]リンク://タグ/jsf2/[jsf2]

getdocs

13036