Jstree: Plugins


jstree

jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license.

jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources, AJAX & async callback loading.

functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery’s event system, so binding callbacks on various events in the tree is familiar and easy.

You also get:

  • drag & drop support
  • keyboard navigation
  • inline edit, create and delete
  • tree-state checkboxes
  • fuzzy searching
  • customizable node types

Include all necessary files

To get started you need 3 things in your page:

  1. jQuery (anything above 1.9.1 will work)
  2. A theme (there is one theme supplied by default)
  3. The source file
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/jstree.min.js"></script>

If you decide to host jstree yourself – the files are located in the dist folder. You can safely ignore the dist/libs folder.


Populating a tree using HTML

Now we are all set to create a tree, inline HTML is the easiest option (suitable for menus). All you need to do is select a node (using a jQuery selector) and invoke the .jstree() function to let jstree know you want to render a tree inside the selected node. $.jstree.create(element) can be used too.

<div id="container">
  <ul>
    <li>Root node
      <ul>
        <li>Child node 1</li>
        <li>Child node 2</li>
      </ul>
    </li>
  </ul>
</div>
<script>
$(function() {
  $('#container').jstree();
});
</script>
For More Jquery Plugins Click


 

Leave a Reply

Your email address will not be published. Required fields are marked *