组件/数据展示引入于 1.3.0

EOrgChart 组织图

import EUI 1.0

示例与代码

组织结构

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EOrgChart { height: 270 width: Math.min(700, parent.width) model: [{ "key": "team", "label": qsTr("团队"), "children": [{ "key": "design", "label": qsTr("设计") }, { "key": "dev", "label": qsTr("开发"), "children": [{ "key": "qa", "label": qsTr("测试") }] }] }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

折叠分支

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EOrgChart { height: 270 collapsedKeys: ["dev"] width: Math.min(700, parent.width) model: [{ "key": "team", "label": qsTr("团队"), "children": [{ "key": "design", "label": qsTr("设计") }, { "key": "dev", "label": qsTr("开发"), "children": [{ "key": "qa", "label": qsTr("测试") }] }] }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

多选节点

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EOrgChart { height: 270 selectionMode: "multiple" selectedKeys: ["design", "qa"] width: Math.min(700, parent.width) model: [{ "key": "team", "label": qsTr("团队"), "children": [{ "key": "design", "label": qsTr("设计") }, { "key": "dev", "label": qsTr("开发"), "children": [{ "key": "qa", "label": qsTr("测试") }] }] }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

级联勾选

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EOrgChart { height: 270 selectionMode: "checkbox" width: Math.min(700, parent.width) model: [{ "key": "team", "label": qsTr("团队"), "children": [{ "key": "design", "label": qsTr("设计") }, { "key": "dev", "label": qsTr("开发"), "children": [{ "key": "qa", "label": qsTr("测试") }] }] }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

自定义节点

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EOrgChart { height: 270 width: Math.min(700, parent.width) nodeDelegate: EText { anchors.centerIn: parent text: "★ " + parent.node.label } model: [{ "key": "team", "label": qsTr("团队"), "children": [{ "key": "design", "label": qsTr("设计") }, { "key": "dev", "label": qsTr("开发"), "children": [{ "key": "qa", "label": qsTr("测试") }] }] }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

modelvar

组织树根节点或根节点数组，节点使用 key、label、children。

默认值[]

nodeHeightreal

每个组织节点的高度。

默认值56

nodeWidthreal

每个组织节点的宽度。

默认值150

selectedKeysvar

当前选中的组织节点 key 数组。

默认值[]

verticalGapreal

组织结构层级之间的垂直间距。

默认值48

collapsedKeysvar

已折叠的组织节点 key 数组。

默认值[]

horizontalGapreal

相邻组织节点之间的水平间距。

默认值20

nodeDelegateComponent

自定义组织节点；通过父级 node 读取数据。

默认值null

selectionModestring

组织图选择模式：none、single、multiple、checkbox。

默认值"single"

layoutvar只读

计算后的节点位置、连线与尺寸。

默认值buildLayout()

errorStringstring只读

模型校验错误代码；有效时为空字符串。

默认值layout.error

信号

签名作用

nodeClicked(var node)

点击组织节点时触发，node 为节点数据。

selectionChanged(var keys)

选中节点变化时触发，keys 为选中节点标识集合。

toggled(var key, bool collapsed)

节点展开状态变化时触发，key 为节点标识，collapsed 表示是否折叠。

方法

签名作用

toggle(key)

切换当前展开或选中状态；需要标识时传入目标项的标识。

select(key)

选择给定索引或标识对应的项目。