Horizontal Expanding Tree Plugin With jQuery - tsTree
File Size: | 5.53 KB |
---|---|
Views Total: | 4400 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.