Different features of jsTree
This has multiple features that worth look at like
- Drag and drop
- Inline edit, create and delete using contextmenu
- Keyboard navigation
- Tri-state checkboxes
- Customizable node types
- jsTree background color change
- jsTree wholerow select
- jsTree conditional select
- And many more
For details of all available APIs, you can go though https://www.jstree.com/api/
How to create jsTree with JSON data
I’ll explain how create a basic tree view using jsTree library. For data supply, static JSON data will be used here for simplicity.
To get started, first you need to download the jsTree library and use CDNJS. I’ll be using CDNJS in my example.
We need to include the following in the html page.
- jsTree theme css
- HTML container element
- jQuery [1.9.0 or greater]
- jsTree js
- Initializer of the tree
To populate the tree with a JSON object, we need to use $.jstree.defaults.core.data .
My example of the simple jsTree is below. I have highlighted the important piece of information that is tricky.
Code file is below, so that you copy it and can be tested.
The outcome will as like below
If you want to know how to create a jsTree using dynamic JSON data , please go through this article. You can find many more example code of jstree feature at the right hand side bar.