将 HandsonTable 连接到 MySQL 服务器

Question

我正在尝试使用 Handsontable javascript 库作为 'real time' CRUD 接口到 MySQL 服务器。我创建了一个基本脚本来在浏览器中加载 Handsontable 的实例并显示一些测试数据。见下文

<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 table 以启用对我们数据的实时操作。

有谁知道如何快速配置 Handsontable 实例来实现这一点？

Answer 1

根据您的评论，我假设您已经在 URL 和 URL 上拥有 JSON 格式的数据，准备好获取数据（相同格式）上传你的数据库

对于你需要做的事情，你已经得到了几乎所有的解释Handsontable documentation example。

您将加载一次数据，并在 afterChange 事件中保存您的数据。

让我们采用您的 Handsontable 定义并向其添加 "realtime" 保存功能，如文档中的示例：

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

});

可让您加载和保存存在于 table 中的数据的关键 handsontable 函数是：

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

如果你使用 jQuery（我确实有个人偏好 Post 和 Get with it），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");
  }
});

同样，这假设您确实有 back-end（在您的情况下是您的 PHP 代码）准备好从接口中放入和提取数据，但正如评论中所说，这完全是别的。

如果您无法通过上述方式加载/保存，您可能需要检查您的 back-end（连接器、您的 JSON 格式等...）并询问它关于一个单独的问题。

将 HandsonTable 连接到 MySQL 服务器

Connect HandsonTable to MySQL server

html

javascript

mysql

handsontable