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

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

この例では、dataTableの行を更新するための ”

update

“関数を追加して、以前の

JSF 2 dataTableの例

を拡張しています。

アップデートコンセプト

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

{空} 1。行編集状態を追跡するための “ediatble”プロパティを追加します。

….//…
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では、メソッド式のパラメータ値を直接指定することができます。以下の編集アクションを参照してください。

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

<h:column>

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

        <h:commandLink value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}"/>

</h:column>

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

    order.setEditable(true);
    return null;
}

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

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

<h:column>

    <f:facet name="header">Order No</f:facet>

    <h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}"/>

    <h:outputText value="#{o.orderNo}" rendered="#{not o.editable}"/>

</h:column>

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

….//…
<h:commandButton value=”Save Changes” action=”#{order.saveAction}”/>
</h:column>

=== 例

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

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

<h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}"/>

<h:outputText value="#{o.orderNo}" rendered="#{not o.editable}"/>

</h:column>

<h:column>

<f:facet name="header">Product Name</f:facet>

<h:inputText value="#{o.productName}" size="20" rendered="#{o.editable}"/>

<h:outputText value="#{o.productName}" rendered="#{not o.editable}"/>

</h:column>

<h:column>

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

<h:inputText value="#{o.price}" size="10" rendered="#{o.editable}"/>

<h:outputText value="#{o.price}" rendered="#{not o.editable}"/>

</h:column>

<h:column>

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

<h:inputText value="#{o.qty}" size="5" rendered="#{o.editable}"/>

<h:outputText value="#{o.qty}" rendered="#{not o.editable}"/>

</h:column>

<h:column>

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

<h:commandLink value="Edit" action="#{order.editAction(o)}"
                           rendered="#{not o.editable}"/>

</h:column>

</h:dataTable>

<h:commandButton value="Save Changes" action="#{order.saveAction}"/>

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

=== デモ

上から順に、行レコードが更新されていることを示します。

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

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

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

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

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

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

link://tag/datatable/[datatable]link://tag/jsf2/[jsf2]link://tag/update/[update]

getdocs

13036