將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>

不過，我不清楚，我怎麼去結合Handsontable到MySQL表，以使我們的數據的實時處理。

有誰知道我怎麼能快速配置一個Handsontable實例來實現這個目標？

來源

2017-01-13 Josh

好吧，最終你需要有一個後端來連接你的Handsontable數據到你的數據庫。但是，後端數據庫連接器等等。我建議只用POST一次，例如保存按鈕，而不是「實時」（每次數據在您的界面中更改），否則您將擁有一個嚴重的性能問題與handontable。 – fab

@fap感謝您的回覆，我們有一個後端數據庫，但我不確定使用什麼確切的JavaScript從數據庫中提取數據並將其綁定到一個對象以插入Handsontable。另外爲什麼我們會有實時執行POST的嚴重性能問題？谷歌工作表有效地做到這一點，沒有任何性能問題我想如果同步寫入正確，HandsonTable應該是類似的東西。 – Josh

你不能直接從你的JavaScript中獲取數據，你總是需要一個後端**應用程序來做到這一點，例如：在PHP中，使用Spring Framework或者簡單地使用J2EE的jdbc（如果它是一個小項目，可能太重了），Python中的Django框架（適用於演示IMO）等等。他們有很多選擇。至於性能，我是從經驗來講的，但我的應用程序在*實時*中做了很多微積分。同時更新db太重了，這就是我爲什麼這麼說的原因。但是，根據您的應用程序，請測試自己並讓我知道結果:) – fab

基於您的評論，我假設你已經有你的JSON格式上的網址，以及準備好數據（相同的格式）的URL提供的數據上傳數據庫

對於你需要做的事情，幾乎所有的事情都可以解釋它Handsontable documentation example。

您將一次加載您的數據，並將您的數據保存在afterChange事件中。

讓我們把你的Handsontable定義，並添加到它的「實時」省電功能，如文檔中的例子：

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"); 
     } 
    }); 
    } 
});

下面說，讓當你打開你的網頁的加載數據的一個時間：

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服務器

回答

相關問題