将 HandsonTable 连接到 MySQL 服务器答案

【问题标题】：Connect HandsonTable to MySQL server将 HandsonTable 连接到 MySQL 服务器
【发布时间】：2017-05-28 08:58:09
【问题描述】：

我正在尝试使用 Handsontable javascript 库作为 MySQL 服务器的“实时”CRUD 接口。我创建了一个基本脚本来在浏览器中加载 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 表以实现对数据的实时操作。

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

【问题讨论】：

好吧，最终你需要有一个后端来将你的 Handsontable 数据连接到你的数据库。但是，不管后端、数据库连接器等。我建议只使用保存按钮发布一次，而不是“实时”发布（每次在您的界面中更改数据时），否则您将拥有Handsontable 存在严重的性能问题。
@fap 感谢您的回复，我们有一个后端数据库，但我不确定用于从数据库中提取数据并将其绑定到用于插入 Handsontable 的对象的确切 JavaScript。另外，为什么我们在实时执行 POST 时会遇到严重的性能问题？谷歌表格有效地做到了这一点，没有任何性能问题我想如果同步编写正确，HandsonTable 应该能够实现类似的功能。
你不能直接从你的 JavaScript 中提取数据，你总是需要一个后端 application 来做到这一点，例如：在 PHP 中，使用 Spring Framework 或简单地使用 jdbc J2EE（如果是一个小项目可能太重了）、Python 中的 Django 框架（适合演示 IMO）等。它们有很多选择。至于性能，我是根据经验说的，但我的应用程序实时做了很多计算。同时更新数据库太繁重了，这就是我这么说的原因。但是，根据您的应用程序，请自行测试并告诉我结果:)
@fap 再次感谢您的反馈:)。我们有一个后端 MySQL 数据库，其中包含一些基本的 php 代码来提取数据，我更好奇如何将返回的数据（JSON 格式）设置为 JavaScript 对象，然后可以将其设置为 Handsontable。好吧，听起来你的应用程序超出了简单的 CRUD 应用程序，可能会导致缓慢。我一定会做一个测试，看看我能多快将 Handsontable 实时同步到我的数据库:)。

标签： javascript html mysql handsontable

【解决方案1】：

根据您的评论，我假设您已经在 URL 上提供了 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");
  }

});

允许您加载和保存表格中的数据的主要实用功能是：

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

如果你使用 jQuery（而且我个人偏好 Post 和 Get 使用它），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 格式等）并在单独的问题上提出要求。

【讨论】：