Загрузка и Сохранение Данных

В этой статье вы найдете всю необходимую информацию о загрузке и сохранении данных в SpreadSheet. В статье рассмотрены следующие вопросы:

Формат загрузки данных

SpreadSheet загружает данные в формате JSON объекта, включающего 4 параметра:

  • data
  • sizes
  • spans
  • styles

Ниже приведен пример объекта данных для загрузки в 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

Параметр "data" содержит элементы данных, заданные как массив из 4 элементов:

  • номер строки
  • номер столбца
  • содержимое ячейки
  • CSS класс ячейки
  • тип данных (необязательный параметр). Возможные значения:
    • "date"
    • "number"
    • "string"

Пустое значение для ячейки задается пустой строкой. Например, чтобы задать ячейке стиль, но не задавать при этом значение, используйте такой синтаксис [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" содержит описания стилей, представленные как массив из двух элементов:

  • имя стиля
  • строка, содержащая стили CSS правила
"styles": [
    ["wss1",";;center;;;;;;;;;"],
    ["wss2",";#6E6EFF;center;;;;;;;;;"],
    ["wss3","#FFFFFF;#6E6EFF;center;;;;;;;;;"]
],

Параметр sizes

Это необязательный параметр, включающий коллекцию размеров для определенных строк и колонок.

Содержит описания размеров, представленные как массив из трёх элементов:

  • номер строки или 0
  • номер столбца или 0
  • размер элемента (строки или столбца)

Размер столбца указывается в формате [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" определяет значение диапазона объединения. Это массив с массивами, со следующими элементами:

  • номер строки, с которой начинается объединение
  • номер столбца с которой начинается объединение
  • количество колонок в объединенном диапазоне
  • количество строк в объединенном диапазоне

Например:

"spans": [
    [1,1,5,1]
]

Загрузка данных

Загрузка данных в SpreadSheet осуществляется также, как и для других компонентов Webix. Вы можете загрузить в SpreadSheet как встроенные, так и внешние (в том числе серверные) данные.

  • Чтобы загрузить данные с сервера, вы можете использовать метод load или свойство url.

    • используя метод load:

    webix.ui({
        id:"ssheet",
        view:"spreadsheet"
    });
    $$("ssheet").load("data.js");


    • используя свойство url:

    webix.ui({
        view:"spreadsheet",
        url:"data.js"
    });
  • Чтобы загрузить данные, доступные на клиенте,

    • вы можете использовать метод parse:

    webix.ui({
        id:"ssheet",
        view:"spreadsheet"
    });
    $$("ssheet").parse(data,"json");


    • или свойство data, задав набор данных в конфигурации Spreadsheet:

    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]
                ]
            };
        ]
    });

Загрузка данных в CSV формате

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" 
    });
});

В этом случае путь к нужному обработчику будет добавлен автоматически:

  • data => /server/data
  • styles => /server/styles
  • sizes => /server/sizes
  • spans => /server/spans

Параметры запросов различаются в зависимости от обработчика операции:

  • data.php
{
    row:3,
    column:9,
    value: 230,
    style:"wss561",
    type:"number"
}
  • sizes.php
// для столбца
{
    row:0,
    column:7,
    size:179
}
// для строки
{
    row:1,
    column:0,
    size:60
}
  • spans.php
{
    row:1,
    column:9,
    x: 2,
    y: 2
}
  • styles.php
{
    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 сохранение

Если вы хотите реализовать 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

Наверх
If you have not checked yet, be sure to visit site of our main product Webix js framework and page of javascript spreadsheet library product.