如何在handsontable中使用ajax获取多个值

Question

我在 JSP Spring + Angular JS 中使用可操作的 jquery 我已经成功地使用 ajax 放置了第一行的数据。 但是，我的程序忽略了第二、第三......行

var
    objectData = [{
    	  pno_stock: "3200105009",
		  pname_stock: "VALVE",
		  capital_stock: "a",
		  tracking_no_stock: "SE17",
		  standard_stock: "SRT",
		  unit_stock: "SET",  
		  storage_code_stock: "C03",
		  storage_name_stock: "",
		  stock_amount_stock: "6",
		  price_indicator_stock: "M",
		  client_code_stock: "1244156104",
		  client_name_stock: "A company"},
		  {
	    	  pno_stock: "3243334802",
			  pname_stock: "COVER",
			  capital_stock: "a",
			  tracking_no_stock: "SE17",
			  standard_stock: "",
			  unit_stock: "EA",  
			  storage_code_stock: "C03",
			  storage_name_stock: "",
			  stock_amount_stock: "3",
			  price_indicator_stock: "M",
			  client_code_stock: "1228182903",
			  client_name_stock: "B company"}
    ],
    container3 = document.getElementById('example'),
    hot;

  hot = new Handsontable(container3, {
    data: objectData,
    contextMenu: true,
    rowHeaders: true,        
    minSpareRows: 1,
    columns: [{
          data: 'pno_stock'         
      }, {
          data: 'pname_stock'        
      }, {
          data: 'capital_stock'        
      }, {
          data: 'tracking_no_stock'        
      }, {
          data: 'standard_stock'        
      }, {
          data: 'unit_stock'        
      }, {
          data: 'storage_code_stock'        
      }, {
          data: 'storage_name_stock'        
      }, {
          data: 'stock_amount_stock'        
      }, {
          data: 'price_indicator_stock'        
      }, {
          data: 'client_code_stock'        
      }, {
          data: 'client_name_stock'        
      }],
  });
  
  
  var sourceRow = hot.getSourceDataAtRow(0), 

console.log('* the getSourceDataAtRow:');
console.log(sourceRow);
 

					       
					        $(document).ready(function () { // DOM hierarchy constructed. Ready to attach event handlers and run jQuery code etc.
					            $("#Submit").click(function (e) {
					                e.preventDefault();
					                //var tableData = $("#example").handsontable('sourceRow');					        
					                var formDataJson = JSON.stringify(sourceRow);
					                alert("before jQuery : " + formDataJson);
					                jQuery.ajax({
					                    type: "POST",
					                    headers: {
					                        'Accept': 'application/json',
					                        'Content-Type': 'application/json; charset=utf-8'					                        	
					                    },
					                    'url': "/yboard/insert1",
					                    'data':  formDataJson,
					                    'dataType': 'json',
					                    'success': function (e) {
					                    	console.log(formDataJson); 						                        
					                    },
					                    'error': function() {
					            			alert("Loading failed!" +"\n" );
					            			console.log(formDataJson); 
					            			
					            		},
					                });
					            });
					        });

function showBootstrapModal() {
  $('.modal').modal({
    backdrop: 'static',
    keyboard: true,
  });

  $('.modal').on('hidden.bs.modal', function (e) {
    console.log("hidden");
  });

  $('.modal').on('shown.bs.modal', function (e) {
    console.log("shown");
    hot.render();
  });
};


$(document).ready(function () {
  $('#btn').click(showBootstrapModal);
});
    
$.fn.modal.Constructor.prototype.enforceFocus = function() {};

<form class="form-horizontal" role="form" id="handsontableForm">	
						    <div id="example"></div>
						    <INPUT id="Submit" TYPE="SUBMIT" VALUE="Submit" style="margin-top: 50px;">
							</form>
<div style="text-align:left">
    <label id="serverResults"></label>

我试图改变变量 sourceRow 从'var sourceRow = hot.getSourceDataAtRow(0)' 到 'var sourceRow = hot.getSourceData()'

我检查了控制台屏幕中的所有正常数据 但是，我也得到了“加载失败！”， 这段代码有什么问题？

---

哦...我意识到我的java代码也有问题...

我的 xml 代码是...

<insert id="insertYboardStock" parameterType="YboardStock">
    INSERT INTO supply_stock(capital_stock, pno_stock, pname_stock, storage_code_stock, storage_name_stock, price_indicator_stock, unit_stock,
    stock_amount_stock, tracking_no_stock, standard_stock, client_code_stock, client_name_stock)        
    VALUES(#{capital_stock}, #{pno_stock}, #{pname_stock}, #{storage_code_stock}, #{storage_name_stock}, #{price_indicator_stock}, #{unit_stock},
    #{stock_amount_stock}, #{tracking_no_stock}, #{standard_stock}, #{client_code_stock}, #{client_name_stock})
</insert>

我的控制器代码是..

@RequestMapping(value = "/insert1", method = {RequestMethod.GET, RequestMethod.POST})
@ResponseBody
public ResultJSON insertYboardStock(@RequestBody YboardStock yboardstock) {
    ResultJSON resultJSON = new ResultJSON();
    yboardService.insertYboardStock(yboardstock);
    resultJSON.setSuccess(true);
    return resultJSON;
}

我不知道这是足够的代码来询问它。 我猜单值插入程序不能放置多个值。 我将尝试通过 put 'foreach' 函数来修复 XML 代码。

Answer 1

首先，我触及了这个 javascript 问题。 但这是服务问题。

我修复了如下的 java 代码

public int insertYboardStock(List<YboardStock> list);

还有 XML

<insert id="insertYboardStock" parameterType="YboardStock">
    INSERT INTO supply_stock(capital_stock, pno_stock, pname_stock, storage_code_stock, storage_name_stock, price_indicator_stock, unit_stock,
    stock_amount_stock, tracking_no_stock, standard_stock, client_code_stock, client_name_stock)        
    VALUES
     <foreach collection="list" item="item" separator=" , ">
    (#{item.capital_stock}, #{item.pno_stock}, #{item.pname_stock}, #{item.storage_code_stock}, #{item.storage_name_stock}, #{item.price_indicator_stock}, 
     #{item.unit_stock},    #{item.stock_amount_stock}, #{item.tracking_no_stock}, #{item.standard_stock}, #{item.client_code_stock}, #{item.client_name_stock})
    </foreach>
</insert>

最后，我成功将所有数据放入 Mysql 数据库:)