$('#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. |
$('#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. |
$('#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>