Мы можем выделить 2 типа навигации в DataTable:
Если один из типов доступен, второй блокируется. Т.е. при открытии редактора ячеек, вы больше не сможете перемещаться выделением.
Если все редакторы закрыты, вы снова сможете перемещаться выделением на другую ячейку (строку, столбец).
Навигация выделением включена в DataTable по умолчанию.
| Сочетание | Описание |
|---|---|
| Стрелка вверх | перемещение на одну ячейку (строку) вверх |
| Стрелка вниз | перемещение на одну ячейку (строку) вниз |
| Стрелка влево | перемещение на одну ячейку (строку) влево |
| Стрелка вправо | перемещение на одну ячейку (строку) вправо |
| Home | перемещает в верхнюю левую ячейку (строку, столбец) |
| End | перемещает в нижнюю правую ячейку (строку, столбец) |
| PGUP | прокручивает таблицу вверх |
| PGDN | прокручивает таблицу вниз |
Related sample: Navigation in DataTable
Чтобы установить фокус используется модуль UIManager:
Фокусировка на компоненте с ID "books"
webix.ui({ id:"books", view:"datatable" });
webix.UIManager.setFocus("books"); // установить фокус
$$("books").select($$("books").getFirstId()); // отметить фокус визуально
Этот тип навигации позволяет перемещаться внутри ячеек, доступных для редактирования: закрывая активный редактор и открывая редактор в следующей/предыдущей ячейке.
Навигация активируется после включения редактирования в таблице.
webix.ui({
view:"datatable",
editable:true
});
| Сочетание | Описание |
|---|---|
| Tab | закрывает текущий редактор и открывает следующий |
| Shift + Tab | закрывает текущий редактор и открывает предыдущий |
Подробнее о редактировании и навигации с помощью активных редакторов.
Related sample: The Tab Key Navigation
Наверх