Beginner

Выбор элементов

Встроенный выбор

Выбор одного элемента

Чтобы разрешить выбор элементов, укажите значение true (или 1) свойству конструктора компонента select.

webix.ui({
    view:"dataview",
    select:1, // разрешает выбор элементов
    // конфиг
});

Related sample: Selection in Dataview

Элементы можно выбирать по клику.

Выбор нескольких элементов

Чтобы разрешить выбор нескольких элементов укажите значение "multiselect" свойству select. Чтобы выбрать несколько элементов, кликайте по элементам поочерёдно, зажав при этом клавишу Ctrl.
Если вы хотите выбирать элементы только по клику (или при тапе на сенсорных устройствах), задайте свойству multiselect значение "touch".

Выбор нескольких элементов в DataView, List и Tree

"Ctrl" + клик для множественного выбора

webix.ui({
    view:"list",
    select:"multiselect",
    // конфиг
});

"Touch" для выбора нескольких элементов

webix.ui({
    view:"list",
    select:"multiselect",
    multiselect:"touch"
    // конфиг
});

Выбор нескольких элементов в Datatable и Treetable

"Ctrl" + клик для множественного выбора

webix.ui({
    view:"datatable",
    multiselect:true,
    select:"cell", // выбор нескольких ячеек
    // конфиг
});

"Touch" для выбора нескольких элементов

webix.ui({
    view:"datatable",
    multiselect:"touch", 
    select:'cell',
    // конфиг
});

У компонентов, у которых заранее заданы иерархические данные (Tree и treetable) можно выбирать несколько элементов внутри одной ветки (элементы одного уровня). Для этого укажите значение "level" свойству multiselect:

webix.ui({
    view:"tree",
    select:true,
    multiselect:"level", // в добавок к "select"
    // конфиг дерева
 
});

Related sample: Multiline Selection

У Datatable и treetable есть и другие режимы выбора, которые описаны в документации к Datatable.

Методы для выбора элементов

Вы также можете выбирать элементы с помощью специальных методов, которые вызываются событиями:

функция select(IDs, [non_modal, continue]) выбирает указанные элементы. Читайте API по выбору элементов.

Если вы не передадите никаких параметров, функция выберет все элементы.

Вы можете выбрать первый/последний элемент данных, не указывая их ID. Для этого вызовите методы компонента first() или last() соответственно.

$$("datalist").select($$("datalist").getFirstId();) // выбирает первый элемент из списка
 
$$("dataview").select(4); // выбирает ячейку с ID = 4 
$$("dataview").select([2,3,4]); // выбирает элементы с ID 2, 3 и 4

selectAll() - функция аналогична select(); без параметров выберет все элементы;
unselect() и unselectAll() - работает по тому же принципу, что и вышеупомянутые и снимает выбор с элементов;
isSelected(id) - проверяет, выбран ли элемент с указанным ID. Возвращает true или false;
getSelectedId() - функция не принимает никаких параметров. Возвращает ID выбранного элемента или массив ID, если включён режим множественного выбора.

Вы можете использовать клавиатуру для выбора элементов (если выбор разрешён).

webix.ui({
    view:"list",
    select:true,
    navigation:true
});

Обратите внимание, что не все компоненты данных поддерживают навигацию с помощью клавиатуры по умолчанию. В этом случае, необходимо добавить модуль KeysNavigation.

webix.ui({
    view:"dataview", 
    id:"dataview1", 
    select:true, 
    navigation:true
});
 
webix.extend($$("dataview1"), webix.KeysNavigation);

Код выше добавляем возможность навигации только для данного экземпляра DataView, однако у вас есть возможность добавить функциональность всем DataViews в приложении. Подробнее об этом читайте в статье о расширении компонентов.

Наверх