我正在尝试将Handsontable javascript库用作MySQL服务器的“实时” CRUD接口(interface)。我创建了一个基本脚本，以在浏览器中加载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绑定(bind)到MySQL表以实现对数据的实时处理。
有谁知道我可以如何快速配置Handsontable实例来实现这一目标？
最佳答案
根据您的评论，我假设您已经拥有JSON格式的数据，该数据可用于URL以及准备好获取数据(相同格式)以上传数据库的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代码)可以从接口(interface)放置和提取数据，但是正如注释中所述，这完全是另外一回事。
如果您无法通过上述方法加载/保存，则可能需要检查后端(连接器，JSON格式等)，然后在另一个问题上进行询问。
关于javascript - 将HandsonTable连接到MySQL服务器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41626957/