Основываясь на ваш комментарий, я предполагаю, что у вас уже есть вам данные в формате 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");
}
});
ключевые handsontable функции, которые позволяют загружать и сохранять данные, присутствующие в таблице, являются:
hot.loadData(data) // To put data into your table
hot.getData() // To extract the current data present in your table
Если вы используете JQuery (и у меня есть личные предпочтения сообщение и получить с него), эквивалент функции АЯКС будет:
// 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");
}
});
Опять же, предположим, что у вас есть назад- end (ваш PHP-код в вашем случае), готовый переносить данные из интерфейса, но, как сказано в комментарии, это совсем другое.
Если вам не удается загрузить/сохранить с помощью вышеуказанного, вам может потребоваться проверить ваш внутренний коннектор (разъем, формат JSON и т. Д.) И запросить его по отдельному вопросу.
Ну, ультиматум вам понадобится в один момент использовать Back-end для подключения ваших данных Handsontable к вашей базе данных. Тем не менее, нерегулярность Back-end, соединителя базы данных и т. Д. Я рекомендую только POST один раз с кнопкой «Сохранить», например, а не «в реальном времени» (каждый раз, когда данные изменяются в вашем интерфейсе), или у вас будет серьезная проблема с производительностью. – fab
@fap спасибо за ответ, у нас есть база данных back end, но я не уверен в том, какой именно JavaScript использовать, чтобы вытащить данные из базы данных и привязать их к объекту для вставки в Handsontable. Также почему у нас есть серьезные проблемы с производительностью, выполняющие POST в реальном времени? Листы Google эффективно делают это без каких-либо проблем с производительностью. Я полагаю, что HandsonTable должен быть чем-то похож, если синхронизация написана правильно. – Josh
Вы не можете извлекать данные непосредственно из своего JavaScript, для этого вам всегда потребуется приложение ** для бэкэнда **, например: на PHP, с Spring Framework или просто jdbc с использованием J2EE (может быть, слишком тяжело, если это небольшой проект), Django Framework в Python (хорошо для демонстрации IMO) и т. Д. Их много вариантов.Что касается производительности, я говорю по опыту, но мое приложение много исчисляло в * реальном времени *. Обновление db в то же время было слишком тяжелым, вот почему я это сказал. Но, в зависимости от вашего приложения, пожалуйста, проверьте себя и дайте мне знать о результате :) – fab