Работа со Страницами

Скрыть/показать хедеры и гриды

Скрыть хедеры

Хедеры столбцов и строк листа можно скрыть с помощью метода hideHeaders.

Передайте методу нужное состояние в качестве параметра:

// скрыть хедеры
$$("ssheet").hideHeaders(true);
// показать хедеры
$$("ssheet").hideHeaders(false);

Related sample:  Borders and Gridlines

Скрыть сетку

Чтобы скрыть сетку, используйте метод hideGridlines.

Метод принимает булев параметр state:

// скрыть сетку
$$("ssheet").hideBorders(true);
// показать сетку
$$("ssheet").hideBorders(false);

Related sample:  Borders and Gridlines

Показать\спрятать лист

You can hide sheets or make them visible with the help of the setSheetState method. Pass the necessary state of headers as a parameter:

  • "visible" - to make a sheet visible;
  • "hidden" - to hide a sheet. It can be made visible on UI or by calling setSheetState() with the "visible" parameter.
  • "veryHidden" - to hide a sheet and disable the opportunity to make it visible on UI. The only way to make it visible again is to call setSheetState() with the "visible" parameter.

To check the visibility state, use the getSheetState method.

Добавить несколько листов

Чтобы добавить несколько листов в SpreadSheet, необходимо выполнить следующие условия:

1) включить нижнюю панель

Нижняя панель необходима для переключения между листами. Чтобы добавить панель, задайте свойству bottombar значение true.

2) добавьте нужное количество листов с их конфигурацией

Используйте конфигурацию sheets, в качестве значений укажите массив объектов добавляемого листа. Каждый объект содержит следующие свойства:

  • name - (string) имя листа
  • content - (object) объект с конфигурацией листа
    • data - (array) массив с данными листа. Каждый элемент массива данных задан как массив из трех элементов:
      • rowId
      • columnId
      • value
webix.ui({
    view:"spreadsheet",
    data:{
        sheets: [
            {
                name: "Tab 1",
                content:{
                    data:[
                        [1,1,"Page 1"]
                    ]
                }
            },
            {
                name: "Tab 2",
                content:{
                    data:[
                        [1,1,"Page 2"]
                    ]
                }
            },
            {
                name: "Tab 3",
                content:{
                    data:[
                        [1,1,"Page 3"]
                    ]
                }
            }
        ]
    },
    bottombar:true
});

Related sample:  Multiple sheets

Альтернативный вариант загрузки листов - это массив объектов с именами листов и содержимым:

webix.ui({
    view:"spreadsheet",
    data: [
        {
            name: "Tab 1",
            content:{ .. }
        },
        {
            name: "Tab 2",
            content:{ .. }
        },
        {
            name: "Tab 3",
            content:{ .. }
        }
    ],
    bottombar:true
});

Добавить новый лист

Чтобы добавить новый лист, используйте метод addSheet method. Если вы не укажете имя, SpreadSheet автоматически сгенерирует его.

$$("ssheet").addSheet();

В качестве дополнительных параметров можно передать свойство content, имя и видимость листа:

$$("ssheet").addSheet({data:[[1,1,"Page 2"]]}, "My new Tab", false);

Скопировать лист

Чтобы скопировать содержимое листа в другой лист, выполните два шага:

1) получите содержимое листа, который вы хотите скопировать с помощью метода serialize:

// получает содержимое активного листа
var content = $$("ssheet").serialize();

2) создайте новый лист, используя метод addSheet, и передайте полученное в предыдущем шаге содержимое в качестве параметра:

// копирует в новый лист
$$("ssheet").addSheet(content);

Получить данные листа

Вы можете получить доступ к данным любой ячейки Spreadsheet или диапазона ячеек с помощью SpreadSheet API. Для этого вызовите необходимый вам метод:

  • getCellValue, чтобы получить значение ячейки.
  • setCellValue, чтобы задать значение ячейки.
  • getRangeValue, чтобы получить значения из диапазона.
  • setRangeValue, чтобы задать значения для диапазона.
// получить значение ячейки
var value = $$("ssheet").getCellValue(3, 1, true, "Sheet2"); //-> "=5"
 
// задать значение ячейки
$$("ssheet").setCellValue(3, 1, "=5", "Sheet2");
 
// получить значения из диапазона
var value = $$("ssheet").getRangeValue("A1:B2","Sheet2"); //-> [3456, 6543]
 
// задать значения для диапазона
$$("ssheet").setRangeValue("A1:B2", [1,2,3,4], "Sheet2");
Наверх
If you have not checked yet, be sure to visit site of our main product Webix easy javascript framework and page of web based spreadsheet product.