Handsontable 中的 getData() 给出“对象不支持属性或方法‘getData’”错误答案

【问题标题】：getData() in Handsontable gives "Object doesn't support property or method 'getData'" errorHandsontable 中的 getData() 给出“对象不支持属性或方法‘getData’”错误
【发布时间】：2013-10-06 13:12:36
【问题描述】：

我的任务是将数据从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>

【问题讨论】：

`http:\\localhost` ??检查控制台错误
当我在 IE、Chrome..etc 中打开上述 html 时，我在浏览器的控制台中收到上述错误。我正在使用 wampserver。这就是为什么localhost。

标签： jquery ajax handsontable

【解决方案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

【讨论】：

这些是控制台消息 LOG: ,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,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, LOG：保存错误。 GitHub 页面上不允许使用 POST 方法。在您自己的服务器上运行此示例以查看成功消息。
@user2791530 那是数据，你做错了。我只是根据您显示的错误向您展示了如何做到这一点。我无法从小提琴中获取您的网址。你应该把它向前推进。
我按照您的建议进行了更改，还将 url 更改为“save.json”，但仍然收到“Save error.POST 方法...”。我是新人。很抱歉用同样的事情打扰你。但是，我不知道出了什么问题。请帮忙
是的，getData() 错误已修复，但是，无法将数据保存到 json 文件。感谢您的帮助