【发布时间】：2014-06-03 13:25:15
【问题描述】：
我通过 ui:repeat 标签在 JSF 中创建了一个表。我正在尝试通过 jquery 在客户端添加/删除行。通过显示新添加的行或删除前端的特定行可以正常工作。
但是，当我提交表单以查看新行是否反映在服务器端时，arraylist 似乎没有反映浏览器上显示的最新行，但它只有初始列表在更新之前呈现。
我是 JSF 新手，经过大量搜索后，我无法找到如何进行新行更新以反映最初创建表的服务器端数组列表。
谁能告诉我这是否可行，如果可行，如何实现？
提前致谢。
请在下面找到我的代码：
JSF：
<?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:outputScript library="js" name="jquery-2.1.0.js" target="body" />
<h:outputScript target="body">
function my_new_js_function()
{
$('tr').click(function(){
var currentRow = $(this);
currentRow.remove();
});
return false;
}
function appendNewDummyRow()
{
$('#myTable').append('<tr id="myRow"><td id="myCell"><input id="myForm:myObjectId:5:empName" type="text" name="myForm:myObjectId:5:empName" value="New Name" size="10" /></td><td><input id="myForm:myObjectId:5:empDepartment" type="text" name="myForm:myObjectId:5:empDepartment" value="New Customer Care" size="20" /></td><td><input id="myForm:myObjectId:5:empAge" type="text" name="myForm:myObjectId:5:empAge" value="0" size="5" /></td><td><input id="myForm:myObjectId:5:empSalary" type="text" name="myForm:myObjectId:5:empSalary" value="0" size="5" /></td><td><a class="deleteLink" onclick="my_new_js_function();return false;">delete</a></td></tr>');
//alert(document.getElementById('myTable').innerHTML);
$('#myTable').html(document.getElementById('myTable').innerHTML);
return false;
}
</h:outputScript>
<h:head>
<title>JSF Sample</title>
<h:outputStylesheet library="css" name="styles.css" />
</h:head>
<h:body>
<div id="msgid"></div>
<h2>DataTable Example</h2>
<h:form id="myForm">
<table id="myTable" border="1" styleClass="employeeTable">
<ui:repeat id="myObjectId" var="employee" value="#{userData.employees}">
<tr id="myRow">
<td id="myCell"><h:inputText id="empName" value="#{employee.name}" size="10" /></td>
<td><h:inputText id="empDepartment" value="#{employee.department}" size="20" />
</td>
<td><h:inputText id="empAge" value="#{employee.age}" size="5" /></td>
<td><h:inputText id="empSalary" value="#{employee.salary}" size="5" /></td>
<td><a class="deleteLink"
onclick="my_new_js_function();return false;" href="">delete</a></td>
</tr>
</ui:repeat>
</table>
<h:commandButton value="Check Result" action="#{userData.checkResult}">
<f:ajax execute="@form @this"></f:ajax>
</h:commandButton>
<a onclick="appendNewDummyRow();return false;" href="">addDummyRow</a>
</h:form>
</h:body>
</html>
UserBean.java:
import java.io.Serializable;
import java.util.ArrayList;
import java.util.Arrays;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "userData")
@SessionScoped
public class UserData implements Serializable {
public UserData()
{
if(employees == null)
employees = new ArrayList<Employee>();
}
private static final long serialVersionUID = 1L;
private String name;
private String department;
private int age;
private double salary;
private ArrayList<Employee> employees
= new ArrayList<Employee>(Arrays.asList(
new Employee("John", "Marketing", 30,2000.00),
new Employee("Robert", "Marketing", 35,3000.00),
new Employee("Mark", "Sales", 25,2500.00),
new Employee("Chris", "Marketing", 33,2500.00),
new Employee("Peter", "Customer Care", 20,1500.00)
));
public ArrayList<Employee> getEmployees() {
return employees;
}
public void setEmployees(ArrayList<Employee> employees) {
this.employees = employees;
}
public String addEmployee() {
Employee employee = new Employee(name,department,age,salary);
employees.add(employee);
return null;
}
public String deleteEmployee(Employee employee) {
employees.remove(employee);
return null;
}
public void checkResult() {
System.out.println("printing new size of the list = "+ employees.size());
for (Employee employee : employees){
System.out.println("Value given from input text = "+ employee.getName());
}
}
public String editEmployee(Employee employee){
employee.setCanEdit(true);
return null;
}
public String saveEmployees(){
//set "canEdit" of all employees to false
for (Employee employee : employees){
employee.setCanEdit(false);
}
return null;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public double getSalary() {
return salary;
}
public void setSalary(double salary) {
this.salary = salary;
}
}
【问题讨论】：
标签： javascript jquery jsf jsf-2