Advanced JSTree with PHP and MYSQL

In This jstree tutorial I will let you know how to add search and render content on click of node in JSTree using php and jQuery. I got huge response from my previous article Dynamic Tree with JSTree, PHP and MySQL.

I have shared one more tutorial for dynamic add,edit and delete node using JSTree and php. You can learn from Create, Rename and Delete Node using JSTree,PHP and MySQL.

Most of the user request to share article about render or redirect on page when user click leaf node in jstree.I have also added search functionality in jstree using search plugin.

There are a lot of jquery plugins available in market which are generating tree structure using json object.I shared an article 10+ Most Popular jQuery Tree Menu Plugin.

jstree is free, open source jquery treeview plugin, that help to create interactive tree menu using HTML & JSON data sources and AJAX loading. jsTree is easily extendable, them-able and configurable.It has a built in mobile theme for responsive design and various callback methods.jstree have many plugins for basic functionality like sort nodes,drag and drop nodes,context menu and search etc.

I am using same database structure like previous tutorial How to Create Dynamic Tree View Menu except one extra link column added in table,

advanced-jstree-menu

jsTree jQuery Tree Plugin main Features are:

  • drag & drop support
  • keyboard navigation
  • inline edit
  • create and delete
  • tri-state checkboxes
  • fuzzy searching
  • customizable node types

You can also check other tutorial of TreeView Menu,

How to create tree menu using jstree and php

we are using below files to create dynamic treeview using jstree jquery tree plugin,php and mysql. Its very easy and simple,The project structure are follows:

  1. dist folder : This folder will contains all js/css and images files.
  2. index.php : This file is use to display tree.
  3. response.php : This file is use to fetch tree nodes from database and convert them into json object.

How To add href attribute in JSTree Node

i am using and exnding Dynamic Tree with JSTree, PHP and MySQL tutorial, So i am not sharing initial steps to create tree using jstree, php and mysql. I assumed you have understand my jstree menu previous article code.

Step 1: Add a new column link into database jstree table.

Step 2: Search unset($data[$key]); code in response.php file and put below code like this.


Step 3:
We need to bind event on leaf node so that callback function will trigger on click leaf node.

Now You can refresh tree menu page and you will get href attribute is added on each leaf node.

How To add href attribute in JSTree and redirect on link

So now we have added href attribute on each jstree nodes and we will redirect on that href link by clicked on jstree node.

as you can see, I have used JavaScript document.location.href method for redirect on link.

How To Display content on click of jstree node

I am assuming you have have created below div container in your page.

Above right container div which will show your href content,You need to use below code to show content on click of jstree node.

How to add search functionality in jstree

I am using jstree search plugin which will use to apply search node on jstree container,You need to use below code to show content on click of jstree node.

Step 1: Add search input field using below html code,

Step 2: Added search plugin in jstree plugin list,

Step 3: Since we are calling search function in step 1 ,so we need to define search function which will call on keyup event of search input.

Conclusion:

We have learn how to add href attribute on each leaf node in jstree menu and redirect on link.We have also used search jstree plugin to add search functionality in treeview menu.

16 thoughts on “Advanced JSTree with PHP and MYSQL

  1. Parvez – This code is great! How can I link just the parent to my database link field if it has no children?

  2. You first need to find node has child if not then change this code line,
    bind(“select_node.jstree”, function (e, data) {
    var href =’#’;
    var href = data.node.a_attr.href;
    var number_of_child = get_current_child_node;
    if(number_of_child <=0) {
    href = get_parent_node_href
    $('#right-container').html(href);
    } else {
    $('#right-container').html(href);
    }

    });

    • Thanks for the response! After posting, I realized that Parents and Children could both have links. I changed it to work like this and wanted to share in case someone else needs a similar solution.

      Index.php – Replace “Bind” event with “on Changed” event

      .on(‘changed.jstree’, function (e, data) {
      var i, j, r = [];
      for(i = 0, j = data.selected.length; i &$item) {
      $item[‘a_attr’]->href = &$item[‘link’];
      if($item[‘parent_id’] && isset($itemsByReference[$item[‘parent_id’]])) {
      unset($data[$key]);
      }
      }

      • Man i love you 🙂 you are awesome. You helped me a lot.
        i’ve been fighting with that over 6 hours, and then found your solution.

        Works really perfect! I would just want to add one small correction,
        if the varLink is NOT a child do not load/redirect to any page. That could avoid not needed problems.

Leave a Reply

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