What’s jsTree?

jsTree is jquery plugin, that gives interactive timber. It’s completely free, open source and distributed underneath the MIT license. jsTree is definitely extendable, themable and configurable, it helps HTML & JSON knowledge sources and AJAX loading.

jsTree capabilities correctly in both box-model (content-box or border-box), might be loaded as an AMD module, and has a in-built cell theme for responsive design, that may simply be custom-made. It makes use of jQuery’s occasion system, so binding callbacks on varied occasions within the tree is acquainted and simple.

Just some of the options price noting:

  • drag & drop help
  • keyboard navigation
  • inline edit, create and delete
  • tri-state checkboxes
  • fuzzy looking out
  • customizable node varieties

Chrome 14+, Firefox 3.5+, Opera 12+, Safari 4+, IE8+
older variations may match, however usually are not examined

  Download   Discuss   Report bugs    Donate

Getting Began – every thing at a look

  1. Download jsTree or use CDNJS

    If you happen to select to obtain – all of the recordsdata you want are within the dist/ folder of the obtain

  2. Embody a jsTree theme

    Themes might be autloaded too, however it’s best for efficiency to incorporate the CSS file.

    If internet hosting the recordsdata your self:

    If utilizing CDNJS:

  3. Setup a container

    That is the ingredient the place you need the tree to look, a

    is sufficient. This instance has a nested

      as there is no such thing as a different knowledge supply configured (similar to JSON).

    • Embody jQuery

      jsTree requires 1.9.0 or higher in your webpage. You should utilize a CDN model or embrace a neighborhood copy.

    • Embody jsTree

      If internet hosting the recordsdata your self: for manufacturing embrace the minified model: dist/jstree.min.js, there’s a growth model too: dist/jstree.js

      If utilizing CDNJS:

    • Create an occasion

      As soon as the DOM is prepared you can begin creating jstree situations.

      $(operate () { $(‘#jstree_demo_div’).jstree(); });

    • Pay attention for occasions

      jsTree makes use of occasions to inform you when one thing adjustments whereas customers (otherwise you) work together with the tree. So binding to jstree occasions is as straightforward binding to a click on. There’s a list of events and what data they supply within the API documentation.

      $(‘#jstree_demo_div’).on(“modified.jstree”, operate (e, knowledge) { console.log(knowledge.chosen); });

    • Work together along with your situations

      As soon as an occasion is prepared you’ll be able to invoke strategies on it. There’s a list of available methods within the API documentation. The three examples beneath do precisely the identical factor

      $(‘button’).on(‘click on’, operate () { $(‘#jstree’).jstree(true).select_node(‘child_node_1’); $(‘#jstree’).jstree(‘select_node’, ‘child_node_1’); $.jstree.reference(‘#jstree’).select_node(‘child_node_1’); });

jsTree check

  • Root node 1
    • Baby node 1
    • Baby node 2
  • Root node 2

click here for the old site (v.1)


Leave a Reply