0
Ich arbeite an dieser JSF-Tabelle, die für die Anzeige von Daten verwendet wird.Wie fügt man eine klare Schaltfläche in die JSF-Tabelle ein?
Wenn ich auf die Schaltfläche Bearbeiten können Sie die Zeile in in die JSF-Seite bearbeiten sein.
Dies ist der Code:
<?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="#{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">Select</f:facet>
<h:selectBooleanCheckbox value="#{order.selectedIds[dataItem.id]}" />
</h:column>
<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:commandButton value="Delete" action="#{order.getSelectedItems}" />
</h:form>
</h:body>
</html>
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="order")
@SessionScoped
public class OrderBean implements Serializable{
private Map<Long, Boolean> selectedIds = new HashMap<Long, Boolean>();
private List<OrderBean> selectedDataList;
Iterable<OrderBean> dataList = null;
public String getSelectedItems() {
// Get selected items.
selectedDataList = new ArrayList<OrderBean>();
for (OrderBean dataItem : dataList) {
if (selectedIds.get(dataItem.getId()).booleanValue()) {
selectedDataList.add(dataItem);
selectedIds.remove(dataItem.getId()); // Reset.
/* Insert into DB SQL stetement which deletes rows by using
dataItem as key */
}
}
return "selected"; // Navigation case.
}
public Map<Long, Boolean> getSelectedIds() {
return selectedIds;
}
public List<OrderBean> getSelectedDataList() {
return selectedDataList;
}
/* Create list with data */
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;
}
private Object getId() {
throw new UnsupportedOperationException("Not yet implemented");
}
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;
}
public boolean isEditable() {
return editable;
}
public void setEditable(boolean editable) {
this.editable = editable;
}
public String getOrderNo() {
return orderNo;
}
public void setOrderNo(String orderNo) {
this.orderNo = orderNo;
}
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;
}
}
}
I Abbrechen Schaltfläche hinzufügen möchten, die nach dem Bearbeiten-Button angezeigt wird, eingeschoben. Wenn ich jetzt abbrechen möchte, um die Tabelle zu bearbeiten, muss ich die Seite neu laden. Wie kann ich diesen Knopf hinzufügen?
Können Sie mir zeigen, wie dies mit AJAX getan werden? –
@Peter Edited meine Antwort. –
Ich habe den Code auf diese Weise bearbeitet: http://pastebin.com/mX2g5ii3 Ich habe die ID der Tabelle in die JSF-Schaltfläche eingefügt. Ist das richtig? –