TreeGrid examples

API documentation

Basic

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

Data loading

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

Adding and removing nodes

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

Use remove function to remove nodes. When node removes, its children remves too.

$('.treegrid-1').treegrid('remove');

Moving nodes

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