Перейти к содержанию

Tree (8.3)#

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

Свойства#

id#

Идентификатор контрола.

Отнаследовано от Control.

enabled#

тип значение по умолчанию допустимые значения
bool true true/false

Доступность контрола для редактирования

readOnly#

тип значение по умолчанию допустимые значения
bool false true/false

Режим "только для чтения"

formkeyPropertyat#

тип значение по умолчанию допустимые значения
string VCode

Имя свойства, являющегося ключом построения иерахии

parentKeyProperty#

тип значение по умолчанию допустимые значения
string PCode

Имя свойства, содержащего значение иерархического ключа родительского элемента

labelProperty#

тип значение по умолчанию допустимые значения
string Name

Имя свойства для отображения наименования узла

iconProperty#

тип значение по умолчанию допустимые значения
string Image

Имя свойства для отображения иконки

checkBoxes#

тип значение по умолчанию допустимые значения
bool false true/false

Включить/выключить режим выделения checkBoxes

height#

тип значение по умолчанию допустимые значения
string 200px

Высота контрола

width#

тип значение по умолчанию допустимые значения
string 100%

Ширина контрола

dataSource#

тип значение по умолчанию допустимые значения
string -

Источник данных (observable-массив)

visible#

Видимость контрола.

Отнаследовано от Control

editorWidth#

Ширина контрола в колонках (для Bootstrap-верстки).

отнаследовано от Control. По умолчанию значение 3

tags#

Позволяет объединять контролы в группы, возвращает массив имен.

Отнаследовано от Control.

denyRoles#

Список ролей без прав на данный элемент.

Отнаследовано от Control.

readRoles#

Список ролей на чтение данных.

Отнаследовано от Control.

writeRoles#

Список ролей на изменение данных.

Отнаследовано от Control.

hint#

Всплывающая подсказка, которая появляется при наведении на контрол.

Отнаследовано от Control.

dragable#

тип значение по умолчанию допустимые значения
bool false true/false

Включить/выключить возможность перетаскивания узлов.

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

Методы#

getSelectedNode#

Возвращает объект, содержащий описание выделенного узла

1
getSelectedNode();

getCheckedNodes#

Возвращает массив, содержащий объекты описания выделенных узлов, которые отмечены галочкой (в режиме выделения checkBoxes).

1
getCheckedNodes();

selectNode#

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

1
selectNode(id)

getDataById#

Возвращает связанные с узлом данные. В качестве параметра принимает идентификатор узла

1
getDataById(id)

getNodeById#

Возвращает узел. Принимает идентификатор узла

1
getNodeById(id)

expandNode#

Раскрывает узел. Принимает идентификатор узла, который необходимо раскрыть

1
expandNode(id)

collapseNode#

Сворачивает узел. Принимает идентификатор узла, который необходимо свернуть

1
collapseNode(id)

collapseAll#

Сворачивает все узлы в дереве

1
collapseAll()

expandAll#

Раскрывает все узлы в дереве

1
expandAll()

checkNode#

Выделяет узел (в режиме checkBoxes). Принимает идентификатор узла, который необходимо выделить

1
checkNode(id)

uncheckNode#

Снимает выделение узла (в режиме checkBoxes). Принимает идентификатор узла, с которого необходимо снять выделение

1
uncheckNode(id)

ensureVisible#

Прокручивает скролл до указанного узла. Принимает идентификатор узла

1
ensureVisible(id)

События#

Все обработчики принимают два параметра:

параметр тип описание
s Tree ссылка на контрол
e object
e.args object аргументы события
e.args.node object объект, содержащий описание узла
e.args.data object данные, которые привязаны к узлу

События:

nodeSelected#

срабатывает при выделении узла

nodeExpanded#

срабатывает при раскрытии узла

nodeCollapsed#

срабатывает при скрытии узла

nodeChecked#

срабатывает при выделении узла в режиме checkBoxes

nodeUnchecked#

срабатывает при снятии выделения узла в режиме checkBoxes

Описание объекта узла#

Узел представляет собой объект со свойствами:

  • id - идентификатор узла
  • parentId - идентификатор родительского узла (значение 0, если родителя нет)
  • label - отображаемый текст
  • selected - показывает выделен узел или нет
  • checked - показывает выделен узел или нет (в режиме checkBoxes)
  • isExpanded - показывает развернут узел, либо свернут
  • image - отображаемая иконка Все свойства доступны только для чтения.

Пример отображения иконок#

Пример 
1
2
3
4
5
6
7
8
<Form readRoles="super">
    <Layout>
        <Group>
            <Button value="loadData" clicked="loadData"/>
            <Tree id="tree"/>
        </Group>
    </Layout>
</Form>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Form, QuerySource } from 'ecosoft-lexema8'
import template from './treeDemo.xml'
import TreeQuery from './tree.query.json'
import ko from 'knockout'
import folderImg from 'current-theme/images/uniAnalyt/folder.png'
import materialImg from 'current-theme/images/uniAnalyt/material.png'

// словарь используемых иконок
const images = {
    folder: folderImg,
    material: materialImg
}

export default class TreeDemo extends Form {
    loadData () {
        const source = new QuerySource(TreeQuery)
        source.load().done(data => {
            data.forEach(node => {
                // В зависимости от значения свойства Type устанавливается 
                // соответствующая иконка для узла из словаря images
                node.Image = images[node.Type]
            })
            this.controls.tree.dataSource = ko.mapping.fromJS(data)     
        })
    }

    static get template () {
        return template
    }
}