Introduction To jsTree Plugins

Posted By : Sagar Watts | 18-Sep-2017

As we know jsTree provide us the number of features, however all these features are not included in the core. To make use of these features, we have number of plugins, which can be activated as per our requirement. To activate the plugin, we need to pass the name of the plugin in the “plugins” configuration option. We can activate as many plugins as we want. And also each plugin can be configured passing the object having the same name as of plugin.


Activate Plugins:  The required plugins can be activated while creating the tree instance. We can pass an array of the plugin names in the property “plugins” of the configuration object. The activation process is quite simple, however these plugins also provides us configuration options of their owns. Here is how we can activate the plugins:

		    "plugins" : ["checkbox"]
        

Configuration: Now that we have activated plugin, we need to configure them in order to use them. So along with the plugins, we also need to  provide the configuration for each of the activated plugin. The configuration object is of the same name as of the plugin having different properties for each of plugin.Here is how we can configure the plugin :

		  "checkbox" : {
      			"keep_selected_style" : false
			    },
        
Along with the other configurations, we need to provide an object named checkbox to configure the checkbox plugin. Each plugin provides us wide range of properties, we can configure them as per our requirements.
 

jsTree plugins: Here is the brief about some of the plugins jsTree provided us.

 
  1. checkbox:  If we want to place a checkbox in front of node, we can make use of the checkbox plugin. This plugin make the tree attractive and easier the process of getting input from user from the tree.

 
  1. search :  Many times it happens that the data to represent in the tree is quite long and we have to scroll and search for the specific node. The search plugin make our task easier. We can activate this plugin to enable the search between the nodes.

 
  1. contextMenu: This plugin is useful if we want to enable the right click on the node and shows a list of options in menu.

 
  1. dnd: This is quite useful plugin to add the drag n drop functionality in your tree. We can rearrange the tree nodes by dragging them  and drop them at the required location.

 

Apart from that , we have number of plugins for different functionality, which makes our tree more and more useful and easier to use as per the user perspective.

 
Thanks, 

About Author

Author Image
Sagar Watts

Sagar is a bright Web App Lead Developer , he has great knowledge of core Java and advance Java. His hobbies are Net Surfing, Listen Music and Reading Books.

Request for Proposal

Name is required

Comment is required

Sending message..