Перейти к основному содержимому

Tree

Отображает элементы в виде древовидной структуры

Используется для отображения многоуровневого списка элементов в виде древовидной структуры. Позволяет делать следующее:

  • сворачивать и разворачивать узлы дерева;
  • изменять значки в узлах дерева;
  • обрезать текст по ширине контейнера, в который помещен компонент. Поддерживает шаблонизацию. Шаблон элемента дерева задается в дочернем компоненте, которым должен быть компонент Group. Свойству Slot компонента Group должно быть присвоено значение "ItemTemplate". В шаблоне доступ к данным текущего элемента можно получить через переменную, имя которой определяется свойством ItemAlias. Если значение ItemAlias не передано, по умолчанию используется переменная item.

Чтобы для разных типов элементов использовать разные шаблоны, для компонента Group можно создать несколько дочерних компонентов Group и управлять их видимостью в зависимости от типа элемента. Следующий блок кода демонстрирует задание разных шаблонов для узла и листа дерева.

<Tree
  Value={
    [{id: 1, text: 'группа1', "icon": "bullet", children: []},
    {id: 2, text: 'группа2', "icon": "bullet2", children: [
      {id: 3, "icon": "bullet3", text: 'элемент1'},
    ]},
  ]}
  OpenedItems-var="openedItems"
  CurrentItem-var="currentItem"
>
  <Group>
    <Group Visible-var="item.children" VerticalAlign="Center">
      <Icon Size="Small" Name-var="item.icon" CSS={['px-4']} />
      <Text Mode="Medium_16" Value-var="item.text"/>
    </Group>
    <Group Hidden-var="item.children" VerticalAlign="Center">
      <Icon Size="Small" Name="item.icon" CSS={['px-4']} />
      <Text Value-var="item.text"/>
    </Group>
  </Group>
</Tree>

Свойства​

Badge​

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS​

Массив строк-классов CSS-стилей, описанных в файле CSS.css разрабатываемого проекта или встроенных CSS-стилей Платформы.

Пример:

// внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme разрабатываемого проекта.
CSS={["m-4", "p-4"]}

Тип: array

ChevronClosedIcon​

Псевдоним значка группы элементов в свернутом состоянии.

Тип: string

ChevronOpenedIcon​

Псевдоним значка группы элементов в развернутом состоянии.

Тип: string

ChildrenField​

Поле структуры (являющейся элементом массива, переданного в свойстве Value), которое является массивом и описывает дочерние элементы узла дерева.

Тип: string

Значение по умолчанию: children

CombineConfig​

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых блоков кода. Запрещено изменять значение.

Тип: object

CurrentItem​

Псевдоним свойств InputCurrentItem и OutputCurrentItem.

Тип: any

Hidden​

Признак состояния компонента Скрыт.

Тип: boolean

Hint​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне

Тип: any

Id​

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

InputCurrentItem​

Входной параметр компонента: идентификатор текущего выбранного узла дерева.

Тип: any

InputOpenedItems​

Входной параметр компонента: массив идентификаторов раскрытых узлов.

Тип: array

ItemAlias​

Идентификатор повторяющегося набора данных.

Тип: string

Значение по умолчанию: item

ItemHeight​

Высота элемента в пикселях.

Тип: number

Значение по умолчанию: 30

ItemIndexVariable​

Имя переменной для доступа к индексу текущего элемента в массиве Value.

Тип: string

Значение по умолчанию: i

KeyField​

Поле структуры (являющейся элементом массива, переданного в свойстве Value), которое определяет идентификатор узла в дереве.

Тип: string

Значение по умолчанию: id

LocalizationDictionary​

Имя словаря для локализации любых надписей, используемых в компоненте.

Тип: string

OnClick​

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

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnClick={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnItemClick​

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

Пример:

OnItemClick={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
}}

Тип: undefined

OnKeyDown​

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnKeyDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnKeyUp​

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnKeyUp={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseDown​

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseEnter​

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseEnter={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseLeave​

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseLeave={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseMove​

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseMove={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseOut​

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseOut={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseOver​

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseOver={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseUp​

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseUp={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnUnmount​

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров.

Пример:

OnUnmount={() => {
  // Отмена выполнения периодического действия при размонтировании экранной формы
    return clearInterval(getValue("pleerInterval"))
  }
}

Тип: undefined

OpenedItems​

Псевдоним свойств InputOpenedItems и OutputOpenedItems.

Тип: array

OutputCurrentItem​

Выходной параметр компонента: идентификатор текущего выбранного узла дерева.

Тип: any

OutputOpenedItems​

Выходной параметр компонента: массив идентификаторов раскрытых узлов.

Тип: array

ScrollToItem​

Идентификатор элемента, который должен быть отображен на экране в результате автоматической прокрутки. Если элемент является дочерним, все его родительские узлы раскрываются. После прокрутки значение переданной переменной сбрасывается в null.

Тип: any

ShowExpandAll​

Признак отображения кнопки “Развернуть все”.

Тип: boolean

Значение по умолчанию: True

Slot​

Именованное пространство во фрагменте экранной формы или именованное пространство в шаблоне компонента с возможностью шаблонизации, например, Select, DataGrid.

Тип: string

Tooltip​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне.

Тип: any

TraceId​

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода по изменению состояния компонента

Тип: string

Value​

Массив структур, описывающий структуру дерева, текст и значки в узлах дерева.

Тип: array

ValueField​

Поле структуры (являющейся элементом массива, переданного в свойстве Value), которое определяет текст в узле дерева.

Тип: string

Значение по умолчанию: text

Visible​

Признак инверсии состояния компонента Скрыт.

Тип: boolean

Значение по умолчанию: True

Примеры​

Данные:

  
    "DATA": [
  { "key": "1", "name": "Санкт-Петербург", "children": [], "icon": "bullet" },
  {
    "key": "2",
    "name": "Москва",
    "icon": "delete_item",
    "children": [
      {
        "key": "54",
        "name": "Ялта",
        "icon": "bullet",
        "children": [
          {
            "key": "55",
            "name": "Мыс Фиолент",
            "icon": "delete_item"
          }
        ]
      }
    ]
  }
]

}

JSX:


<Tree
  Value-var="DATA"
  KeyField="key"
  ValueField="name"
  ItemAlias="row"
  OpenedItems-var="openedItems"
  CurrentItem-var="currentItem"
  ChevronClosedIcon="folder"
  ChevronOpenedIcon="folderOpen"
  LocalizationDictionary="FrontendProject"
  OnItemClick={() => console.log(getEvent())}
>
  <Group>
    <Group Visible-var="row.children" VerticalAlign="Center">
      <Icon Size="Small" Name-var="row.icon" CSS={['px-4']} />
      <Text Mode="Medium_16" Value-var="row.name"/>
    </Group>
    <Group Hidden-var="row.children" VerticalAlign="Center">
      <Icon Size="Small" Name="row.icon" CSS={['px-4']} />
      <Text Value-var="row.name"/>
    </Group>
  </Group>
</Tree>