将HandsonTable连接到MySQL服务器 [英] Connect HandsonTable to MySQL server
问题描述
我正在尝试使用Handsontable JavaScript库作为MySQL服务器的'实时'CRUD界面。我创建了一个基本脚本来在浏览器中加载一个Handsontable实例并显示一些测试数据。见下面
< head>
< script src =http://handsontable.com/dist/handsontable.full.js>< / script>
< link rel =stylesheetmedia =screenhref =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（容器，{
data：data，
minSpareRows：1，
rowHeaders：true，
colHeaders：true，
contextMenu ：true
}）;
< / script>
< / head>
然而，我不确定如何将Handsontable绑定到MySQL表，对数据进行实时操作。
有人知道我该如何快速配置一个Handsontable实例来实现这个功能吗？
根据您的评论，我认为您已经拥有了JSON格式的网址数据以及一个准备好获取数据（相同格式）以上载数据库的URL
确实，你几乎可以解释这件事 Handsontable文档例如。
您将一次加载数据，并将数据保存在afterChange事件中。
var 使用Handsontable定义并添加实时保存函数。 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（加载错误）;
}
}）;
允许您加载和保存表中数据的关键函数是： p>
hot.loadData（data）//将数据放入表中
hot.getData（）//提取当前数据存在于您的表中
如果您使用jQuery（并且我对Post和获取它），相当于ajax函数：
//为了节省
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（保存错误）;
}
}）;
$ b $ //加载
jQuery.ajax（{
类型：GET，
标题：{
'接受'：'application / json '，
'Content-Type'：'application / json'
}，
'url'：'yourJsonPath / load.json'，$ b $'success'：function（res ）{
hot.loadData（res.data）;
}，
'error'：function（）{
console.log（加载错误）;
}
}）;
同样，这里假定您有后端（您的PHP代码）从界面中放置和提取数据，但正如评论中所说，这完全是另一回事。
如果您无法使用上述方法加载/保存，你可能需要检查你的后端（连接器，你的JSON格式等），并在另一个问题上询问它。
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.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>
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?
Based on your comment, 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 comment this is completely 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.
这篇关于将HandsonTable连接到MySQL服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
