Javascript 将HandsonTable连接到MySQL服务器_Javascript_Html_Mysql_Handsontable

Javascript 将HandsonTable连接到MySQL服务器

javascript html mysql

Javascript 将HandsonTable连接到MySQL服务器,javascript,html,mysql,handsontable,Javascript,Html,Mysql,Handsontable,我正在尝试使用可手持的javascript库作为MySQL服务器的“实时”CRUD接口。我创建了一个基本脚本，用于在浏览器中加载Handsontable实例并显示一些测试数据。见下文 <head> <script src="http://handsontable.com/dist/handsontable.full.js"></script> <link rel="stylesheet" media="screen" href="htt

我正在尝试使用可手持的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>


风险值数据=[
[、“福特”、“沃尔沃”、“丰田”、“本田”]，
["2014", 10, 11, 12, 13],
["2015", 20, 11, 14, 13],
["2016", 30, 15, 12, 13]
];
var container=document.getElementById（'example'）；
var hot=新的可手持设备（容器、{
数据：数据，
会议记录：1，
行标题：对，
colHeaders：是的，
上下文菜单：true
});

然而，我不确定如何将Handsontable绑定到MySQL表，以实现数据的实时操作

有人知道我如何快速配置一个Handsontable实例来实现这一点吗

根据您的评论，我假设您已经在URL上提供了JSON格式的数据，以及准备好获取数据（相同格式）以上载数据库的URL

对于你需要做的事情，你已经有了几乎所有的解释

您将加载一次数据，并在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（我个人喜欢使用它发布和获取），那么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格式等），并在单独的问题上询问。

好的，最后一个问题是，您需要在某一点上有一个后端，以将手持数据连接到数据库。但是，后端的Regardess、数据库连接器等。。例如，我建议只使用“保存”按钮发布一次，而不是“实时”（每次界面中的数据发生更改）发布一次，否则您的handsontable会出现严重的性能问题。@fap感谢您的回复，我们有一个后端数据库，但我不确定从数据库中提取数据并将其绑定到一个对象以插入到Handsontable中的确切JavaScript。还有，为什么我们在实时执行帖子时会出现严重的性能问题？Google sheets有效地做到了这一点，并且没有任何性能问题。我认为如果同步编写正确，HandsonTable应该能够实现类似的功能。您不能直接从JavaScript中提取数据，您将始终需要一个后端应用程序来实现这一点，例如：在PHP中，使用Spring框架，或者简单地使用J2EE的jdbc（如果是一个小项目，可能会太重），Python中的Django框架（适合演示IMO）等等。他们有很多选择。至于性能，我是根据经验说的，但我的应用程序实时进行了大量计算。同时更新数据库太重，这就是我为什么这么说的原因。但是，根据您的应用程序，请自行测试并让我知道结果：）@fap再次感谢您的反馈：）。我们有一个后端MySQL数据库，带有一些基本的php代码来提取数据，我更好奇的是如何将返回的数据（JSON格式）设置为JavaScript对象，然后将其设置为Handsontable。好了，听上去你的应用程序比一个简单的CRUD应用程序要好得多，这可能会导致速度变慢。我肯定会做一个测试，看看我能以多快的速度将Handsontable实时同步到我的数据库：）。