diff --git a/src/views/organizationchart/OrganizationChartDoc.vue b/src/views/organizationchart/OrganizationChartDoc.vue index 1e750ce1c..06835e67e 100644 --- a/src/views/organizationchart/OrganizationChartDoc.vue +++ b/src/views/organizationchart/OrganizationChartDoc.vue @@ -409,22 +409,22 @@ export default { - noode-select + node-select node: Node instance Callback to invoke when a node is selected. - noode-unselect + node-unselect node: Node instance Callback to invoke when a node is unselected. - noode-expand + node-expand node: Node instance Callback to invoke when a node is expanded. - noode-collapse + node-collapse node: Node instance Callback to invoke when a node is collapsed. diff --git a/src/views/tree/TreeDoc.vue b/src/views/tree/TreeDoc.vue index 745c82247..fba8ab366 100644 --- a/src/views/tree/TreeDoc.vue +++ b/src/views/tree/TreeDoc.vue @@ -8,11 +8,273 @@ import Tree from 'primevue/tree';

Getting Started

-

A model can be bound using the standard v-model directive.

+

Tree component requires an array of TreeNode objects as its value.

+ +

TreeNode API

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
keyanynullMandatory unique key of the node.
labelstringnullLabel of the node.
dataanynullData represented by the node.
iconstringnullIcon of the node to display next to content.
childrenTreeNode[]nullAn array of treenodes as children.
stylestringnullInline style of the node.
classNamestringnullStyle class of the node.
draggablebooleantrueWhether the node is draggable when dragdrop is enabled.
droppablebooleantrueWhether the node is droppable when dragdrop is enabled.
selectablebooleannullWhether the node is selectable when selection mode is enabled.
leafbooleannullSpecifies if the node has children. Used in lazy loading.
+
+ +

Example below loads the tree nodes from a remote datasource via a service called NodeService.

-<TriStateCheckbox v-model="value" /> + + +import NodeService from '../../service/NodeService'; + +export default { + data() { + return { + nodes: null + } + }, + nodeService: null, + created() { + this.nodeService = new NodeService(); + }, + mounted() { + this.nodeService.getTreeNodes().then(data => this.nodes = data); + } +} + + + +import axios from 'axios'; + +export default class NodeService { + + getTreeNodes() { + return axios.get('demo/data/treenodes.json').then(res => res.data.root); + } + +} + + +

The json response sample would be as following.

+ +{ + "root": [ + { + "key": "0", + "label": "Documents", + "data": "Documents Folder", + "icon": "pi pi-fw pi-inbox", + "children": [{ + "key": "0-0", + "label": "Work", + "data": "Work Folder", + "icon": "pi pi-fw pi-cog", + "children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }] + }, + { + "key": "0-1", + "label": "Home", + "data": "Home Folder", + "icon": "pi pi-fw pi-home", + "children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }] + }] + }, + { + "key": "1", + "label": "Events", + "data": "Events Folder", + "icon": "pi pi-fw pi-calendar", + "children": [ + { "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" }, + { "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" }, + { "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }] + }, + { + "key": "2", + "label": "Movies", + "data": "Movies Folder", + "icon": "pi pi-fw pi-star", + "children": [{ + "key": "2-0", + "icon": "pi pi-fw pi-star", + "label": "Al Pacino", + "data": "Pacino Movies", + "children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }] + }, + { + "key": "2-1", + "label": "Robert De Niro", + "icon": "pi pi-fw pi-star", + "data": "De Niro Movies", + "children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }] + }] + } + ] +} + + +

Programmatic Control

+

Tree state can be controlled programmatically with the expandedKeys property that defines the keys + that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that expandedKeys also supports two-way binding with the sync modifier. +

+ +

Example below expands and collapses all nodes with buttons.

+ + + + + +import NodeService from '../../service/NodeService'; + +export default { + data() { + return { + nodes: null, + expandedKeys: {} + } + }, + nodeService: null, + created() { + this.nodeService = new NodeService(); + }, + mounted() { + this.nodeService.getTreeNodes().then(data => this.nodes = data); + }, + methods: { + expandAll() { + for (let node of this.nodes) { + this.expandNode(node); + } + + this.expandedKeys = {...this.expandedKeys}; + }, + collapseAll() { + this.expandedKeys = {}; + }, + expandNode(node) { + this.expandedKeys[node.key] = true; + if (node.children && node.children.length) { + for (let child of node.children) { + this.expandNode(child); + } + } + } + } +} + + +

To display some nodes as expanded by default, simply add their keys to the map.

+ +import NodeService from '../../service/NodeService'; + +export default { + data() { + return { + nodes: null, + expandedKeys: {} + } + }, + nodeService: null, + created() { + this.nodeService = new NodeService(); + }, + mounted() { + this.nodeService.getTreeNodes().then(data => { + this.nodes = data; + this.expandedKeys[this.nodes[0].key] = true; + this.expandedKeys[this.nodes[1].key] = true; + }); + } +} + + +

Selection

+ +

Templating

+ +

Filtering

+

Properties

Any valid attribute such as name and autofocus are passed to the underlying input element. Following is the additional property to configure the component.

@@ -28,9 +290,70 @@ import Tree from 'primevue/tree'; value - boolean + array null - Value of the component. + An array of treenodes. + + + expandedKeys + array + null + A map of keys to represent the state of the tree expansion state in controlled mode. + + + selectionMode + string + null + Defines the selection mode, valid values "single", "multiple", and "checkbox". + + + selectionKeys + any + null + A map of keys to control the selection state. + + + metaKeySelection + boolean + true + Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item + can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. + + + loading + boolean + false + Whether to display loading indicator. + + + loadingIcon + string + pi pi-spin + Icon to display when tree is loading. + + + filter + boolean + false + When specified, displays an input field to filter the items. + + + filterBy + string + label + When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. + + + filterMode + string + lenient + Mode for filtering valid values are "lenient" and "strict". Default is lenient. + + + filterPlaceholder + string + null + Placeholder text to show when filter input is empty. @@ -48,29 +371,24 @@ import Tree from 'primevue/tree'; - change - event: Browser event - Callback to invoke on value change. + node-select + node: Node instance + Callback to invoke when a node is selected. - input - event: Value of checkbox - Callback to invoke on click. + node-unselect + node: Node instance + Callback to invoke when a node is unselected. - click - event: Browser event - Callback to invoke click. + node-expand + node: Node instance + Callback to invoke when a node is expanded. - focus - event: Browser event - Callback to invoke on focus. - - - blur - event: Browser event - Callback to invoke on blur. + node-collapse + node: Node instance + Callback to invoke when a node is collapsed. @@ -88,20 +406,44 @@ import Tree from 'primevue/tree'; - p-chkbox - Container element + p-tree + Main container element - p-tristatechkbox - Container element + p-tree-horizontal + Main container element in horizontal mode - p-chkbox-box - Container of icon. + p-tree-container + Container of nodes - p-chkbox-icon - Icon element. + p-treenode + A treenode element + + + p-treenode-content + Content of a treenode + + + p-treenode-toggler + Toggle element + + + p-treenode-toggler-icon + Toggle icon + + + p-treenode-icon + Icon of a treenode + + + p-treenode-label + Label of a treenode + + + p-treenode-children + Container element for node children @@ -112,33 +454,20 @@ import Tree from 'primevue/tree'; - + View on GitHub