Работа с таблицей
Пока пользователи взаимодействуют со Spreadsheet через его интерфейс, вы можете работать с компонентом посредством его простого API.
Операции Undo/Redo
Метод API undo() отменяет последнее действие:
spreadsheet.undo();
Чтобы повторить отменённое действие, используйте метод redo():
spreadsheet.redo();
Добавление/удаление строк и столбцов
Столбцы
Для добавления/удаления столбца используйте соответствующие методы API:
Передайте в методы идентификатор ячейки, содержащей идентификатор столбца, который нужно добавить/удалить.
// добавляет пустой столбец "C"
spreadsheet.addColumn("C1");
// удаляет столбец "C"
spreadsheet.deleteColumn("C1");
При добавлении нового столбца соседние столбцы смещаются вправо.
Вы можете удалить несколько столбцов, передав диапазон идентификаторов ячеек в качестве параметра метода deleteColumn(), например: "A1:C3".
Строки
Для добавления/удаления строки используйте следующие методы API:
Передайте в методы идентификатор ячейки, содержащей идентификатор строки, которую нужно добавить/удалить.
// добавляет пустую вторую строку
spreadsheet.addRow("A2");
// удаляет вторую строку
spreadsheet.deleteRow("A2");
При добавлении новой строки соседние строки смещаются на одну ячейку вниз.
Вы можете удалить несколько строк, передав диапазон идентификаторов ячеек в качестве параметра метода deleteRow(), например: "A1:C3".
Автоподбор ширины столбца
Чтобы изменить ширину столбца так, чтобы она автоматически подстраивалась под самое длинное содержимое в столбце, применяйте метод fitColumn(). Метод принимает один параметр — идентификатор ячейки, содержащей имя нужного столбца.
// подстраивает ширину столбца "G"
spreadsheet.fitColumn("G2");
Закрепление/открепление строк и столбцов
Вам может потребоваться зафиксировать («закрепить») некоторые столбцы или строки, чтобы они оставались статичными при прокрутке страницы, пока остальные столбцы и строки остаются подвижными.
Столбцы
Для закрепления/открепления столбцов используйте соответствующие методы API:
Передайте в методы идентификатор ячейки для определения идентификатора столбца. Если идентификатор ячейки не передан, будет использоваться текущая выбранная ячейка.
// закрепление столбцов
spreadsheet.freezeCols("B2"); // столбцы до столбца "B" будут зафиксированы
spreadsheet.freezeCols("sheet2!B2"); // столбцы до столбца "B" на "sheet2" будут зафиксированы
// открепление столбцов
spreadsheet.unfreezeCols(); // зафиксированные столбцы на текущем листе будут откреплены
spreadsheet.unfreezeCols("sheet2!A1"); // зафиксированные столбцы на "sheet2" будут откреплены
Строки
Для закрепления/открепления строк используйте соответствующие методы API:
Передайте в методы идентификатор ячейки для определения идентификатора строки. Если идентификатор ячейки не передан, будет использоваться текущая выбранная ячейка.
// закрепление строк
spreadsheet.freezeRows("B2"); // строки до строки "2" будут зафиксированы
spreadsheet.freezeRows("sheet2!B2"); // строки до строки "2" на "sheet2" будут зафиксированы
// открепление строк
spreadsheet.unfreezeRows(); // зафиксированные строки на текущем листе будут откреплены
spreadsheet.unfreezeRows("sheet2!A1"); // зафиксированные строки на "sheet2" будут откреплены
Закрепление строк/столбцов в наборе данных
Вы также можете фиксировать строки и столбцы для конкретных листов в наборе данных при парсинге данных в Spreadsheet.
Для этого используйте свойство freeze в объекте sheets метода parse():
const data = {
sheets: [
{
name: "sheet 1",
id: "sheet_1",
data: [
{ cell: "A1", value: "Country" },
{ cell: "B1", value: "Product" }
],
freeze: {
col: 2,
row: 2
},
// другие настройки "sheet_1"
},
// другие объекты конфигурации листов
]
};
spreadsheet.parse(data);
Скрытие/отображение строк и столбцов
Вы можете скрывать и отображать отдельные строки и столбцы с помощью соответствующих методов API.
Столбцы
Для скрытия/отображения столбца используйте следующие методы:
Передайте в методы идентификатор ячейки для определения идентификатора столбца. Если идентификатор ячейки не передан, будет использоваться текущая выбранная ячейка.
// скрытие столбцов
spreadsheet.hideCols("B2"); // столбец "B" будет скрыт
spreadsheet.hideCols("sheet2!B2"); // столбец "B" на "sheet2" будет скрыт
spreadsheet.hideCols("B2:C2"); // столбцы "B" и "C" будут скрыты
// отображение столбцов
spreadsheet.showCols("B2"); // столбец "B" снова станет видимым
spreadsheet.showCols("sheet2!B2"); // столбец "B" на "sheet2" снова станет видимым
spreadsheet.showCols("B2:C2"); // столбцы "B" и "C" снова станут видимыми
Строки
Для скрытия/отображения строки используйте следующие методы API:
Передайте в методы идентификатор ячейки для определения идентификатора строки. Если идентификатор ячейки не передан, будет использоваться текущая выбранная ячейка.
// скрытие строк
spreadsheet.hideRows("B2"); // строка "2" будет скрыта
spreadsheet.hideRows("sheet2!B2"); // строка "2" на "sheet2" будет скрыта
spreadsheet.hideRows("B2:C4"); // строки с "2" по "4" будут скрыты
// отображение строк
spreadsheet.showRows("B2"); // строка "2" снова станет видимой
spreadsheet.showRows("sheet2!B2"); // строка "2" на "sheet2" снова станет видимой
spreadsheet.showRows("B2:C2"); // строки с "2" по "4" снова станут видимыми
Фильтрация данных
Установка фильтра
Вы можете фильтровать данные в таблице и отображать только записи, соответствующие заданным критериям. Для этого используйте метод setFilter() и укажите правила фильтрации для нужного(ых) столбца(ов).
Например, можно задать критерии фильтрации для отдельного столбца:
// фильтрация данных по критериям для столбца A
spreadsheet.setFilter("A2", [{condition: { factor: "tc", value: "e" }, exclude: ["Peru"]}]);
// фильтрация данных по критериям для столбца C
spreadsheet.setFilter("C1", [{}, {}, {condition: {factor: "inb", value: [5,8]}, exclude: [3.75]}]);
В этом случае значок фильтра появляется для каждого столбца в диапазоне данных.
Также можно задать критерии фильтрации для диапазона ячеек:
// фильтрация данных по критериям для столбца C
spreadsheet.setFilter("C1:C9", [{condition: {factor: "inb", value: [5,8]}, exclude: [3.75]}]);
// фильтрация данных по критериям для столбцов A и C
spreadsheet.setFilter("A1:C10", [{condition: {factor: "tc", value: "e"}}, {}, {condition: {factor: "ib", value: [5,8]}}]);
и значок фильтра появляется только для столбцов в указанном диапазоне.
Связанный пример: Spreadsheet. Фильтрация через API
Сброс фильтра
Если вы хотите сбросить фильтрацию, применяйте метод setFilter() без параметров или передайте только первый параметр в метод:
spreadsheet.setFilter("A2");
Получение фильтра
Чтобы получить критерии, по которым в данный момент фильтруются данные на листе, применяйте метод getFilter(). Передайте идентификатор нужного листа в качестве параметра метода.
const filter = spreadsheet.getFilter("Income");
Передавать идентификатор листа не нужно, если вы хотите получить критерии фильтра, применённые к текущему активному листу:
const filter = spreadsheet.getFilter();
Поиск данных
Вы можете получить ячейки, содержащие определённые записи, передав нужное для поиска значение в метод search().
spreadsheet.search("min"); // -> ['D1']
Также можно передать true в качестве второго параметра, чтобы открыть строку поиска и выделить найденные ячейки в таблице:
spreadsheet.search("min", true);
По умолчанию таблица выполняет поиск по ячейкам текущего активного листа. Чтобы искать записи на другом листе, передайте его идентификатор в качестве третьего параметра метода:
spreadsheet.search("min", false, "Income");
Закрытие строки поиска
Для скрытия строки поиска используйте метод hideSearch():
spreadsheet.hideSearch();
Сортировка данных
Начиная с версии v4.3, вы можете сортировать данные в таблице с помощью метода sortCells(). Передайте в метод два параметра:
cell— идентификатор(ы) ячейки(ек) или диапазон ячеек, по которому нужно отсортировать данные в таблицеdir— направление сортировки: 1 — по возрастанию, -1 — по убыванию
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
// параметры конфигурации
});
spreadsheet.sortCells("B2:B11", -1);
Очистка таблицы
Вы можете очистить всю таблицу сразу с помощью метода clear():
spreadsheet.clear();
Связанный пример: Spreadsheet. Очистка
Если нужно очистить конкретный лист, используйте мето д sheets.clear().