2011-01-27 2 views
2

"추가", "삭제"및 "제출"버튼과 함께 일부 입력 필드의 기본 행을 페이지가 가지는 struts2에서 웹 페이지를 개발 중입니다. 사용자가 "추가"버튼을 클릭하면 새 행 입력란의 "삭제"버튼을 클릭하면 불필요한 행을 삭제해야합니다 생성해야합니다. 자바 스크립트를 사용하여이 작업을 수행 할 수 있지만 유효성 검사 후 페이지가 다시로드 될 때 문제가 발생합니다.struts2에서 페이지를 다시로드 할 때 동적으로 생성 된 양식 필드를 유지하는 방법은 무엇입니까?

사용자가 페이지를 제출하면 입력 된 값이 서버 측에서 유효성이 검사되고 입력 값에 오류가있는 경우 사용자가 양식을 제출했을 때 양식 필드와 함께 동일한 페이지에 표시되어야합니다. 하지만 내 경우에는 사용자가 값을 입력하고 양식을 제출하면 값의 유효성이 검사되고 오류가 동일한 페이지에 표시되지만 모든 필드 값은 여러 행이 아닌 동일한 행에 표시됩니다. 자세한 내용은 코드 스 니펫을 참조하십시오.

<%@ page contentType="text/html; charset=UTF-8"%> 
<%@ taglib prefix="s" uri="/struts-tags"%> 
<HTML> 
<HEAD> 
    <TITLE> Add Page</TITLE> 
    <SCRIPT language="javascript"> 
     function addRow(tableID) { 

      var table = document.getElementById(tableID); 
      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 
      var colCount = table.rows[0].cells.length; 

      for(var i=0; i<colCount; i++) { 
       var newcell = row.insertCell(i); 
       newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
       //alert(newcell.childNodes); 
       switch(newcell.childNodes[0].type) { 
        case "text": 
          newcell.childNodes[0].value = ""; 
          break; 
        case "checkbox": 
          newcell.childNodes[0].checked = false; 
          break; }}} 
     function deleteRow(tableID) { 
      try { 
      var table = document.getElementById(tableID); 
      var rowCount = table.rows.length; 
      var count=0; 
      for(var i=0; i<rowCount; i++) { 
       var row = table.rows[i]; 
       var chkbox = row.cells[0].childNodes[0]; 
       if(null != chkbox && true == chkbox.checked) { 
        count++; 
        if(rowCount <= 1) { 
         alert("Cannot delete all the rows."); 
         break; 
        } 
        table.deleteRow(i); 
        rowCount--; 
        i--; } } 
      if(count==0) 
      { 
       alert("Please select the rows to be deleted !"); 
      }}catch(e) { alert(e);} } 
    </SCRIPT> 
</HEAD> 
<BODY> 
<s:if test="hasActionErrors()"> 
    <s:iterator value="actionErrors"> 
     <span class="errorMessage" style="padding-left: 160px;"><s:property escape="false" /> </span> 
    </s:iterator> 
</s:if> 
<br /> 
<s:if test="hasActionMessages()"> 
    <s:iterator value="actionMessages"> 
     <span class="infoMessage" style="color: green; padding-left: 160px;"><s:property escape="false" /> </span> 
    </s:iterator> 
</s:if> 
<s:form method="post" theme="simple" action="addComponentDetails"> 
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 
<table border="1"> 
<tr><td ></td> 
<td ><s:text name="label.addComponent.partNumber" /></td> 
<td ><s:text name="label.addComponent.componentDescription" /></td> 
<td ><s:text name="label.addComponent.quantity" /></td> 
<td ><s:text name="label.addComponent.unitPrice" /></td> 
<td ><s:text name="label.addComponent.totalPrice" /></td> 
</tr> 
</table> 
    <table id="dataTable" border="1"> 
     <tr> 
     <td><s:checkbox name="test" id="chk" /></td> 
      <td><s:textfield name="addComponent.partNumber" id="txt" /></td> 
      <td><s:textfield name="addComponent.componentDescription" id="txt"/></td> 
      <td><s:textfield name="addComponent.quantity" id="txt"/></td> 
      <td><s:textfield name="addComponent.unitPrice" id="txt"/></td> 
      <td><s:textfield name="addComponent.totalPrice" id="txt"/></td> 
     </tr> 
    </table> 
    <s:submit name="submit" value="Add details"/> 
</s:form> 
</BODY> 
</HTML> 

위의 jsp addComponent는 POJO 개체입니다.

POJO 클래스 -

public class SigmaAddComponent { 

private String partNumber[],componentDescription[],quantity[],unitPrice[],totalPrice[]; 

    //getters and setters for the above attributes. 
} 

Action 클래스 -

