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