| Root node | Additional info |
| Node 1-1 | Additional info |
| Node 1-2 | Additional info |
| Node 1-2-1 | Additional info |
| Node 1-2-2 | Additional info |
| Root node | Additional info |
| Node 2-1 | Additional info |
Make tree structure with .treegrid- and .treegrid-parent- classes for <tr> tag. Add class expanded to node if you want to show it expanded.
<table class="tree">
<tbody>
<tr class="treegrid-1 expanded"><td>Root node</td><td>Additional info</td></tr>
<tr class="treegrid-2 treegrid-parent-1"><td>Node 1-1</td><td>Additional info</td></tr>
<tr class="treegrid-3 treegrid-parent-1"><td>Node 1-2</td><td>Additional info</td></tr>
<tr class="treegrid-4 treegrid-parent-3"><td>Node 1-2-1</td><td>Additional info</td></tr>
<tr class="treegrid-5 treegrid-parent-3"><td>Node 1-2-2</td><td>Additional info</td></tr>
<tr class="treegrid-6"><td>Root node</td><td>Additional info</td></tr>
<tr class="treegrid-7 treegrid-parent-6"><td>Node 2-1</td><td>Additional info</td></tr>
</tbody>
</table>
To initialize TreeGrid, use JavaScript:
$('.tree').treegrid();
| Root node | Additional info |
| Root node | Additional info |
Add to table structure data-count attribute to make node loadable. In this attribute stores child node count. But in fact, it does not matter how many childs actually node have. Setting this attribute indicates that the necessary data loading.
<tr class="treegrid-1" data-count="2"><td>Root node</td><td>Additional info</td></tr>
Data loading starts automaticaly when node expands. To add nodes use source option. You can use this option as function. If function returns false, node is not expands. Function should return array of strings, that contains html of adding rows.
$('.tree').treegrid({
source: function(id, response) {
if (id == 1) response(['<tr><td>Loaded node 1</td></tr>']);
}
});
Also you can use source as url. Server returns data in json format.
$('.tree').treegrid({
source: '/data.php'
});
| Root node | Add child |
| Root node | Additional info |
| Node 2-1 | Additional info |
Use add function to add nodes. Nodes will added to element, that execute this function. If you want to add root nodes, call this function from table.
$('.tree').treegrid('add', ['<tr><td>Added root</td></tr>']);
$('.treegrid-1').treegrid('add', ['<tr><td>Added node</td></tr>']);
| Root node | Remove me |
| Node 1-1 | Remove me |
| Node 1-2 | Remove me |
| Node 1-2-1 | Remove me |
| Node 1-2-2 | Remove me |
| Root node | Remove me |
| Node 2-1 | Remove me |
Use remove function to remove nodes. When node removes, its children remves too.
$('.treegrid-1').treegrid('remove');
| Root node | Additional info |
| Node 1-1 | Additional info |
| Node 1-2 | Additional info |
| Node 1-2-1 | Additional info |
| Node 1-2-2 | Additional info |
| Node 1-3 | Additional info |
| Node 1-4 | Additional info |
| Root node | Additional info |
| Node 2-1 | Additional info |
To make nodes moveable, set enableMove option in true. To control the node movement use events onMoveStart, onMoveStop, onMoveOver, onMoveOut, onMove. Helper element has .treegrid-container.dragging class. In moving events position param means where node should be move (0-before, 1-inside, 1-after) target.
$('.tree').treegrid({
enableMove: true,
onMoveOver: function(item, helper, target, position) {
if (target.hasClass('treegrid-8')) return false;
return true;
}
});
If you want to manualy move node, use JavaScript:
$('.treegrid-8').treegrid('move', $('.treegrid-2'), 2);