如何處理Spring框架中的表格數據表單提交？

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步：一旦迭代完成stringfy 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

我知道這是一個老問題，但我有類似的情況，並提出了這樣做有點不同。我希望這可以幫助別人。

我已經javascript解析<table>爲<tr>元素，然後創建一個JSON字符串，我存儲在一個隱藏的<input>字段。

這是改編自另一個堆棧溢出後：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);