JSFのdataTableの行を更新する方法

JSF dataTableの行を更新する方法

この例では、「update」関数を追加してdataTableの行を更新することにより、前のJSF 2 dataTable exampleを拡張しています。

更新コンセプト

全体的なコンセプトは非常にシンプルです:

1. 「編集可能」プロパティを追加して、行の編集ステータスを追跡します。

//...
public class Order{

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

    boolean editable;

    public boolean isEditable() {
        return editable;
    }
    public void setEditable(boolean editable) {
        this.editable = editable;
    }

2. 各行の最後に「編集」リンクを割り当てます。クリックすると、「ediatble」= trueに設定されます。 JSF 2.0では、メソッド式でパラメーター値を直接指定できます。以下の編集アクションを参照してください。

//...




        Action

        

//...
public String editAction(Order order) {

    order.setEditable(true);
    return null;
}

3. JSFページで、「編集可能」= trueの場合、編集用の入力テキストボックスを表示します。それ以外の場合は、通常の出力テキストを表示するだけです。 更新効果をシミュレートする簡単なトリック:)

//...




    Order No

    

    

4. 最後に、変更を保存するボタンを提供します。 入力テキストボックスに変更を加えて保存すると、すべての値が関連するバッキングBeanに自動的にバインドされます。

//...

dataTableの行を更新するために上記の概念を実装するJSF 2.0の例。

1. マネージドBean

「order」という名前のマネージドBean、一目瞭然。

package com.example;

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 orderList =
        new ArrayList(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 getOrderList() {
        return orderList;
    }

    public String saveAction() {

        //get all existing value but set "editable" to false
        for (Order order : orderList){
            order.setEditable(false);
        }
        //return to current page
        return null;

    }

    public String editAction(Order order) {

        order.setEditable(true);
        return null;
    }

    public static class Order{

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

        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タグを使用してデータを表示し、「編集」リンクを作成して行レコードを更新します。



    
        
    
    

        

JSF 2 dataTable example

Order No Product Name Price Quantity Action

3. Demo

上から下に、更新される行レコードを示します。

jsf2-dataTable-Update-Example-1

jsf2-dataTable-Update-Example-2

jsf2-dataTable-Update-Example-3

jsf2-dataTable-Update-Example-4

ソースコードをダウンロード

ダウンロード–JSF-2-DataTable-Update-Example.zip(10KB)