Работа с Содержимым Ячеек
Блокировка/Разблокировка ячеек
Чтобы защитить содержимое от редактирования, вы можете заблокировать одну или сразу несколько ячеек. В правом нижнем углу заблокированной ячейки появится изображение желтого замка.
Чтобы заблокировать ячейку, передайте методу lockCell три параметра:
- row - (number) ID строки
- column - (number) ID колонки
- state - (boolean) true - заблокировать, false - разблокировать
// блокирует ячейку на пересечении 3-й строки и 2-й колонки
$$("ssheet").lockCell(3, 2, true);
Заблокировать/разблокировать несколько ячеек можно тем же методом, но с другими параметрами:
- first - (object) номера колонки и строки первой ячейки в диапазоне
- last - (object) номера колонки и строки последней ячейки в диапазоне
- state - (boolean) true - заблокировать, false - разблокировать
// блокирует 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.
Метод принимает два параметра:
- rowId - (number) ID строки
- columnId - (number) ID колонки
и возвращает true, если ячейка заблокирована и false если разблокирована.
var isLocked = $$("ssheet").isCellLocked(3, 2);
Добавление редактора в ячейку
Вы можете добавить редактор в ячейку таблицы. Опции редактора берутся из диапазона ячеек или из массива, который вы передадите методу. Вы также можете явно указать, добавлять ли пустую опцию.
Для добавления редактора используйте метод setCellEditor. Метод принимает три параметра:
- rowId - (number) ID строки
- columnId - (number) ID колонки
- editorObject - (object) объект с двумя свойствами:
- editor - (string) тип редактора (ss_richselect, popup, date, text)
- options - (string,array) (свойство используется для
editor:"ss_richselect") диапазон ссылок на ячейки или массив с опциями редактора - empty - (boolean) указывает, добавлять ли пустую опцию
$$("ss1").setCellEditor(8,1,{ editor:"ss_richselect", options:["One", "Two", "Three"]});
// or
$$("ss1").setCellEditor(8,2,{ editor:"ss_richselect", options:"B3:B7", empty:true });
Получение редактора ячеек
Вы можете получить набор опций редактора с помощью метода getCellEditor.
Метод принимает в качестве параметров ID строки и колонки.
$$("ss1").getCellEditor(8,1);
Метод возвращает объект с двумя свойствами:
- editor - (string) тип редактора (ss_richselect, popup, excel_date, text)
- options - (string,array) диапазон ячеек или массив с опциями редактора
{editor:"ss_richselect", options:["One","Two","Three"]}
// или
{editor:"ss_richselect", options:"B3:B7"}
Фильтрация ячеек
Вы можете задать фильтр для ячеек с помощью метода setCellFilter.
Передайте методу следующие параметры:
- rowId - (number) ID строки
- columnId - (number) ID колонки
- options - (string,array) диапазон ячеек или массив с опциями для фильтра
// массив с опциями
$$("ss1").setCellFilter(1,2, ["", "Europe", "Asia", "America"]);
// диапазон ссылок на ячейки
$$("ss1").setCellFilter(2,2, "B3:B7");
Сортировка ячеек
SpreadSheet позволяет сортировать ячейки. Диапазон для сортировки определяется текущим выделением ячеек или параметром, переданным методу sortRange. Всего метод принимает два параметра:
- range - (string) (необязательный параметр) диапазон ячеек для сортировки. null - отсортировать выделенный диапазон
- dir - (string) (необязательный параметр) направление сортировки: "asc" - возрастающая (по умолчанию) или "desc" - убывающая
// возрастающая (по умолчанию) сортировка заданного диапазона
$$("ssheet").sortRange("B2:B4");
// убывающая сортировка заданного диапазона
$$("ssheet").sortRange("B2:B4", "desc");
// убывающая сортировка выделенного диапазона
$$("ssheet").sortRange(null,"desc");
Добавление спарклайнов в ячейки
В ячейку также можно поместить небольшую диаграмму (спарклайн), что позволит быстро отслеживать динамически изменяющиеся данные.
Чтобы поместить спарклайн внутрь ячейки, необходимо использовать метод addSparkline со следующими параметрами:
- rowId - (number) ID строки
- columnId - (number) ID колонки
- config - (object) конфигурация спарклайна со следующими свойствами:
- type - (string) тип добавляемого спарклайна
- data - (string) диапазон ячеек, значения которых будут отображаться на диаграмме
- color - (string) цвет диаграммы, можно задать в HEX формате или HTML кодом
- negativeColor - (string) цвет для отрицательных значений столбчатой (Bar) диаграммы
$$("ssheet").addSparkline(rowId, columnId, config);
Давайте поместим в ячейку E5 синий спарклайн с типом "line":
$$("ssheet").addSparkline(5,5,{type:"line", range:"B4:E4", color:"#6666FF"});
Related sample: Adding sparklines
Добавление изображений в ячейку
Вы можете добавить в ячейку изображение.
Используйте метод addImage, который принимает три параметра:
- rowId - (number) ID строки
- columnId - (number) ID колонки
- url - (string) URL картинки
$$("ssheet").addImage(2,3, "http://docs.webix.com/media/desktop/image.png");
Добавление комментариев в ячейку
Также вы можете добавить комментарии к ячейкам SpreadSheet.
Используйте метод add() объекта comments. Метод принимает три параметра:
- rowId - (number) ID строки
- columnId - (number) ID колонки
- comment - (string) текст комментария
// добавляет комментарий в ячейку 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});
If you have not checked yet, be sure to visit site of our main product Webix web control library and page of spreadsheet javascript library product.