Работа с Содержимым Ячеек

Блокировка/Разблокировка ячеек

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

Чтобы заблокировать ячейку, передайте методу 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);

Если ячейка (ячейки) не заданы, метод заблокирует ячейку, выделенную на момент вызова метода.

Related sample:  Lock cells

Изменение внешнего вида заблокированных ячеек

Вы можете заменить установленное по умолчанию изображение на подсвечивание фона, применив 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") диапазон ссылок на ячейки или массив с опциями редактора
$$("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 - (string) тип редактора (ss_richselect, popup, excel_date, text)
  • options - (string,array) диапазон ячеек или массив с опциями редактора
{editor:"ss_richselect", options:["One","Two","Three"]}
 
// или
{editor:"ss_richselect", options:"B3:B7"}

Related sample:  Dropdowns

Фильтрация ячеек

Вы можете задать фильтр для ячеек с помощью метода setCellFilter.

Передайте методу следующие параметры:

  • rowId - (number) ID строки
  • columnId - (number) ID колонки
  • options - (string,array) диапазон ячеек или массив с опциями для фильтра
// массив с опциями
$$("ss1").setCellFilter(1,2, ["", "Europe", "Asia", "America"]);
// диапазон ссылок на ячейки
$$("ss1").setCellFilter(2,2, "B3:B7");

Related sample:  Filters

Сортировка ячеек

SpreadSheet позволяет сортировать ячейки. Диапазон для сортировки определяется текущим выделением ячеек или параметром, переданным методу sortRange. Всего метод принимает два параметра:

  • range - (string) (необязательный параметр) диапазон ячеек для сортировки. null - отсортировать выделенный диапазон
  • dir - (string) (необязательный параметр) направление сортировки: "asc" - возрастающая (по умолчанию) или "desc" - убывающая
// возрастающая (по умолчанию) сортировка заданного диапазона
$$("ssheet").sortRange("B2:B4");
// убывающая сортировка заданного диапазона
$$("ssheet").sortRange("B2:B4", "desc");
// убывающая сортировка выделенного диапазона
$$("ssheet").sortRange(null,"desc");

Related sample:  Sorting

Добавление спарклайнов в ячейки

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

Чтобы поместить спарклайн внутрь ячейки, необходимо использовать метод 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");

Related sample:  Adding images

Добавление комментариев в ячейку

Также вы можете добавить комментарии к ячейкам SpreadSheet.

Add comment in a cell

Используйте метод 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});

Related sample:  Placeholders

Наверх
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.