2017-04-08 29 views
1

私はhandsontableでデータをロードしようとしています。Handsontable - テーブルがレンダリングされない

HTMLファイルには、非常に基本的なものです: ちょうどテーブルと( actions.php という名前の)PHPスクリプトによって送信されたデータをロードするためのボタン:

<!doctype html> 

<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="dist/handsontable.full.js"></script> 
    <link rel="stylesheet" media="screen" href="dist/handsontable.full.css"> 
</head> 

<body> 

<div id="hot"></div> 
<br /> 
<input id="try" type="button" value="Try" /> 

</body> 

<script> 
$(function() { 
    var objectData = [ 
     {id: 1, name: 'Ted Right', address: ''}, 
     {id: 2, name: 'Frank Honest', address: ''}]; 

    $('#hot').handsontable({ 
     data: objectData, 
     colHeaders: true, 
     minSpareRows: 1 
    }); 

    var hot = $("#hot").handsontable('getInstance'); 

    $("#try").click(function(){ 
     $.getJSON("actions2.php", function(result){ 
      console.log (objectData); 
      console.log (JSON.parse(result)); 
      hot.render(); 
     }); 
    }); 

}); 
</script> 

</html> 

PHPはまた、非常に基本的な

です
<?php 
$result=array(
    array("id" => 5, "name" => "Bill Gates", "address"=>"zzz"), 
    array("id" => 6, "name" => "Steve Jobs", "address"=>"xxx") 
); 

echo json_encode(json_encode($result)); 
?> 

私は「お試し」ボタンをクリックし は、objectDataはよく更新されますが、hot.renderにもかかわらず、ではないテーブル()命令。

私が間違っていることについてのアイデアはありますか?

Rgds

答えて

1

この問題が見つかりました。

.loadData方法はJSスクリプトで行方不明になったとPHPここ

実施例がある中json_encodeエラーが発生しました。

<html> 

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="dist/handsontable.full.js"></script> 
    <link rel="stylesheet" media="screen" href="dist/handsontable.full.css"> 
</head> 

<body> 
    <div id="hot" /> 
    <br /> 
    <input id="go" type="button" value="Click me" /> 
</body> 

<script> 
$(function() { 
    var objectData = [ 
     {id: 1, name: 'Ted Right', address: ''}, 
     {id: 2, name: 'Frank Honest', address: ''}]; 

    $('#hot').handsontable({ 
     data: objectData, 
     colHeaders: true 
    }); 

    var hot = $("#hot").handsontable('getInstance'); 

    $("#go").click(function(){ 

     $.getJSON("actions2.php", function(result){ 
      hot.loadData(result); 
      hot.render(); 
     }); 
    }); 

}); 
</script> 

</html> 

とactions2.phpファイル

<?php 
$result=array(
    array("id" => 5, "name" => "Bill Gates", "address"=>"zzz","ee"=>"zz"), 
    array("id" => 6, "name" => "Steve Jobs", "address"=>"xxx") 
); 

echo (json_encode($result)); 
?> 
関連する問題