Чекбоксы в Tree

В этом разделе мы поговорим о чекбоксах в дереве: добавление, методы для работы с чекбоксами и настройка трёхпозиционного состояния.

Добавление чекбоксов

По умолчанию у компонента есть темплейт для чекбоксов: {common.checkbox()}
Подробнее о темплейтах.

Чтобы добавить чекбоксы узлам дерева, необходимо задать свойству template следующее значение:

Добавление чекбоксов в дерево

webix.ui({
    view:"tree",
    template:"{common.icon()} {common.checkbox()} {common.folder()} #value#"
    ...
});

{common.icon()} добавляет '+'/'-' иконки узлам, {common.folder()} - добавляет иконки для папок.

Related sample:  2-state Checkboxes

Трёхпозиционные чекбоксы

Помимо стандартных чекбоксов, Webix Tree поддерживает трёхпозиционные чекбоксы

Виды чекбоксов
Вид Описание
Стандартный чекбокс (двухпозиционный)
  • При изменении состояния чекбокса родительского узла, чекбоксы дочерних элементов не меняются
  • При изменении состояния чекбокса дочернего элемента состояние меняется только у этого элемента
Трёхпозиционный чекбокс
  • При изменении состояния чекбокса родительского узла, состояние чекбоксов дочерних элементов на всех уровнях также меняется
  • При изменении состояния чекбокса дочернего элемента, состояние меняется только у этого элемента


Чтобы сделать чекбоксы трёхпозиционными, необходимо задать значение true свойству threeState:

Включение трёх состояний для чекбокса

var tree = webix.ui({
    view:"tree",
    template:"{common.icon()} {common.checkbox()} {common.folder()} #value#",
    threeState: true
    ...
});

Related sample:  3-state Checkboxes

Операции с чекбоксами

Менять и проверять состояние чекбокса или получать отмеченные элементы можно с помощью API методов:

  • checkItem(id) / uncheckItem(id) - меняет состояние чекбокса для желаемого узла;
  • getChecked() - возвращает массив с ID отмеченных элементов;
  • isChecked(id) - определяет отмечен данный элемент или нет.
tree.checkItem(tree.getSelectedId());
 
tree.uncheckItem(tree.getSelectedId());

Чекбоксы можно использовать для обновления компонента (только со стороны клиента).

В обычной практике компоненты обновляются с помощью метода refresh(). Но обновлять компонент можно и с помощью чекбоксов (при изменении состояния чекбокса, компонент обновится). Для этого необходимо задать значение true свойству checkboxRefresh:

webix.ui({
    view:"datatable",
    checkboxRefresh:true
});
Наверх