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.

  • Parvez bro, thank u so much for this post. Now how can I show any php file instead of that link
    “href = ‘http://google.com’ in response.php

    • yes, you can add file link

      • Please say, Parvez bhai, How can I use this system.

        • you want static file or dynamic based on controller action

          • christer klingstedt

            Nice code ! Thanks…
            One big problem! When trying to modify your sql query ($sql = “SELECT * FROM treeview_items1 “;) by adding a simple join ($sql = “SELECT a.*, b.* FROM treeview_items1 a join table b USING (field) “;) everything just stops working.
            How can I change / expand the SQL syntax in the query string ?

          • hav u checked ‘SELECT a.*, b.* FROM treeview_items1 a join table b USING (field)’ retuning same result as ‘SELECT * FROM `treeview_items1’

          • hv u checked both sql returning same result

  • 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);
    }

    });

    • Ryan M.

      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]);
      }
      }

  • Bushra Rehan

    How to make the URL clickable? It is just showing the URL but it is not the link

    • have u putted url in href=”” atrribute

  • need to set task2 parent id 0.

  • John

    Did my best to achieve that and its not working
    i’m trying to build an mlm script where each user sees his downline alone