Tree Tree is used to display hierarchical data or for navigation purposes.

Local

Remote - Eager

Remote - Lazy

Tree has 3 loading methods defined using nodes option.
  • local: An array of TreeNode objects.
  • remote eager: A function to load nodes from a url. Response should be a JSON array of TreeNode objects. This function is called only once on initialization.
  • remote lazy: A function to load nodes from a url. Response should be a JSON array of TreeNode objects. This function is called each time an unloaded node is expanded. Subsequents expand events do not call the remote data as data is cached on client side.
See source tab for examples of each type.
$('#tree').puitree({
    //options
});
                                
<div id="tree"></div>
                                
Name Type Default Description
nodes array/function null DataSource for tree, can either be an array of TreeNodes or a function to provide an array of TreeNodes.
lazy boolean false In lazy mode, children nodes are loaded on demand. Prefer this option when dealing with large datasets.
animate boolean false Displays a slide animation when enabled.
selectionMode string null Defines selection type, valid values are single and multiple. Multiple is used with metakey.
icons object null Defines icon sets for TreeNode types.
Name Parameters Description
nodeSelect event: puitreenodeselect event
node: Node object.
data: Node data.
Fired when a node is selected.
nodeUnselect event: puitreenodeunselect event
node: Node object.
data: Node data.
Fired when a node is unselected.
beforeExpand event: puitreenodebeforeexpand event
node: Node object.
data: Node data.
Fired before a node is expanded.
afterExpand event: puitreenodeafterexpand event
node: Node object.
data: Node data.
Fired after a node is expanded.
beforeCollapse event: puitreenodebeforecollapse event
node: Node object.
data: Node data.
Fired before a node is collapsed.
afterCollapse event: puitreenodeaftercollapse event
node: Node object.
data: Node data.
Fired after a node is collapsed.

Example

                $('#default').puitree({
                    nodeSelect: function(event, node, data) {
                        //...
                    }
                });
                                
Name Parameters Description
expandNode node: Node element as jQuery object to expand. Expands the given node.
collapseNode node: Node element as jQuery object to collapse. Collapses the given node.
selectNode node: Node element as jQuery object to collapse. Activates the tab with given index.
unselectNode node: Node element as jQuery object to collapse. Deactivates the tab with given index.
unselectAllNodes Clears selection.
option name: Name of the option Returns the value of the option.
option name: Name of the option, value: Value of the option Set the value of the option.

Example

$('#default').puitree('unselectAllNodes');
                                
$(function() {
    $('#local').puitree({
        animate: true,
        selectionMode: 'single',
        nodes: [
            {
                label: 'Documents',
                data: 'Documents Folder',
                children: [{
                        label: 'Work',
                        data: 'Work Folder',
                        children: [{label: 'Expenses.doc', iconType:'doc', data: 'Expenses Document'},{label: 'Resume.doc', iconType:'doc', 
                                data: 'Resume Document'}]
                    },
                    {
                        label: 'Home',
                        data: 'Home Folder',
                        children: [{label: 'Invoices.txt', iconType:'doc', data: 'Invoices for this month'}]
                    }]
            },
            {
                label: 'Pictures',
                data: 'Pictures Folder',
                children:[
                    {label:'barcelona.jpg',iconType:'picture',data: 'Barcelona Photo'},
                    {label:'logo.jpg',iconType:'picture',data: 'PrimeFaces Logo'},
                    {label:'primeui.png',iconType:'picture', data: 'PrimeUI Logo'}]
            },
            {
                label: 'Movies',
                data: 'Movies Folder',
                children: [{
                        label: 'Al Pacino',
                        data: 'Pacino Movies',
                        children: [{label: 'Scarface',iconType:'video',data:'Scarface Movie'},{label: 'Serpico',iconType:'video',data:'Serpico Movie'}]
                    },
                    {
                        label: 'Robert De Niro',
                        data: 'De Niro Movies',
                        children: [{label: 'Goodfellas',iconType:'video',data:'Goodfellas Movie'},{label: 'Untouchables',iconType:'video',
                                data:'Untouchables Movie'}]
                    }]
            }
        ],
        icons: {
             def: {
                 expanded: 'fa-folder-open',
                 collapsed: 'fa-folder'
             },
             picture: 'fa-file-image-o',
             doc: 'fa-file-word-o',
             video: 'fa-file-video-o'
         },
        nodeSelect: function(event, ui) {
            $('#messages').puigrowl('show', [{severity:'info', summary: 'Node Selected', detail: 'Data: ' + ui.data}]);
        },
        nodeUnselect: function(event, ui) {
            $('#messages').puigrowl('show', [{severity:'info', summary: 'Node Unselected', detail: 'Data: ' + ui.data}]);
        }
    });

    $('#remoteeager').puitree({
        nodes: function(ui, response) {                        
            $.ajax({
                type: "GET",
                url: 'rest/tree/all',
                dataType: "json",
                context: this,
                success: function(data) {
                    response.call(this, data);
                }
            });
        }
    });

    $('#remotelazy').puitree({
        lazy: true,
        nodes: function(ui, response) {  
            $.ajax({
                type: "GET",
                url: 'rest/tree/' + (ui.data ? ui.data : 'root'),
                dataType: "json",
                context: this,
                success: function(data) {
                    response.call(this, data, ui.node);
                }
            });
        }
    });

    $('#messages').puigrowl();
});
                                
<div id="messages"></div>
                            
<h3>Local</h3>
<div id="local"></div>

<h3>Remote - Eager</h3>
<div id="remoteeager"></div>

<h3>Remote - Lazy</h3>
<div id="remotelazy"></div>