Connect HandsonTable to MySQL server

2020-05-29 06:26发布

站内问答 / JavaScript
1425 1 5

I am trying to use the Handsontable javascript library as a 'real time' CRUD interface to MySQL server. I have created a basic script to load up an instance of Handsontable in a browser and display some test data. See below

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

However, I am unsure as to how I go about binding Handsontable to a MySQL table to enable real-time manipulation of our data.

Does anyone know how I can go about quickly configuring an instance of Handsontable to achieve this?

1条回答
欢心
2楼-- · 2020-05-29 06:44

Based on your comment, I assume you already have you data in JSON format available on a URL as well as a URL ready to get the data (same format) to upload your database

For what you need to do, you've got pretty much everything explain it this Handsontable documentation example.

You will load your data one time, and save your data in the afterChange event.

Let's take your Handsontable definition and add to it the "realtime" saving function like the example in the documentation :

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

Below that, let's load the data one time when you open your page :

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

});

The key handsontable functions which allow you to load and save your data present in your table are :

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

If you use jQuery (and I do have a personal preference to Post and Get with it), the equivalent of the ajax function would be :

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

Again, this assume that you do have the back-end (your PHP code in your case) ready to put and pull data from the interface, but as said in the comment this is completely something else.

If you don't manage to load / save with the above, you may need to check your back-end (connector, your JSON format, etc...) and ask for it on a separate question.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)