В этой статье вы найдете всю необходимую информацию о загрузке и сохранении данных в SpreadSheet. В статье рассмотрены следующие вопросы:
SpreadSheet загружает данные в формате JSON объекта, включающего 4 параметра:
Ниже приведен пример объекта данных для загрузки в SpreadSheet:
var base_data = {
"styles": [
["wss1",";;center;;;;;;;;;"],
["wss2",";#6E6EFF;center;;;;;;;;;"],
["wss3","#FFFFFF;#6E6EFF;center;;;;;;;;;"]
// ...
],
"sizes": [
[0,1,125],
[0,3,158],
[0,4,137]
],
"data": [
[1,1,"Report - July 2016","wss5", "string"],
[1,2,"","wss5"],
[1,3,"4500","wss5", "date"],
[2,1,"Region","wss20"],
[2,2,"Country","wss20"],
[2,3,"Sales - Group A","wss12"],
[2,4,"Sales - Group A","wss12"],
[2,5,"Total","wss13"]
// ...
],
"spans": [
[1,1,5,1]
]
};
Параметр "data" содержит элементы данных, заданные как массив из 4 элементов:
Пустое значение для ячейки задается пустой строкой. Например, чтобы задать ячейке стиль, но не задавать при этом значение, используйте такой синтаксис [1, 2, "", "stylename"]
"data": [
[1,1,"Report - July 2016","wss5"],
[1,2,"","wss5"],
[1,3,"","wss5"],
[2,1,"Region","wss20"],
[2,2,"Country","wss20"],
[2,3,"Sales - Group A","wss12"],
[2,4,"Sales - Group A","wss12"],
[2,5,"Total","wss13"]
]
Параметр "styles" содержит описания стилей, представленные как массив из двух элементов:
"styles": [
["wss1",";;center;;;;;;;;;"],
["wss2",";#6E6EFF;center;;;;;;;;;"],
["wss3","#FFFFFF;#6E6EFF;center;;;;;;;;;"]
],
Это необязательный параметр, включающий коллекцию размеров для определенных строк и колонок.
Содержит описания размеров, представленные как массив из трёх элементов:
Размер столбца указывается в формате [0, column_number, column_width], например [0,3,30].
Размер строки указывается в формате [row_number, 0, row_height], например [2,0,70].
"sizes": [
[1,0,60],
[0,3,158],
[0,4,137]
],
Параметр "spans" определяет значение диапазона объединения. Это массив с массивами, со следующими элементами:
Например:
"spans": [
[1,1,5,1]
]
Загрузка данных в SpreadSheet осуществляется также, как и для других компонентов Webix. Вы можете загрузить в SpreadSheet как встроенные, так и внешние (в том числе серверные) данные.
Чтобы загрузить данные с сервера, вы можете использовать метод load или свойство url.
webix.ui({
id:"ssheet",
view:"spreadsheet"
});
$$("ssheet").load("data.js");
webix.ui({
view:"spreadsheet",
url:"data.js"
});
Чтобы загрузить данные, доступные на клиенте,
webix.ui({
id:"ssheet",
view:"spreadsheet"
});
$$("ssheet").parse(data,"json");
webix.ui({
view:"spreadsheet",
data:[
{
"styles": [
["wss1",";;center;;;;;;;;;"],
["wss2",";#6E6EFF;center;;;;;;;;;"]
...
],
"sizes": [
[0,1,125],
[0,3,158]
...
],
"data": [
[1,1,"Report - July 2016","wss5"],
[1,2,"","wss5"]
...
],
"spans": [
[1,1,5,1]
]
};
]
});
SpreadSheet позволяет загружать данные в CSV формате. Во время инициализации Spreadsheet, укажите источник данных с помощью свойства url и задайте CSV формат свойству datatype:
webix.ui({
view:"spreadsheet",
url:"/data_csv.csv",
datatype:"csv",
});
Related sample: Import from CSV
После каждого изменения в ячейке SpreadSheet (редактирование или форматирование), посылается POST Ajax запрос соответствующему серверному скрипту (обработчику), который задан в свойстве save.
Если вы изменили несколько ячеек одновременно, запрос будет отправлен по каждой из них.
webix.ready(function(){
webix.ui({
view:"spreadsheet",
url: "server/get.php",
resizeCell: true,
save: {
data:"server/data.php", // если данные изменены
sizes:"server/sizes.php", // если изменен размер ячеек
spans:"server/spans.php", // если ячейки объединены или разделены
styles:"server/styles.php" // если изменены стили или создан новый
}
});
});
Также вы можете послать запрос обработчику в общем запросе:
webix.ready(function(){
webix.ui({
view:"spreadsheet",
url: "server/get.php",
resizeCell: true,
save:"/server"
});
});
В этом случае путь к нужному обработчику будет добавлен автоматически:
Параметры запросов различаются в зависимости от обработчика операции:
{
row:3,
column:9,
value: 230,
style:"wss561",
type:"number"
}
// для столбца
{
row:0,
column:7,
size:179
}
// для строки
{
row:1,
column:0,
size:60
}
{
row:1,
column:9,
x: 2,
y: 2
}
{
name:"wss562",
text:"#000000;#ff0000;left;'PT Sans', Tahoma;15px;;;;top;;no,#434343;;;;;"
}
Вы можете сохранить на сервере не только данные, но и текущее состояние Spreadsheet. Для этого включите режим автоматического сохранения, задав свойство all:
webix.ready(function(){
webix.ui({
view:"spreadsheet",
url: "server/get.php",
resizeCell: true,
save: {
all:"/server/sheets/1"
}
});
});
Related sample: Spreadsheet: Loading and Saving Data Automatically
Если вы хотите реализовать RESTful сохранение, используйте событие onChange. Один из параметров этого события - это тип операции. Таким образом, вы сможете отследить все операции и послать соответствующий запрос, чтобы их сохранить:
webix.ui({
view:"spreadsheet",
url: "/data/sheets",
on:{
onChange: function(mode, name, oldName){
switch (mode) {
case "update":
webix.ajax().put("/server/sheet"+name, this.serialize());
break;
// ...другие операции
}
}
}
});
Related sample: Spreadsheet: Saving Pages as Separate Entities
SpreadSheet это полностью клиентский компонент, поэтому на бэкенде вы можете реализовать любую логику. Вы можете посмотреть несколько демо, которые показывают выполнение данных в пакете SpreadSheet.
На Github вы также найдете пакеты для Node.js и .Net.
Вы можете загрузить текущее состояние Spreadsheet отдельно от его данных.
Чтобы получить состояние, используйте метод serialize.
var states = $$("ssheet").serialize();
Метод вернет объект с рядом параметров, которые сохранят все измененные состояния.
states = {
conditions:[
[3,6,">",100,"custom_bgcolor"],
[3,7,"<",1000,"custom_less"]
],
data:[
[1,1,"Report - July 2016","wss5", "string"],
[1,2,"","wss5"]
],
editors:[
[1,8,{ editor:"richselect", options:["One", "Two", "Three"]}]
],
filters:[
[2,2, "B3:B7"]
],
locked:[
[3,2],
[3,3]
],
sizes: [
[1,0,60],
[0,3,158],
[0,4,137]
],
styles:[
["wss1",";;center;;;;;;;;;"],
["wss2",";#6E6EFF;center;;;;;;;;;"],
["wss3","#FFFFFF;#6E6EFF;center;;;;;;;;;"]
],
spans:[
[1,1,5,1]
],
table:{
frozenColumns: 0,
frozenRows: 0,
gridlines: 1,
headers: 1
}
}
Если вы работаете с множеством листов, вы можете сериализовать каждый из них.
Для этого нужно передать объект с настройкой sheets:true как параметр метода serialize():
var states = $$("ssheet").serialize({sheets: true});
Математические формулы сериализуются вместе с остальными данными листа.
Если вы хотите отключить сериализацию математических формул, передайте объект с настройкой math:false методу serialize():
var states = $$("ssheet").serialize({math: false});
Related sample: Data serialization
Наверх