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

Posted 2023-03-22

【中文标题】如何在handsontable中使用ajax获取多个值

【英文标题】：how to get multiple values by using ajax in handsontable

【发布时间】：2018-08-17 01:40:40

【问题描述】：

我在 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 代码。

【参考方案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 数据库:)