TreeGrid examples

Basic

Root nodeAdditional info
Node 1-1Additional info
Node 1-2Additional info
Node 1-2-1Additional info
Node 1-2-2Additional info
Root nodeAdditional info
Node 2-1Additional 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();

Data loading

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

Adding and removing nodes

Add root
Root nodeAdd child
Root nodeAdditional info
Node 2-1Additional 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 nodeRemove me
Node 1-1Remove me
Node 1-2Remove me
Node 1-2-1Remove me
Node 1-2-2Remove me
Root nodeRemove me
Node 2-1Remove me

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

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

Moving nodes

Move node
Root nodeAdditional info
Node 1-1Additional info
Node 1-2Additional info
Node 1-2-1Additional info
Node 1-2-2Additional info
Node 1-3Additional info
Node 1-4Additional info
Root nodeAdditional info
Node 2-1Additional 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);