TreeTable TreeTable is used to display hierarchical data in tabular format.

Local Data

Remote Data with Selection and Events

Remote - Lazy Data

TreeTable 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.
$('#container').puitreetable({
    //options
});
                                
<div id="container"></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.
selectionMode string null Defines selection type, valid values are single and multiple. Multiple is used with metakey.
Name Parameters Description
nodeSelect event: puitreetablenodeselect event
node: Node object.
data: Node data.
Fired when a node is selected.
nodeUnselect event: puitreetablenodeunselect event
node: Node object.
data: Node data.
Fired when a node is unselected.
beforeExpand event: puitreetablenodebeforeexpand event
node: Node object.
data: Node data.
Fired before a node is expanded.
afterExpand event: puitreetablenodeafterexpand event
node: Node object.
data: Node data.
Fired after a node is expanded.
beforeCollapse event: puitreetablenodebeforecollapse event
node: Node object.
data: Node data.
Fired before a node is collapsed.
afterCollapse event: puitreetableaftercollapse event
node: Node object.
data: Node data.
Fired after a node is collapsed.

Example

                $('#default').puitreetable({
                    nodeSelect: function(event, ui) {
                        //ui.data
                    }
                });
                                
Name Parameters Description
expandNode node: Row element as jQuery object to expand. Expands the given node.
collapseNode node: Row element as jQuery object to collapse. Collapses the given node.
selectNode node: Row element as jQuery object to collapse. Activates the tab with given index.
unselectNode node: Row 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').puitreetable('unselectAllNodes');
                                
$(function() {
    $('#local').puitreetable({
        columns: [
            {field:'name', headerText: 'Name'},
            {field:'size', headerText: 'Size'},
            {field:'type', headerText: 'Type'}
        ],
        nodes: [
            {
                data: {name:'Documents', size: '75kb', type: 'Folder'},
                children: [
                    {
                        data: {name:'Work', size: '55kb', type: 'Folder'},
                        children: [
                            {
                                data: {name:'Expenses.doc', size: '30kb', type: 'Document'}
                            },
                            {
                                data: {name:'Resume.doc', size: '25kb', type: 'Resume'}
                            }
                        ]
                    },
                    {
                        data: {name:'Home', size: '20kb', type: 'Folder'},
                        children: [
                            {
                               data: {name:'Invoices', size: '20kb', type: 'Text'}
                           }
                       ]
                    }
                ]
            },
            {
                data: {name:'Pictures', size:'150kb', type:'Folder'},
                children:[
                    {
                        data: {name:'barcelona.jpg', size:'90kb', type:'Picture'}
                    },
                    {
                        data: {name:'primeui.png', size:'30kb', type:'Picture'}
                    },
                    {
                        data: {name:'optimus.jpg', size:'30kb', type:'Picture'}
                    }
                ]
            }
        ]
    });

    $('#remoteeager').puitreetable({
        selectionMode: 'multiple',
        columns: [
            {field:'name', headerText: 'Name'},
            {field:'size', headerText: 'Size'},
            {field:'type', headerText: 'Type'}
        ],
        nodeSelect: function(event, ui) {
            $('#messages').puigrowl('show', [{severity:'info', summary: 'Node Selected', detail: 'Data: ' + ui.data.name}]);
        },
        nodeUnselect: function(event, ui) {
            $('#messages').puigrowl('show', [{severity:'info', summary: 'Node Unselected', detail: 'Data: ' + ui.data.name}]);
        },
        afterExpand: function(event, ui) {
            $('#messages').puigrowl('show', [{severity:'info', summary: 'Node Expanded', detail: 'Data: ' + ui.data.name}]);
        },
        afterCollapse: function(event, ui) {
            $('#messages').puigrowl('show', [{severity:'info', summary: 'Node Collapsed', detail: 'Data: ' + ui.data.name}]);
        },
        nodes: function(ui, response) {                        
            $.ajax({
                type: "GET",
                url: 'rest/tree/documents',
                dataType: "json",
                context: this,
                success: function(data) {
                    response.call(this, data);
                }
            });
        }
    });

    $('#remoteinfinite').puitreetable({
        lazy: true,
         columns: [
            {field:'name', headerText: 'Name'},
            {field:'size', headerText: 'Size'},
            {field:'type', headerText: 'Type'}
        ],
        header: 'Infinite',
        nodes: function(ui, response) {  
            $.ajax({
                type: "GET",
                url: 'rest/tree/lazydocuments',
                dataType: "json",
                context: this,
                success: function(data) {
                    response.call(this, data, ui.node);
                }
            });
        }
    });

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

<h3>Remote Data with Selection and Events</h3>
<div id="remoteeager"></div>

<h3>Remote - Lazy Data</h3>
<div id="remoteinfinite"></div>