В этой статье вы найдете всю необходимую информацию о загрузке и сохранении данных в SpreadSheet. В статье рассмотрены следующие вопросы:
SpreadSheet загружает данные в формате JSON объекта, включающего следующие поля:
Ниже приведен пример объекта данных для загрузки в 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;;;;;;;;;"]
],
Стили в строке перечислены в следующем порядке: color; background; text-align; font-family; font-size; font-style; underline; font-weight; vertical-align; wrap; borders; format; border-right; border-bottom; border-left; border-top; strike; indent.
Это необязательное поле, включающая коллекцию размеров для определенных строк и колонок.
Содержит описания размеров, представленные как массив из трёх элементов:
Размер столбца указывается в формате [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]
]
Поле "conditions" это 2D массив, в котором каждый внутренний массив это условие со сдедующими полями (порядок сохранён):
Например:
"conditions": [
[3, 3, "lessOrEqual", 5000, "webix_ssheet_condition_bad"],
// другие условия
]
Более подробно об условном форматировании читайте в этой статье.
Поле "formats" это 2D массив, где каждый внутренний массив это формат со следующими значениями (порядок сохранён):
Например:
"formats": [
["format6", "#,###.#"],
["format8", "[GREEN]0.00;[RED]0.00"],
// другие форматы
]
Более подробную информацию о работе с форматами читайте в этой статье.
Поле "table" это объект со следующими полями:
Например:
"table": {
frozenColumns: 0,
frozenRows: 0,
gridlines: 1,
headers: 1,
hidden: {row:[], column:[]}
}
Поле "ranges" это 2D массив, где каждый внутренний массив это именованный диапазон со следующими значениями (порядок сохранён):
Например:
"ranges": [
["my_range", "Sheet1!A2:D5", true],
["another_range", "Sheet1!C6:D7", false],
// другие диапазоны
]
Более подробную информацию о работе с диапазонами читайте на странице модуля ranges.
Поле "locked" это 2D массив, где каждый внутренний массив это заблокированная ячейка со следующими значениями (порядок сохранён):
"locked": [
[3, 2],
// другие заблокированные ячейки
]
Поле "editors" это 2D массив, где каждый внутренний массив содержит следующие значения (порядок сохранён):
Например:
"editors": [
[8, 2, {
editor: "richselect",
options: [/* опции */]
}],
[8, 3, {
editor: "richselect",
options: "B3:B7"
}]
]
Более подробную информацию о работе с редакторами в Spreadsheet можно найти в этой статье.
Поле "filters" это 2D массив, где каждый внутренний масиив содержит следующие значения (порядок сохранён):
Например:
"filters": [
[8, 2, {
value: {
condition: {filter: "", type: "greater"},
includes: [/* значения, которые необходимо включить */]
},
options: [/* опции фильтрации */],
mode: "number",
}],
[8, 3, {
value: {/* конфигурация значения как на примере выше */},
options: "B3:B7",
mode: "text",
}]
]
Более подробную информацию о работе с фильтрами в Spreadsheet читайте на этой странице.
Поле "comments" это 2D массив, где каждый внутренний массив содержит следующие значения (порядок сохранён):
Например:
"comments": [
[3, 3, [
{date: "2018-06-10 18:45", text: "Is it exact data?", user_id: 1},
]],
// другие комментарии
]
Более подробную информацию о работе с комментариями в Spreadsheet читайте на этой странице.
Поле "views" это 2D массив, где каждый внутренний массив это "компонент поверх ячеек". Значения внутри массива зависят от типа добавленного компонента.
Например
"views": [
[400, 200, "chart", {/* настройки для чарта */}],
[50, 300, "image", "/remote/assets.picture.jpg", {/* pic dimensions */}],
// другие компоненты
]
Более подробную информацию о работе с компонентами поверх ячеек читайте на этой странице.
Загрузка данных в 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
С помощью флага compactStyles: true можно удалить неиспользуемые стили со всех листов сразу. По умолчанию значение свойства - false.
var states = $$("ssheet").serialize({compactStyles: true});
Наверх