Skip to main content
jstree-example-search-href-link

jsTree Example with href link,Search node and Scrollbar

Earlier, We have discussed jstree with HTML and JSON data. This tutorial help to create a Treeview menu using jstree and slim scroll on that tree view structure.

Sometimes, We have a lot of data in tree view menu that time we need to add slim-scroll to add a vertical or horizontal scroll on the tree structure. I will also add an HTML anchor tag which will open a new page on a click of node. You can add your anchor text where you need to redirect or open a page when the user will click jstree node.

This is a very simple jstree example, I will discuss further within script code. I am assuming you have read my previous jstree example tutorial, so I am extending that jstree example.

jstree-example-search-href-link

How to add SlimScroll with jstree Example

Slimscroll is a very awesome and popular jquery scroll plugin that converts your boring scrollbar into beautiful scrolls using css and some JavaScript code. You can read more info about slimscroll from here. I am using cdn path to include slimscroll into the head section of index.html file:

Now we have slimscroll all methods and properties and we are going to implement them with jstree examples.

$('#treeview_json').slimScroll({
	height: '200px'
});

I am using slimScroll() method and pass option object into this method. We have set the max height of the container that use by the slim scroll to determine when the scroll will display on the container.

Simple Example of jsTree Search

We will add search on jstree nodes, in a real scenario number of nodes will exist in a single treeview so we need to search a particular node in jstree. jsTree provided ‘search’ plugin to add search functionality in jstree. It’s very handy and easy to use, Let’s demonstrate jstree search.

Added search plugin into the jstree instance like below snippet:

'core' : {
            'data' : jsonTreeData
        },
		plugins: ["search"] 

above code will add a search plugin into your jstree tree menu. now I will configure search params like case_insensitive,show_only_matches for display search matches etc.

"search": {
	"case_insensitive": true,
	"show_only_matches" : true
},

Now jstree instance code becomes like below,

'core' : {
	'data' : jsonTreeData
},
"search": {
	"case_insensitive": true,
	"show_only_matches" : true
},
plugins: ["search"]

I will add an HTML input text box into jstree menu panel. I am using Bootstrap CSS framework so I will use bootstrap classes to create a search box.

<div class="input-group">
	<input type="text" class="form-control" placeholder="Search node .." id="search">
	<span class="input-group-btn">
		<button class="btn btn-default" type="button" id="btn-search">Go!</button>
	</span>
</div>
<!-- /input-group -->

Please keep in mind the HTML input text box id 'search' and button Id "btn-search"(if you want to search nodes into jstree on click of GO button). I am implementing a search node from jstree on keyup(e) of HTML input text box.

$('#search').keyup(function(){
	$('#treeview_json').jstree('search', $(this).val());
});

add above code just below of jstree instance code and above of $(document).ready( closing tag.I have added a search node on keyup of the HTML search box.

Set href link on node and add onclick Event

I already added href attributes in JSON and added href link on each node when jstree rendered. We will demonstrate add onclick() event on node href using select_node.jstree. We will also open href link in a new tab on browser. Please add 'https://' at the beginning of href link if does not exist.

.bind("select_node.jstree", function (e, data) {
	var href = data.node.a_attr.href;
	var parentId = data.node.a_attr.parent_id;
	if(href == '#')
	return '';

	window.open(href);
})

apart from the above, I have added some javascript code to show selected node and child nodes using the below jstree node properties.

"id":"3",
"name":"Laptop",
"text":"Laptop",
"parent_id":"1",
"state" : {
	selected  : true,
	opened : true
},

You need to set two options selected : true and opened : true on each node those want to set selected and display the child’s node by default or dynamic.

Conclusion

We have learned to add slimscroll with jstree menu and search node functionality into jstree menu. We have also associated href attribute with each node and redirect page on click of jstree node.

You can download the source code and Demo below link.

One thought to “jsTree Example with href link,Search node and Scrollbar”

Leave a Reply

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