Horizontal Expanding Tree Plugin With jQuery - tsTree

tsTree is a jQuery plugin used to render a dynamic, horizontal, expandable, multi-level tree for category lists, site navigation, multi-select tree lists and more.

How to use it:

1. Insert the tsTree jQuery plugin's files into the html document.

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

2. Create a container in which you want to render the tree.

<div id="categorey"></div>

3. Define your data in an array of JavaScript objects as follows:

var data =[  
   {  
      "id":1,
      "last":0,
      "name":"A-1"
   },
   {  
      "id":2,
      "last":0,
      "name":"A-2"
   },
   {  
      "id":3,
      "last":1,
      "name":"A-1-1"
   },
   {  
      "id":4,
      "last":1,
      "name":"A-1-2"
   },
   {  
      "id":5,
      "last":1,
      "name":"A-1-3"
   },
   {  
      "id":6,
      "last":1,
      "name":"A-1-4"
   },
   {  
      "id":7,
      "last":2,
      "name":"A-2-1"
   },
   {  
      "id":8,
      "last":2,
      "name":"A-2-2"
   },
   {  
      "id":9,
      "last":3,
      "name":"A-3-1"
   },
   {  
      "id":10,
      "last":3,
      "name":"A-3-2"
   },
   ...
];

4. Initialize the tree plugin and done.

var tsTree = $.fn.tsTree.init($('#categorey'),data);

5. Get the current node.

$('#get').click(function(){
  alert("id: " + tsTree.getLastNodeId().id +" name: " + tsTree.getLastNodeId().name + " parentNode: " + tsTree.getLastNodeId().last);
});

6. Get all selected nodes.

$('#getAll').click(function(){
  var allselected = "";
  for(var i = 0;i < tsTree.getAllSelectedNode().length;i++)
  {
    allselected += "[id: " + tsTree.getAllSelectedNode()[i].id +" name: " + tsTree.getAllSelectedNode()[i].name + " parentNode: " + tsTree.getAllSelectedNode()[i].last + "]  ";
  }
  alert(allselected);
});

---

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