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);