Dynamic Interactive Tree Table Plugin For Bootstrap - GTreeTable 2

GTreeTable 2 is a jQuery plugin for Bootstrap framework that dynamically renders interactive hierarchical tree tables with support for drag'n'drop, data sorting & caching, live editing and more.

How to use it:

1. Include the necessary jQuery library and Bootstrap framework on the web page.

<link href="bootstrap.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>

2. Include jQuery UI library for the drag and drop functionality.

<script src="jquery-ui.js"></script>

3. Include the jQuery GTreeTable 2 plugin's files on the page.

<link href="bootstrap-gtreetable.min.css" rel="stylesheet">
<script src="bootstrap-gtreetable.min.js"></script>

4. Create an empty table as this:

<table id="example" class="gtreetable table">
  <thead>
    <tr>
      <th width="100%">Name</th>
    </tr>
  </thead>
</table>

5. Initialize the plugin on the Html table and define your own data to load.

$('#example').gtreetable({
  "source":function (id) {
    return {
      type: 'GET',
      url: URI('/data.php?r=site%2FnodeChildren').addSearch({'id':id}).toString(),
      dataType: 'json',
      error: function(XMLHttpRequest) {
        alert(XMLHttpRequest.status+': '+XMLHttpRequest.responseText);
      }
    }; 
  }
});

6. Plugin's default options.

nodesWrapper: 'nodes',
nodeIndent: 16,
language: 'en',
inputWidth: '60%',
cache: 2,
readonly: false,
selectLimit: 1,
rootLevel: 0,        
manyroots: false,
draggable: false,
dragCanExpand: false,
showExpandIconOnEmpty: false,        
languages: {
  'en-US': {
      save: 'Save',
      cancel: 'Cancel',
      action: 'Action',
      actions: {
          createBefore: 'Create before',
          createAfter: 'Create after',
          createFirstChild: 'Create first child',
          createLastChild: 'Create last child',
          update: 'Update',
          'delete': 'Delete'
      },
      messages: {
          onDelete: 'Are you sure?',
          onNewRootNotAllowed: 'Adding the now node as root is not allowed.',
          onMoveInDescendant: 'The target node should not be descendant.',
          onMoveAsRoot: 'The target node should not be root.'
      }                
  }
},
defaultActions: [
  {
      name: '${createBefore}',
      event: function (oNode, oManager) {
          oNode.add('before', 'default');
      }
  },
  {
      name: '${createAfter}',
      event: function (oNode, oManager) {
          oNode.add('after', 'default');
      }
  },
  {
      name: '${createFirstChild}',
      event: function (oNode, oManager) {
          oNode.add('firstChild', 'default');
      }
  },
  {
      name: '${createLastChild}',
      event: function (oNode, oManager) {
          oNode.add('lastChild', 'default');
      }
  },
  {
      divider: true
  },
  {
      name: '${update}',
      event: function (oNode, oManager) {
          oNode.makeEditable();
      }
  },
  {
      name: '${delete}',
      event: function (oNode, oManager) {
          if (confirm(oManager.language.messages.onDelete)) {
              oNode.remove();
          }
      }
  }
],
classes: {
  node: 'node',
  loading: 'node-loading',
  selected: 'node-selected',
  hovered: 'node-hovered',
  expanded: 'node-expanded',
  collapsed : 'node-collapsed',
  draggable : 'node-draggable',
  draggableHelper : 'node-draggable-helper',
  draggablePointer : 'node-draggable-pointer',
  draggableContainer : 'node-draggable-container',
  saved: 'node-saved',
  name: 'node-name',
  icon: 'node-icon',            
  selectedIcon: 'node-icon-selected',
  ceIcon: 'node-icon-ce',
  typeIcon: 'node-icon-type',
  handleIcon : 'node-icon-handle',
  action: 'node-action',
  indent: 'node-indent',
  saveButton: 'node-save',
  cancelButton: 'node-cancel',
  buttons: 'node-buttons'            
}

---

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