Press "Enter" to skip to content

Create An ASCII Tree From The Folder Structure | tree-builder

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">
        &raquo;
        <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

    Leave a Reply

    Your email address will not be published.