Чтобы защитить содержимое от редактирования, вы можете заблокировать одну или сразу несколько ячеек. В правом нижнем углу заблокированной ячейки появится изображение желтого замка.
Чтобы заблокировать ячейку, передайте методу lockCell три параметра:
// блокирует ячейку на пересечении 3-й строки и 2-й колонки
$$("ssheet").lockCell(3, 2, true);
Заблокировать/разблокировать несколько ячеек можно тем же методом, но с другими параметрами:
// блокирует 7 ячеек во 2-й строке
$$("ssheet").lockCell({ row:2, column:1 }, { row:2, column:7 }, true);
// блокирует 7 ячеек во 2-й колонке
$$("ssheet").lockCell({ row:1, column:2 }, { row:7, column:2 }, true);
// блокирует 10 ячеек в 1-й и 2-й строке
$$("ssheet").lockCell({ row:1, column:1 }, { row:2, column:5 }, true);
Если ячейка (ячейки) не заданы, метод заблокирует ячейку, выделенную на момент вызова метода.
Вы можете заменить установленное по умолчанию изображение на подсвечивание фона, применив CSS стили:
<style>
.webix_lock:after{
content:" ";
}
.webix_lock {
background-color:#99f29d;
}
</style>
Related sample: Styling locked cells
Вы можете проверить заблокирована ли ячейка с помощью метода isCellLocked.
Метод принимает два параметра:
и возвращает true, если ячейка заблокирована и false если разблокирована.
var isLocked = $$("ssheet").isCellLocked(3, 2);
Вы можете добавить редактор в ячейку таблицы. Опции редактора берутся из диапазона ячеек или из массива, который вы передадите методу.
Для добавления редактора используйте метод setCellEditor. Метод принимает три параметра:
editor:"ss_richselect"
) диапазон ссылок на ячейки или массив с опциями редактора $$("ss1").setCellEditor(8,1,{ editor:"ss_richselect", options:["One", "Two", "Three"]});
// или
$$("ss1").setCellEditor(8,2,{ editor:"ss_richselect", options:"B3:B7" });
Вы можете получить набор опций редактора с помощью метода getCellEditor.
Метод принимает в качестве параметров ID строки и колонки.
$$("ss1").getCellEditor(8,1);
Метод возвращает объект с двумя свойствами:
{editor:"ss_richselect", options:["One","Two","Three"]}
// или
{editor:"ss_richselect", options:"B3:B7"}
Вы можете задать фильтр для ячеек с помощью метода setCellFilter.
Передайте методу следующие параметры:
// массив с опциями
$$("ss1").setCellFilter(1,2, ["", "Europe", "Asia", "America"]);
// диапазон ссылок на ячейки
$$("ss1").setCellFilter(2,2, "B3:B7");
SpreadSheet позволяет сортировать ячейки. Диапазон для сортировки определяется текущим выделением ячеек или параметром, переданным методу sortRange. Всего метод принимает два параметра:
// возрастающая (по умолчанию) сортировка заданного диапазона
$$("ssheet").sortRange("B2:B4");
// убывающая сортировка заданного диапазона
$$("ssheet").sortRange("B2:B4", "desc");
// убывающая сортировка выделенного диапазона
$$("ssheet").sortRange(null,"desc");
В ячейку также можно поместить небольшую диаграмму (спарклайн), что позволит быстро отслеживать динамически изменяющиеся данные.
Чтобы поместить спарклайн внутрь ячейки, необходимо использовать метод addSparkline со следующими параметрами:
$$("ssheet").addSparkline(rowId, columnId, config);
Давайте поместим в ячейку E5 синий спарклайн с типом "line"
:
$$("ssheet").addSparkline(5,5,{type:"line", range:"B4:E4", color:"#6666FF"});
Related sample: Adding sparklines
Вы можете добавить в ячейку изображение.
Используйте метод addImage, который принимает три параметра:
$$("ssheet").addImage(2,3, "http://docs.webix.com/media/desktop/image.png");
Также вы можете добавить комментарии к ячейкам SpreadSheet.
Используйте метод add() объекта comments. Метод принимает три параметра:
// добавляет комментарий в ячейку B3
$$("ssheet").comments.add(3,2,"text");
API объекта comments также позволяет получать комментарии определенной ячейки или удалять ненужные комментарии:
// получает комментарий ячейки B3
$$("ssheet").comments.get(3,2);
// удаляет комментарий из ячейки B3
$$("ssheet").comments.remove(3,2);
Вы можете указать, какие именно данные будут отображаться в ячейках SpreadSheet, используя плейсхолдеры.
Плейсхолдер - это объект со свойствами данных, которые могут быть заданы как значения SpreadSheet. Чтобы установить плейсхолдер, используйте метод setPlaceholder:
$$("ssheet").setPlaceholder({value:"France", expense:1366, income:842});
Чтобы указать свойство плейсхолдера в ячейке вместо значения, используйте следующую конструкцию:
={{property}}.
Например, для ячейки со значением "expense" плейсхолдер будет указан следующим образом:
"={{expense}}".
Если вы зададите новый плейсхолдер для SpreadSheet, значения всех ячеек, в которых были указаны свойства этого плейсхолдера, обновятся.
$$("ssheet").setPlaceholder({value:"Poland", expense:684, income:781});