admin管理员组

文章数量:1022752

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=".full.js"></script>
    <link rel="stylesheet" media="screen" href=".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?

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./dist/handsontable.full.js"></script>
    <link rel="stylesheet" media="screen" href="http://handsontable./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?

  • javascript
  • html
  • mysql
  • handsontable
Share Improve this question asked Jan 13, 2017 at 3:27 JoshJosh 8781 gold badge17 silver badges40 bronze badges 4
  • Well, ultimatly you will need to have a Back-end at one point to connect your Handsontable data to your Database. However, regarldess of the Back-end, database connector, etc.. I advise to only POST one time with a Save button for example and not in "real time" (every time a data is changed in your interface) or you will have a serious performance issue with handsontable. – Fab Commented Jan 25, 2017 at 8:06
  • @fap thanks for the response, we have a back end database but I am not sure of the exact JavaScript to use to pull the data from the database and bind it to an object for inserting into Handsontable. Also why would we have serious performance issues performing POSTs in realtime? Google sheets effectively does this without any performance issues I imagine HandsonTable should be capible of something similar if the syncing is written correctly. – Josh Commented Jan 25, 2017 at 8:34
  • You can't pull your data directly from your JavaScript, you will always need a backend application to do that, e.g : in PHP, with Spring Framework or simply jdbc using J2EE (maybe too heavy if it's a little project), Django Framework in Python (good for demo IMO) etc.. their are many choices out there. As for the performance, I'm speaking from experience, but my application did a lot of calculus in real time. Updating the db at the same time was too heavy, that's why I said that. But, depending of your application, please do test yourself and let me know of the result :) – Fab Commented Jan 25, 2017 at 9:19
  • @fap Thanks again for the feedback :). We have a backend MySQL database with some basic php code to pull the data, I was more curious how I set this returned data (JSON format) to a JavaScript object which then can be set to the Handsontable. And ok air enough, sounds like your application was above and beyond a simple CRUD application potentially causing the slowness. I will definitely do a test and see how fast I can get real time syncing of Handsontable to my database :). – Josh Commented Jan 27, 2017 at 0:58
Add a ment  | 

1 Answer 1

Reset to default 6

Based on your ment, 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 ment this is pletely 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.

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=".full.js"></script>
    <link rel="stylesheet" media="screen" href=".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?

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./dist/handsontable.full.js"></script>
    <link rel="stylesheet" media="screen" href="http://handsontable./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?

  • javascript
  • html
  • mysql
  • handsontable
Share Improve this question asked Jan 13, 2017 at 3:27 JoshJosh 8781 gold badge17 silver badges40 bronze badges 4
  • Well, ultimatly you will need to have a Back-end at one point to connect your Handsontable data to your Database. However, regarldess of the Back-end, database connector, etc.. I advise to only POST one time with a Save button for example and not in "real time" (every time a data is changed in your interface) or you will have a serious performance issue with handsontable. – Fab Commented Jan 25, 2017 at 8:06
  • @fap thanks for the response, we have a back end database but I am not sure of the exact JavaScript to use to pull the data from the database and bind it to an object for inserting into Handsontable. Also why would we have serious performance issues performing POSTs in realtime? Google sheets effectively does this without any performance issues I imagine HandsonTable should be capible of something similar if the syncing is written correctly. – Josh Commented Jan 25, 2017 at 8:34
  • You can't pull your data directly from your JavaScript, you will always need a backend application to do that, e.g : in PHP, with Spring Framework or simply jdbc using J2EE (maybe too heavy if it's a little project), Django Framework in Python (good for demo IMO) etc.. their are many choices out there. As for the performance, I'm speaking from experience, but my application did a lot of calculus in real time. Updating the db at the same time was too heavy, that's why I said that. But, depending of your application, please do test yourself and let me know of the result :) – Fab Commented Jan 25, 2017 at 9:19
  • @fap Thanks again for the feedback :). We have a backend MySQL database with some basic php code to pull the data, I was more curious how I set this returned data (JSON format) to a JavaScript object which then can be set to the Handsontable. And ok air enough, sounds like your application was above and beyond a simple CRUD application potentially causing the slowness. I will definitely do a test and see how fast I can get real time syncing of Handsontable to my database :). – Josh Commented Jan 27, 2017 at 0:58
Add a ment  | 

1 Answer 1

Reset to default 6

Based on your ment, 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 ment this is pletely 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.

本文标签： javascriptConnect HandsonTable to MySQL serverStack Overflow

版权声明：本文标题：javascript - Connect HandsonTable to MySQL server - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745570741a2156720.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。