Collapsible Data Grid Plugin With jQuery - Treegrid

Treegrid is a jQuery plugin which converts a standard Html table into a collapsible data grid like the tree structure.

How to use it:

1. Load jQuery JavaScript library together with the jQuery treegrid plugin's JavaScript & Stylesheet into your html document.

<link href="jquery.treegrid.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery.treegrid.min.js"></script>

2. Make tree structure with .treegrid- and .treegrid-parent- classes for 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>

3. Initialize the plugin and done.

$('.tree').treegrid();

4. 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>

5. Default plugin options and callback functions.

// Function(id, complete)|Url Result should be in add() function format. 
// For Url 'json' format is used.
source: null, 

// Boolean To let user move nodes set it in true.
enableMove: false, 

// Integer Tolerance, in pixels, for when moving should start. 
// If specified, moving will not start until after mouse is dragged beyond distance.
moveDistance: 10, 

// Selector|Element Restricts moving start click to the specified element.
moveHandle: false, 

// Function() Calling when node expands. 
// Return false if you dont want the node been expanded.
onExpand: function() { return true; }, 

// Function() Calling when node collapses. 
// Return false if you dont want the node been collapsed.
onCollapse: function() { return true; }, 

// Function(items) Calling when nodes was added. 
// Returns jQuery container that contains all added nodes.
onAdd: function() {}, 

// Function(item, helper) This event is triggered when node moving starts.
onMoveStart: function() {}, 

// Function(item, helper) This event is triggered when node moving ends.
onMoveStop: function() {}, 

//  Function(item, helper, target, position) 
// This event is triggered when node moving over another node that support droping. 
// If you dont want target supporting dropping, return false.
onMoveOver: function() { return true; }, 

// Function(item, helper, target) This event is triggered when node outs another node that support droping.
onMoveOut: function() {},

// Function(item, target, position) This event is triggered when node drops to another node. 
// If you want to prevent moving, return false.
onMove: function() { return true; } 

6. API methods.

// Gets an object containing key/value pairs representing the current treegrid options.
var options = $('.tree').treegrid('option');

// Gets the value currently associated with the specified optionName.
var isEnableMove = $('.tree').treegrid('option', 'enableMove');

// Sets the value of the treegrid option associated with the specified optionName.
$('.tree').treegrid('option', 'enableMove', false);

// Sets one or more options for the treegrid.
$('.tree').treegrid('option', {enableMove: false});

// Get id of the node.
$('.treegrid-1').treegrid('getId');

// Get depth of the node.
var depth = $('.treegrid-1').treegrid('getDepth');

// Toggles state of the node.
$('.treegrid-1').treegrid('toggle');

// Expand node.
$('.treegrid-1').treegrid('expand');

// Collapse node.
$('.treegrid-1').treegrid('collapse');

// Add nodes to parent or as root. 
// If executes from table, nodes adds as roots. 
// If executes from row, nodes adds as children. 
// Every item of array should be HTML of adding nodes.
$('.tree').treegrid('add', ['<tr><td>New root</td></tr>']);

// Removs node with all descendants.
$('.treegrid-1, .treegrid-2').treegrid('remove');

// Moves node to target. 
// To specify where node should be move set position param (0-before, 1-inside, 1-after).
$('.treegrid-1').treegrid('move', $('.treegrid-2'), 1);

// Get all roots of TreeGrid. Returns jQuery contains roots.
$roots = $('.tree').treegrid('getRoots');

// Get direct children of node. Returns jQuery contains children.
$items = $('.treegrid-1').treegrid('getChildNodes');

// Get all descendants of node. Result contains node that executes method. Returns jQuery contains node with descendants.
$('.treegrid-1').treegrid('getBranch').css('color', 'red');

// Get parent of the node.
$parent = $('.treegrid-1').treegrid('getParent');

// Get whether node is collapsed.
if ($tr.treegrid('isCollapsed')) { ... }

// Get whether node is expended.
b = $tr.treegrid('isExpanded');

Change log:

2017-10-02

• fixed move bug

2016-02-12

• optimization

---

This awesome jQuery plugin is developed by dkhlystov. For more Advanced Usages, please check the demo page or visit the official website.