Документация для разработчиков
Темная тема

Класс ItemNode

Класс представляет визуальное представление (DOM-узел) элемента.

Конструктор

constructor(item: Item, nodeOptions: ItemNodeOptions): ItemNode

Создает объект класса ItemNode.

Для создания DOM-узлов элемента используйте метод item.createNode() или опцию nodeOptions в конструкторе класса Item.

  • item — элемент (объект класса Item), для которого будет создан DOM-узел.
  • nodeOptions — опции элемента, которые определяются структурой ItemNodeOptions.

export type ItemNodeOptions = {
	itemOrder?: ItemNodeOrder,
	open?: boolean,
	dynamic?: boolean,
	title?: string | TextNodeOptions,
	subtitle?: string | TextNodeOptions,
	supertitle?: string | TextNodeOptions,
	caption?: string | TextNodeOptions,
	captionOptions?: CaptionOptions,
	avatar?: string,
	avatarOptions?: AvatarOptions,
	textColor?: string,
	link?: string,
	linkTitle?: string | TextNodeOptions,
	badges?: ItemBadgeOptions[],
	badgesOptions?: BadgesOptions,
};

  • itemOrder?: ItemNodeOrder

    Сортировка элементов внутри DOM-узла. Определяется структурой ItemNodeOrder:

    export type ItemNodeOrder = (
    	{ [field: string]: 'asc' | 'desc' | 'asc nulls first' | 'asc nulls last' | 'desc nulls first' | 'desc nulls last' }
    	|
    	(a: ItemNode, b: ItemNode) => number
    );
    

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

    const options = {
    	itemOrder: { title: 'asc', sort: 'asc', id: 'desc' }
    };
    

    Если сортировки по полям не хватает, можно определить свою функцию, определяющую порядок сортировки.

    const options = {
    	itemOrder: (nodeA: ItemNode, nodeB: ItemNode) => {
    		const itemA = nodeA.getItem();
    		const itemB = nodeB.getItem();
    
    		return itemA.getSort() - itemB.getSort(); 
    	}
    };
    


  • open?: boolean

    Определяет развернутость DOM-узла с вложенными элементами. Для динамических узлов значение true приводит к автоматической загрузке вложенных элементов.


  • dynamic?: boolean

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


  • title?: string | TextNodeOptions

    Заголовок DOM-узла. Определяется либо строкой, либо структурой TextNodeOptions.
    Если значение не задано, заголовок будет искаться у элемента, к которому относится DOM-узел.


  • subtitle?: string | TextNodeOptions

    Подзаголовок DOM-узла. Определяется либо строкой, либо структурой TextNodeOptions.
    Если значение не задано, подзаголовок будет искаться у элемента, к которому относится DOM-узел.


  • supertitle?: string | TextNodeOptions

    Надзаголовок DOM-узла. Определяется либо строкой, либо структурой TextNodeOptions.
    Если значение не задано, надзаголовок будет искаться у элемента, к которому относится DOM-узел.


  • caption?: string | TextNodeOptions

    Подпись DOM-узла. Определяется либо строкой, либо структурой TextNodeOptions.
    Если значение не задано, подпись будет искаться у элемента, к которому относится DOM-узел.


  • captionOptions?: CaptionOptions

    Дополнительные настройки подписи элемента. Определяются структурой CaptionOptions.
    Если значение не задано, настройки будут искаться у элемента, к которому относится DOM-узел.


  • avatar?: string

    Аватар DOM-узла. Указывается либо путь к изображению, либо файл в формате Data URL.
    Если значение не задано, аватар будет искаться у элемента, к которому относится DOM-узел.

    • avatarOptions?: AvatarOptions

      Дополнительные настройки аватара DOM-узла.

      Определяются структурой AvatarOptions. Если значение не задано, настройки аватара будут искаться у элемента, к которому относится DOM-узел.


  • textColor?: string

    Цвет текста заголовка DOM-узла. Если значение не задано, цвет текста заголовка будет искаться у элемента, к которому относится DOM-узел.


  • link?: string

    Адрес ссылки "подробнее". Если значение не задано, адрес ссылки будет искаться у элемента, к которому относится DOM-узел.


  • linkTitle?: string | TextNodeOptions

    Заголовок ссылки "подробнее". Если значение не задано, заголовок ссылки будет искаться у элемента, к которому относится DOM-узел.


  • badges?: ItemBadgeOptions[]

    Массив бейджей DOM-узла. Каждый бейдж определяется структурой ItemBadgeOptions.
    Если значение не задано, бейджи будут искаться у элемента, к которому относится DOM-узел.


  • badgesOptions?: BadgesOptions

    Дополнительные настройки для блока с бейджами. Определяются структурой BadgesOptions.
    Если значение не задано, настройки будут искаться у элемента, к которому относится DOM-узел.

Методы

