Question

我的任务是将数据从handsontable保存到json文件。在点击“提交”按钮后，我不断收到“对象不支持属性或方法'getData'”错误。请看下面的代码并让我知道，我哪里出错了。提前谢谢。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1./jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script src="http:\\localhost\NetOptUI2\bin\jquery-handsontable-master\dist_wc\x-handsontable\jquery.handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http:\\localhost\NetOptUI2\bin\jquery-handsontable-master\dist_wc\x-handsontable\jquery.handsontable.full.css">
</head>
<body>

<h3 class="title">MHEX Time Sample</h3>
<div id="handsontable">

<div id="divButtons">
<input type="Button" name="submit" value="submit" class="btnSubmit"/>
</br>
</br>
Console: </br>
<span id="exampleconsole"></span>
</div>
</div>

<script>
var $container = $("#handsontable");
var handsontable = $container.data('handsontable');
var data = [
var data = [
  ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
  ["2009", 0, 2941, 4303, 354, 5814],
  ["2010", 5, 2905, 2867, 412, 5284],
  ["2011", 4, 2517, 4822, 552, 6127],
  ["2012", 2, 2422, 5399, 776, 4151]
var config = {
  data: data,
  minRows: 15,
  minCols: 6,
  minSpareRows: 1,
  autoWrapRow: true,
  colHeaders: true,
  currentRowClassName: 'currentRow',
          currentColClassName: 'currentCol',              
          contextMenu: { items: {
                                  "row_above": {},
                                  "row_below": {},
                                  "hsep1": "---------",
                                  "col_left": {},
                                  "col_right": {},
                                  "hsep2": "---------",
                                  "remove_row": {},
                                  "remove_col": {}
                                  }
                        }
                        };

 $("#divButtons").find(".btnSubmit").click(function () {
 $.ajax({
 url: "json/save.json",
 data: {"data": handsontable.getData()}, //returns all cells' data
 dataType: 'json',
 type: 'POST',
 success: function (res) {
   if (res.result === 'ok') {
    console.text('Data saved');
  }
  else {
    console.text('Save error');
   }
 },
  error: function () {
  console.text('Save error. POST method is not allowed on GitHub Pages. Run this example on your  own server to see the success message.');
  }
 });
});

 $("#handsontable").handsontable(config);

 var console = $("#divButtons").find("#exampleconsole");
 console.text("Initialized....");
 </script>
 </body>
 </html>

Answer 1

您的问题是您过早地创建了参考文献。

var $container = $("#handsontable");
var handsontable = $container.data('handsontable');

甚至在插件转换为表之前。试试这个：

$.ajax({
        url: "json/save.json",
        data: {
            "data": $container.data('handsontable').getData() //Now get it
        }, //ret
....

或将其移至最后

$("#handsontable").handsontable(config); //<-- here after creating the plugin
var $container = $("#handsontable");
var handsontable = $container.data('handsontable');

在小提示检查控制台中记录了数据。

<强> Fiddle

Handsontable中的getData（）给出“对象不支持属性或方法'getData'”错误

1 个答案: