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

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

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

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

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.