我通过 ui:repeat 标签在 JSF 中创建了一个表。我正在尝试通过 jquery 在客户端添加/删除行。通过显示新添加的行或删除前端的特定行，效果很好。
但是，当我提交表单以查看新行是否反射(reflect)在服务器端时，数组列表似乎没有反射(reflect)浏览器上显示的最新行，但它只有初始列表在更新之前出现。
我是 JSF 新手，经过大量搜索后，我无法找到如何更新新行以反射(reflect)在最初创建表的服务器端数组列表上。
谁能告诉我这是否可能，如果可以的话如何做到？
提前致谢。
请在下面找到我的代码:
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;
}
}
最佳答案
您不能那样操纵 JSF 状态。
您必须从服务器端添加新行，并通过更新 ui:repeat 来呈现它们。
而不是 <a onclick="appendNewDummyRow();return false;" href="">addDummyRow</a>您应该创建一个按钮(或命令链接)作为
<p:commandButton value="addDummyRow" process="@this" update="myObjectId" action="#{userData.addEmployee}" />
关于javascript - JSF - 通过 jquery 更新的表未反射(reflect)在服务器端的页面提交上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23164217/