1
나는 ui : repeat 태그를 통해 JSF에서 테이블을 만들었습니다. 그리고 jquery를 통해 클라이언트 측에 행을 추가/제거하려고합니다. 새로 추가 된 행을 표시하거나 프런트 엔드의 특정 행을 제거하여 올바르게 작동합니다.JSF - jquery를 통해 업데이트 된 테이블이 서버 쪽의 페이지 제출에 반영되지 않음
그러나 새 행이 서버 측에 반영되는지 확인하기 위해 양식을 제출할 때 arraylist는 브라우저에 표시된 최신 행을 반영하지 않는 것처럼 보이지만 초기 목록은 업데이 트하기 전에 존재했다.
저는 JSF를 처음 접했고 많은 검색을 한 후에 테이블이 처음 생성 된 서버 측 arraylist를 반영하여 새 행 업데이트를 만드는 방법을 찾을 수 없습니다.
아무도 말해 줄 수 있습니까? 가능하다면 어떻게 할 수 있습니까?
미리 감사드립니다.
찾아주세요 아래에있는 내 코드 :
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;
}
}
감사 @Tushee로 버튼 (또는 명령 링크)를 작성해야합니다. 그러나 우리 프로젝트에서 상사는 행 추가 또는 삭제를 통해 클라이언트 측 테이블 조작을 시도한 다음 양식 제출시 마지막으로 서버 측에 새 목록을 보내주기를 원합니다. 그는 우리가 정상적인 클라이언트 측 데이터 조작을 위해 서버 측에 불필요한 이동을해서는 안된다고 말했습니다. 그래서 나는 이런 식으로 운동하려고 노력하고있다. 그래서 Jquery 또는 javascript를 통해 클라이언트 측에서 조작 된 상태가 서버 측에 반영되도록하는 방법이 없습니까? – user3536329
나는 테이블에 행 추가나 제거를 위해 서버 측으로의 이동을 피할 수 있고 마지막으로 목록을 서버 측에 보낼 수있는 다른 방법이 있는지 알고 싶다. 제발 이해해주세요. 감사. – user3536329
너무 많은 아약스 요청을 원하지 않으면 JSF 대신 다른 프레임 포크를 찾아야합니다. JSF의 요점은 서버 측에 주를 저장한다는 것이므로 불행히도 ... 아니, JSF로는이 일을 할 수 없다. – Tushee