An Overview of jsTree Configuration
Posted By : Sagar Watts | 18-Sep-2017
jsTree is a flexible plugin which provides us lots of configuration options to create an instance as per our requirements. We will discuss in detail about these configuration options. We can configure jsTree instance as per our requirements however it is not mandatory for us to do all the configurations, we can make changes as per requirements and leave rest as defaults.
We can create an instance with defaults configuration by using the simple method:
$('#treeId').jstree();
We can change the configuration while creating the instance or we can make the changes in default configuration for all the future instances .
We can make changes as a default configuration for all the instances by following the given code:
$.jstree.defaults.core.themes.variant = "large";
It will set the theme variant as “large” as defaults for all the tree instance. We don’t need to configure the large theme for every instance separately. However making every configuration default may not fit for our requirements, so we can configure every instance while creation.
Let’s get into the configuration option to see what configuration can be done.
Configurations are divided into two objects :
-
Core.
-
Plugins.
Tree provides us number of plugins that can be activated while creating the instance. We will discuss them in detail later, for now we need to understand that we can pass an array of strings of the plugin names, which we want to activate in the current instance.
All the major configurations are done in the core configuration object. The plugin configurations are passed using the object of same name as of plugin.
Here is a simple example demonstrating how to configure core, plugin and plugin configuration.
$('#treeID').jstree({
"core" : {
"multiple" : false,
"animation" : 0
},
"plugins" : [ "checkbox" ],
"checkbox" : {
"keep_selected_style" : false
}
});
As shown in the example, we have passed three objects, one for core configuration, one for plugin to activate and one same as plugin name, which is useful for the plugin configurations.
Thanks.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.