Виджеты Примеры Демо Форум Сервисы
Документация
СтартКомплексные решенияSpreadSheet

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

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

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

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

  • data
  • sizes
  • spans
  • styles
  • conditions
  • formats
  • table
  • ranges
  • locked
  • editors
  • filters
  • comments
  • views

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

Стили в строке перечислены в следующем порядке: 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.

Поле 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]
]

Поле conditions

Поле "conditions" это 2D массив, в котором каждый внутренний массив это условие со сдедующими полями (порядок сохранён):

  • ID ряда
  • ID столбца
  • правило (напр., "greater", "less", и др.)
  • значение, с которым необходимо сравнить
  • имя CSS класса, который будет применён в случае, если условие выполняется.

Например:

"conditions": [
    [3, 3, "lessOrEqual", 5000, "webix_ssheet_condition_bad"],
    // другие условия 
]

Более подробно об условном форматировании читайте в этой статье.

Поле formats

Поле "formats" это 2D массив, где каждый внутренний массив это формат со следующими значениями (порядок сохранён):

  • название формата
  • сам формат.

Например:

"formats": [
    ["format6", "#,###.#"],
    ["format8", "[GREEN]0.00;[RED]0.00"],
    // другие форматы
]

Более подробную информацию о работе с форматами читайте в этой статье.

Поле table

Поле "table" это объект со следующими полями:

  • frozenColumns (number) - зафиксированные столбцы
  • frozenRows (number) - зафиксированные ряды
  • gridLines (number) - сетка таблицы. 1, если сетка включена
  • headers (sting, number) - ряд/столбец с хедером таблицы
  • hidden (object) - хранит массивы row и column со скрытыми ячейками.

Например:

"table": {
    frozenColumns: 0,
    frozenRows: 0,
    gridlines: 1,
    headers: 1,
    hidden: {row:[], column:[]}
}

Поле ranges

Поле "ranges" это 2D массив, где каждый внутренний массив это именованный диапазон со следующими значениями (порядок сохранён):

  • название диапазона
  • диапазон ячеек
  • область видимости диапазона.

Например:

"ranges": [
    ["my_range", "Sheet1!A2:D5", true],
    ["another_range", "Sheet1!C6:D7", false],
    // другие диапазоны
]

Более подробную информацию о работе с диапазонами читайте на странице модуля ranges.

Поле locked

Поле "locked" это 2D массив, где каждый внутренний массив это заблокированная ячейка со следующими значениями (порядок сохранён):

  • ID ряда
  • ID столбца.
"locked": [
    [3, 2],
    // другие заблокированные ячейки
]

Поле editors

Поле "editors" это 2D массив, где каждый внутренний массив содержит следующие значения (порядок сохранён):

  • ID ряда
  • ID столбцы
  • объект редактора.

Например:

"editors": [
    [8, 2, {
        editor: "richselect",
        options: [/* опции */]
    }],
    [8, 3, {
        editor: "richselect",
        options: "B3:B7"
    }]
]

Более подробную информацию о работе с редакторами в Spreadsheet можно найти в этой статье.

Поле filters

Поле "filters" это 2D массив, где каждый внутренний масиив содержит следующие значения (порядок сохранён):

  • ID ряда
  • ID столбцы
  • объект фильтра.

Например:

"filters": [
    [8, 2, {
        value: {
            condition: {filter: "", type: "greater"},
            includes: [/* значения, которые необходимо включить */]
        },
        options: [/* опции фильтрации */],
        mode: "number",
    }],
    [8, 3, {
        value: {/* конфигурация значения как на примере выше */},
        options: "B3:B7",
        mode: "text",
    }]
]

Более подробную информацию о работе с фильтрами в Spreadsheet читайте на этой странице.

Поле comments

Поле "comments" это 2D массив, где каждый внутренний массив содержит следующие значения (порядок сохранён):

  • ID ряда
  • ID столбцы
  • массив объектов комментариев.

Например:

"comments": [
    [3, 3, [
        {date: "2018-06-10 18:45", text: "Is it exact data?", user_id: 1},
 
    ]],
    // другие комментарии 
]

Более подробную информацию о работе с комментариями в Spreadsheet читайте на этой странице.

Поле views

Поле "views" это 2D массив, где каждый внутренний массив это "компонент поверх ячеек". Значения внутри массива зависят от типа добавленного компонента.

Например

"views": [
    [400, 200, "chart", {/* настройки для чарта */}],
    [50, 300, "image", "/remote/assets.picture.jpg", {/* pic dimensions */}],
    // другие компоненты
]

Более подробную информацию о работе с компонентами поверх ячеек читайте на этой странице.

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

Загрузка данных в 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

Сериализация без ненужных стилей

С помощью флага compactStyles: true можно удалить неиспользуемые стили со всех листов сразу. По умолчанию значение свойства - false.

var states = $$("ssheet").serialize({compactStyles: true});
Наверх
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.
© XB Software Ltd
2013-2025