HandsonTableをMySQLサーバに接続

私はHandsontableのjavascriptライブラリをMySQLサーバの「リアルタイム」CRUDインタフェースとして使用しようとしています。私は、Handsontableのインスタンスをブラウザにロードし、いくつかのテストデータを表示するための基本的なスクリプトを作成しました。HandsonTableをMySQLサーバに接続

<head> 

    <script src="http://handsontable.com/dist/handsontable.full.js"></script> 
    <link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css"> 

    <div id="example"></div> 

    <script> 
     var data = [ 
      ["", "Ford", "Volvo", "Toyota", "Honda"], 
      ["2014", 10, 11, 12, 13], 
      ["2015", 20, 11, 14, 13], 
      ["2016", 30, 15, 12, 13] 
     ]; 

     var container = document.getElementById('example'); 
     var hot = new Handsontable(container, { 
      data: data, 
      minSpareRows: 1, 
      rowHeaders: true, 
      colHeaders: true, 
      contextMenu: true 
     }); 

    </script> 

</head>

の下を参照してくださいしかし、私は我々のデータのリアルタイム操作を可能にするために、MySQLのテーブルにHandsontableを結合取り掛かる方法としてわからないと思います。

これを達成するためにHandsontableのインスタンスをすばやく設定する方法を知っている人はいますか？

出典

2017-01-13 Josh

まあ、最終的には、Handsontableデータをデータベースに接続するために、ある時点でバックエンドを持つ必要があります。しかし、バックエンド、データベースコネクタなどのregarldess。私は、 "リアルタイム"（データがあなたのインタフェースで変更されるたびに）ではなく、保存ボタンを使ってPOSTを1回だけすることをお勧めします。 handontableの重大なパフォーマンス上の問題です。 – fab

@fap返信いただきありがとうございます。私たちはバックエンドデータベースを持っていますが、データベースからデータを取り出し、Handsontableに挿入するためにオブジェクトにバインドするために使用する正確なJavaScriptについてはわかりません。また、リアルタイムでPOSTを実行する際に重大なパフォーマンス上の問題が発生するのはなぜですか？ Googleシートは効果的にこれを実行しますが、HandsonTableは同期が正しく書かれていれば同様のものがあればいいと思います。 – Josh

あなたはJavaScriptから直接データを引き出すことはできません。そのためには、バックエンド**アプリケーション**が必要です。例えばPHPで、Spring Frameworkで、あるいは単純にjdbcでJ2EEを使用します。）、PythonのDjangoフレームワーク（デモIMOに適しています）などです。そこには多くの選択肢があります。パフォーマンスに関しては、私は経験から話していますが、私のアプリケーションは実時間で多くの計算をしました*。同時にデータベースを更新するのは重すぎたので、私はそれを言ったのです。しかし、あなたのアプリケーションに応じて、自分でテストして結果を知らせてください:) – fab

あなたのコメントに基づいて、私はあなたがすでにデータベースをアップロードするJSONのURLで利用可能な形式だけでなく、データを取得する準備ができURL（同じ形式）であなたのデータ

を持っていると仮定しますあなたがしなければならないことについては、ほとんど全てがこのことを説明しています。Handsontable documentation example

データを一度読み込み、afterChangeイベントでデータを保存します。あなたがあなたのページを開いたときのデータを一度にロードさせ、その下

var container = document.getElementById('example'); 
var hot = new Handsontable(container, { 
    minSpareRows: 1, 
    rowHeaders: true, 
    colHeaders: true, 
    contextMenu: true 
    afterChange: function (change, source) { 
     ajax('yourJsonPath/save.json', 'GET', JSON.stringify({data: hot.getData()}), function (res) { 
     var response = JSON.parse(res.response); 

     if (response.result === 'ok') { 
      console.log("Data saved"); 
     } 
     else { 
      console.log("Saving error"); 
     } 
    }); 
    } 
});

：

を

のは、あなたのHandsontable定義を取り、ドキュメントの例のようにそれを「リアルタイム」の保存機能を追加してみましょうあなたのテーブルにデータの存在をロードして保存することができ

ajax('yourJsonPath/load.json', 'GET', '', function(res) { 
    var data = JSON.parse(res.response); 

    if (data.result === 'ok') { 
    hot.loadData(data.data); 
    console.log("Data Loaded"); 
    } 
    else { 
    console.log("Loading error"); 
    } 

});

キーhandsontableな機能は以下のとおりです。

hot.loadData(data) // To put data into your table 
hot.getData() // To extract the current data present in your table

あなたはjQueryのを（と私はポストへの個人的な好みを持っており、それを入手します）を使用する場合は、Ajaxの機能の同等は次のようになります。

// For Saving 
jQuery.ajax({ 
    type: "POST", 
    'url':'yourJsonPath/save.json', 
    data: JSON.stringify(hot.getDate()), 
    headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json' 
    }, 
    'success': function() { 
    console.log("Data Saved"); 
    }, 
    'error': function() { 
    console.log("Saving error"); 
    } 
}); 

// For Loading 
jQuery.ajax({ 
    type: "GET", 
    headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json' 
    }, 
    'url':'yourJsonPath/load.json', 
    'success': function (res) { 
    hot.loadData(res.data); 
    }, 
    'error': function() { 
    console.log("Loading error"); 
    } 
});

繰り返しますが、これはあなたがバックを持っていることを前提とし（あなたの場合はあなたのPHPコード）の準備ができて、インターフェイスからデータを取得する準備ができていますが、これは完全に別のものです。

上記でロード/セーブできない場合は、バックエンド（コネクタ、JSON形式など）を確認して別の質問で尋ねる必要があります。

出典

2017-01-27 08:57:56 fab

HandsonTableをMySQLサーバに接続

答えて

関連する問題