Spring Framework에서 테이블 데이터 양식 제출을 처리하는 방법은 무엇입니까?

Question

이 문제에 대한 좋은 해결책을 찾고 있습니까?

컨트롤러에 모든 테이블 데이터를 제출하기 만하면됩니다. 행은 동적으로 생성되며 요소가 없습니다. 전체 테이블 데이터 처리를 처리하는 데는 혼동이 거의 없습니다.

<form action="controller.htm" method="post"> 
<table> 
<tr> 
<td>one</td> 
<td><two/td> 
<td>three</td> 
<td>four</td> 
<td>five</td> 
</tr> 
<td>data11</td> 
<td>data4</td> 
<td>data5</td> 
<td>data6</td> 
<td>data 7</td> 
</tr> 
</table> 
</form> 

1. 어떻게 테이블을 게시 할 수는 컨트롤러에 값?
2. 컨트롤러 내부에서 값을 가져 오는 방법은 무엇입니까?

Answer 1

거의 내가 테이블 데이터를 처리하는 방법을 알지 못합니다. 폼을 사용하여 컨트롤러에 많은 양의 데이터를 게시하려면 입력 유형 html 요소가 없어도 좋은 접근 방식이 아닐 수도 있습니다.

1 단계 : Java 스크립트를 사용하여 각 셀을 반복하여 모든 테이블 데이터를 읽습니다.
2 단계 : 열 카운터를 지정하여 셀 요소를 배열에 추가합니다.
3 단계 각 행을 완료 한 후 jsonobject에 배열을 추가하십시오.
4 단계 : 반복이 완료되면 json 객체를 문자열로 완성하고 Ajax를 사용하여 Json 문자열을 컨트롤러로 전달합니다.

<script type="text/javascript"> 
function GetCellValues(dataTable) 
{ 
    var jsonObj = []; 
    var jsonString; 
    var table = document.getElementById(dataTable); 
    for (var r = 0, n = table.rows.length; r < n; r++) { 
     var item = {}; 
     for (var c = 0, m = table.rows[r].cells.length; c < m; c++){   
      if(c == 1){ 
       item ["data1"] =table.rows[r].cells[c].innerHTML;} 
      else if(c==2){ 
       item ["data2"] =table.rows[r].cells[c].innerHTML;} 
      else if(c==3){ 
       item ["data3"] =table.rows[r].cells[c].innerHTML;} 
      else if(c==4){ 
       item ["data4"] = table.rows[r].cells[c].innerHTML;} 
      else if(c==5){ 
       item ["data5"] =table.rows[r].cells[c].innerHTML;} 

     } 
     jsonObj.push(item); 
    } 
    jsonString = JSON.stringify(jsonObj); 
    alert("Save your data "+ jsonString); 

    $.ajax({ 
     type: "POST", 
     url : "tableData.htm?jsonData="+jsonString, 
     success: function(data){ 
      $("#").html(data);  
     }, 
     error:function(data){ 
      console.log("failure"+data); 
      alert("failure"+data); 
     } 
    }); 
} 
</script> 

Answer 2

나는이 문제가 더 오래되었다는 것을 알고있다. 그러나 나는 비슷한 상황에 처해 있었고, 조금씩 다르게 만들었다. 나는 이것이 다른 누군가를 돕기를 바랍니다.

자바 스크립트는 <tr> 요소에 대한 <table>을 구문 분석 한 다음 숨겨진 <input> 필드에 저장된 JSON 문자열을 만듭니다.

이

다른 스택 오버플로 게시물에서 적응했다 : post data from table row like json format

기본 코드는 다음과 같습니다.

전체 @ JSFiddle : http://jsfiddle.net/leisenstein/vy3ux/

// object to hold your data 
function dataRow(value1,value2,value3) { 
    this.dxCode = value1; 
    this.dxDate = value2; 
    this.dxType = value3; 
} 

// create array to hold your data 
var dataArray = new Array(); 

// Start from 2 if you need to skip a header row 
for(var i = 2; i <= $("table tr").length; i++){ 
     // create object and push to array 
     dataArray.push( 
      new dataRow(
       $("table tr:nth-child(" + i + ") td").eq(0).html(), 
       $("table tr:nth-child(" + i + ") td").eq(1).html(), 
       $("table tr:nth-child(" + i + ") td").eq(2).html()) 
     ); 
} 


var sJson = JSON.stringify(dataArray);