import com.bo.SigmaAddComponentBO; 
    import com.exception.SigmaException; 
    import com.opensymphony.xwork2.ActionSupport; 
    import com.vo.SigmaAddComponent; 

    public class SigmaAction extends ActionSupport 
    { 
SigmaAddComponent addComponent = new SigmaAddComponent(); 

//Getter and setter for addComponent 

public String addComponentDetails() 
{ 
    try 
    { 
    new SigmaAddComponentBO().validateDetails(addComponent); 
    } 
    catch (SigmaException se) 
    { 
    addActionError((se.getErrorMsg())); 
    } 
    return "success"; 
} 
} 

은 내가이 상황에 갈 수있는 방법을 나에게 제안 할 수 있습니까?

감사합니다.

미리 감사드립니다.

답변

2

여기에서 기억해야 할 주요 사항은 유효성 검사가 실패하면 struts는 폼 필드가 이미 채워진 상태에서 처음 페이지를 입력했을 때와 마찬가지로 jsp 페이지를 렌더링한다는 것입니다. JSP 페이지는 하나의 행만 표시하기 때문에 양식은 유효성 검사 후 재생성 된 후에 한 행만 갖습니다.

모든 행을 표시하려면 s : iterator 태그를 사용하여 저장된 값을 반복해야합니다. addComponent 인스턴스가 하나 뿐이므로 해당 객체의 값이 배열 인 경우 실제로 addComponent의 속성 중 하나를 반복해야하지만 양식 필드의 이름을 정규화 된 객체 이름으로 설정해야합니다. 배열 인덱스가 포함됩니다. 반복자 상태 객체를 사용하여 배열의 색인을 가져옵니다. 위의 당신의 데이터 테이블 대신에 다음과 같은 것을보십시오 :

<table id="dataTable" border="1"> 
    <s:iterator value="addComponent.partNumber" status="componentStatus"> 
    <tr> 
     <td><s:checkbox name="test" id="chk" /></td> 
     <td><s:textfield name="addComponent.partNumber[%{#componentStatus.index}]" id="txt" /></td> 
     <td><s:textfield name="addComponent.componentDescription[%{#componentStatus.index}]" id="txt"/></td> 
     <td><s:textfield name="addComponent.quantity[%{#componentStatus.index}]" id="txt"/></td> 
     <td><s:textfield name="addComponent.unitPrice[%{#componentStatus.index}]" id="txt"/></td> 
     <td><s:textfield name="addComponent.totalPrice[%{#componentStatus.index}]" id="txt"/></td> 
    </tr> 
    </s:iterator> 
</table> 

를 문제가 해결되지 않으면, 당신은 단지 구문 비트와 함께 장난 시도 할 수 있습니다. iterator를 사용하는 것은 확실히 여기에 갈 수있는 가장 좋은 방법입니다.

다음은 몇 가지 추가 정보 링크입니다.

+0

답장을 보내 주셔서 감사합니다. 잘못된 서식 지정으로 불편을 끼쳐 드려 죄송합니다. 첫 번째 게시물이었으며 코드를 복사하여 붙여 넣기하고 여분의 공백을 제거하고 길이를 줄이기 위해 모든 줄 바꿈을 한 줄로 옮겼습니다. "addComponent"는 목록이 아니며 jsp의 모든 필드에 대한 모든 문자열 배열의 POJO 객체입니다. 나머지 코드를 다시 게시하는 방법을 모르겠으므로 질문 자체를 편집 했으므로 질문을 다시 참조하고 구현 방법이나 좋은 방법을 제안하는 방식으로이 문제를 해결하십시오. 감사. – user591714

+0

OK, 제공하신 정보와 일치하도록 내 답변을 업데이트했습니다. 질문에 대한 서식을 지금 업데이트하는 것이 좋습니다. 업데이트 해 주셔서 감사합니다. 희망이 도움이! –

+0

안녕하세요. Dustin에게 감사드립니다. 내가 제안한대로 시도했지만 여전히 작동하지 않습니다. 폼에 코드를 넣으면 페이지가 처음로드 될 때 3 개의 버튼을 제외하고는 아무 것도 나오지 않지만 두 코드를 모두 사용하여 시도하면 처음에는 한 행이 올 것이며 제출 한 후에 여러 행을 추가 할 수 있습니다. 여분의 행을 모든 데이터로 채우고 여분의 행을 추가하거나 기존 행을 삭제하려고 시도하면 발생하지 않습니다. 내가 여기서 뭘 잘못하고 있는지 말해 줄 수 있니? 심지어 나는 String Array를 List로 바꾸려고했지만 같은 결과를 얻었습니다. 도와주세요. 감사! – user591714

0

나는 그것이 좋은 도움이 아니라는 것을 알고 있지만 같은 문제에 직면 한 클라이언트의 편에 검증을 이동하려고하고 난 클라이언트를 implemeted 하지만

+0

답장을 보내 주셔서 감사합니다. 내 요구 사항에 대해서는 가능한 한 많은 클라이언트 쪽 유효성 검사를하지 않아도되므로 현재이 옵션을 선택하지 않았습니다. 서버 쪽에서 할 수 없다면 나는 당신의 제안과 함께 갈 것입니다. – user591714

관련 문제