Метод Описание С версии
getItem(): Item Возвращает элемент, к которому относится DOM-узел.
getDialog(): Dialog Возвращает диалог, в котором отрисован DOM-узел.
getTab(): Tab Возвращает вкладку, в которой отрисован DOM-узел.
isRoot(): boolean Возвращает true, если DOM-узел корневой.
Корневые узлы создаются автоматически для всех вкладок. Они не имеют визуального представления.
getParentNode(): ?ItemNode Возвращает родительский DOM-узел.
getNextSibling(): ?ItemNode Возвращает следующий соседний DOM-узел.
getPreviousSibling(): ?ItemNode Возвращает предыдущий соседний DOM-узел.
addChildren(children: ItemOptions[]): void Добавляет вложенные DOM-узлы.
addChild(child: ItemNode): ItemNode Добавляет вложенный DOM-узел.
getDepthLevel(): number Возвращает уровень вложенности DOM-узла.
addItem(item: Item, nodeOptions: ItemNodeOptions): ItemNode Добавляет дочерний элемент.
hasItem(item: Item): boolean Возвращает true, если среди потомков есть указанный элемент.
removeChild(child: ItemNode): boolean Удаляет дочерний DOM-узел.
removeChildren(): void Удаляет все дочерние DOM-узлы.
hasChild(child: ItemNode): boolean Возвращает true, если указанный DOM-узел является потомком.
isChildOf(parent: ItemNode): boolean Возвращает true, если указанный DOM-узел является родителем.
getFirstChild(): ?ItemNode Возвращает первый дочерний DOM-узел.
getLastChild(): ?ItemNode Возвращает последний дочерний DOM-узел.
getChildren(): OrderedArray Возвращает сортированную коллекцию всех потомков.
hasChildren(): boolean Возвращает true, если DOM-узел имеет потомков.
loadChildren(): Promise Загружает дочерние элементы с бэкенда.
isOpen(): boolean Возвращает true, если DOM-узел развернут (открыт).
setDynamic(dynamic: boolean): void Устанавливает или отменяет динамичность DOM-узла.
isDynamic(): boolean Возвращает true, если DOM-узел является динамическим. При нажатии на такой узел будет выполнен запрос на бэкенд для загрузки вложенных элементов-потомков.
isLoaded(): boolean Возвращает true, если DOM-узел уже загрузил с бэкенда вложенные элементы.
expand(): void Разворачивает DOM-узел, если он имеет потомков.
collapse(): void Сворачивает DOM-узел, если он имеет потомков.
isRendered(): boolean Возвращает true, если DOM-узел был вставлен в диалог и отрисован.
getTitle(): string Возвращает заголовок DOM-узла. Если для DOM-узла значение не задано, заголовок будет искаться у элемента, к которому относится DOM-узел.
setTitle(title: string | TextNodeOptions): void Устанавливает заголовок DOM-узла. Заголовок определяется либо строкой, либо структурой TextNodeOptions.
getSubtitle(): ?string Возвращает подзаголовок DOM-узла.
Если для DOM-узла значение не задано, подзаголовок будет искаться у элемента, к которому относится DOM-узел.
setSubtitle(subtitle: string | TextNodeOptions): void Устанавливает подзаголовок DOM-узла. Подзаголовок определяется либо строкой, либо структурой TextNodeOptions.
getSupertitle(): ?string Возвращает надзаголовок DOM-узла.
Если для DOM-узла значение не задано, надзаголовок будет искаться у элемента, к которому относится DOM-узел.
setSupertitle(supertitle: string | TextNodeOptions): void Устанавливает надзаголовок DOM-узла. Надзаголовок определяется либо строкой, либо структурой TextNodeOptions.
getCaption(): ?string Возвращает подпись DOM-узла.
Если для DOM-узла значение не задано, подпись будет искаться у элемента, к которому относится DOM-узел.
setCaption(caption: string | TextNodeOptions): void Устанавливает подпись DOM-узла. Подпись определяется либо строкой, либо структурой TextNodeOptions.
getAvatar(): ?string Возвращает аватар DOM-узла.
Если для DOM-узла значение не задано, аватар будет искаться у элемента, к которому относится DOM-узел.
setAvatar(avatar: ?string): void Устанавливает аватар DOM-узла. Указывается либо путь к изображению, либо файл в формате Data URL.
getAvatarOption(option: $Keys): string | boolean | number | null Возвращает значение настройки для аватара DOM-узла.
Название опции option определяется ключами структуры AvatarOptions.
Если для DOM-узла значение не задано, опция будет искаться у элемента.
21.600.0
setAvatarOption(option: $Keys, value: string | boolean | number | null): void Устанавливает значение опции для аватара DOM-узла.
Название опции option определяется ключами структуры AvatarOptions.
21.600.0
setAvatarOptions(options: AvatarOptions): void Устанавливает настройки для аватара DOM-узла.
Настройки option определяются структурой AvatarOptions.
21.600.0
getTextColor(): ?string Возвращает цвет текста заголовка DOM-узла.
Если для DOM-узла значение не задано, цвет текста заголовка будет искаться у элемента, к которому относится DOM-узел.
setTextColor(textColor: ?string): void Устанавливает цвет текста заголовка DOM-узла.
getLink(): ?string Возвращает адрес ссылки "подробнее".
Если для DOM-узла значение не задано, адрес ссылки будет искаться у элемента, к которому относится DOM-узел.
setLink(link: string): void Устанавливает адрес ссылки "подробнее".
getLinkTitle(): ?string Возвращает заголовок ссылки "подробнее".
Если для DOM-узла значение не задано, заголовок ссылки будет искаться у элемента, к которому относится DOM-узел.
setLinkTitle(title: string | TextNodeOptions): void Устанавливает заголовок ссылки "подробнее". Заголовок определяется либо строкой, либо структурой TextNodeOptions.
getBadges(): ItemBadge[] Возвращает массив бейджей (объекты класса ItemBadge) DOM-узла. Если для DOM-узла значение не задано, бейджи будут искаться у элемента, к которому относится DOM-узел.
setBadges(badges: ?ItemBadgeOptions[]): void Устанавливает бейджи DOM-узла. Каждый бейдж определяется структурой ItemBadgeOptions.
focus(): void Устанавливает фокус на DOM-узле.
unfocus(): void Сбрасывает фокус на DOM-узле.
isFocused(): boolean Возвращает true, если на DOM-узле установлен фокус.
click(): void Эмулирует нажатие пользователя DOM-узел.
scrollIntoView(): void Скроллирует содержимое вкладки, чтобы DOM-узел находился в области видимости.

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
© «Битрикс», 2001-2024, «1С-Битрикс», 2024
Наверх