Tree-builder is jQuery’s supported tree builder that provides an easy-to-use online editor for creating an ASCII hierarchical art tree from a nested HTML menu.
Hover over each item in the list, you’ll see a tree control with add sibling, add child, and delete links.
create dynamic tree view using javascript, jquery dynamic treeview example, hierarchical tree structure in html, jquery treeview json example
How to make use of it:
1. Create an input subject for the basis node.
<input id="p_name" placeholder="Top Node" />
2. Create an empty HTML list for the ASCII tree builder.
<ul id="tree" class="tree"></ul>
3. Create a pre
component to hold the ASCII tree.
<pre id="out"></pre>
4. Create the HTML for the tree controls.
<div class="hidden" id="template"> <ul> <li class="tree-node"> <input placeholder="filename" /> <span class="controls"> » <a class="btn-link" href="#" data-func="add-sibling" >+sibling</a > | <a class="btn-link" href="#" data-func="add-child" >+child</a > | <a class="btn-link" href="#" data-func="delete" >delete</a > </span> </li> </ul> </div>
/* hide the controls on page load */ .controls { display: none; }
5. Download the plugin and insert the principle JavaScript tree.js
after jQuery and performed.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/js/tree.js"></script>
ASCII Folder Tree Generator, ASCII tree-builder Plugin/Github, tree structure in javascript dynamically, jquery horizontal tree plugin free download
See Demo And Download
Official Website(nkvuong): Click Here
This superior jQuery/javascript plugin is developed by nkvuong. For extra Advanced Usages, please go to the official website.
Be First to Comment