0

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

1 回答 1

2

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

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');

在已记录数据的小提琴检查控制台中。

小提琴

于 2013-09-30T15:43:40.860 回答