PHP MySQL Dynamic Treeview Using JQuery Ajax Example

Today, We want to share with you PHP MySQL Dynamic Treeview using jQuery Ajax Example.In this post we will show you Dynamic Tree with JSTree, PHP and MySQL, hear for PHP Dynamic Tree View Plugin With jQuery And Bootstrap we will give you demo and example for implement.In this post, we will learn about Create Dynamic Treeview Example using JQuery Ajax in PHP MySQL with an example.

PHP MySQL Dynamic Treeview using jQuery Ajax Example

There are the Following The simple About PHP MySQL Dynamic Treeview using jQuery Ajax Example Full Information With Example and source code.

Free Live Chat for Any Issue

As I will cover this Post with live Working example to develop how to create Ajax treeview in php MySQL, so the some jQuery Ajax tree structure in php with mysql for this example is following below.

Step 1: Create student table

SQL query student table:

CREATE TABLE IF NOT EXISTS `student` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `std_id` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2

Step 2: Create HTML Interface

index.php

<!DOCTYPE html>
<html>
<head>
  <title>PHP Dynamic Tree View Plugin With jQuery And Bootstrap - PHP MySQLi Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" />
  <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
</head>
<body>
<h1>Create Treeview using Bootstrap Treeview Ajax JQuery with PHP</h1>  
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <b>Ajax Dynamic Tree with jquery, PHP and MySQL - pakainfo.com</b>
    </div>
    <div class="panel-body">
      <div class="col-md-8" id="studentiew_treejson">
      </div>
    </div>
  </div>
</div>
  
<script type="text/javascript">
$(document).ready(function(){
  
   var treestudData;
   
   $.ajax({
        type: "GET",  
        url: "/getstudents.php",
        dataType: "json",       
        success: function(results)  
        {
          studentsTreeData(results)
        }   
  });
   
  function studentsTreeData(treestudData) {
    $('#studentiew_treejson').treeview({data: treestudData});
  }
   
});
</script>
   
</body>
</html>

Step 3: Database configuration

config.php

<?php
  
    $hostName = "localhost";
    $username = "root";
    $password = "[email protected]";
    $dbname = "students_master";
   
    $mysqli = new mysqli($hostName, $username, $password, $dbname);
  
?>

Step 4: Create Ajax File Call on Server side

getstudents.php

<?php
    
    require 'config.php';
  
    $parentKey = '0';
    $sql = "SELECT * FROM student";
  
    $studresult = $mysqli->query($sql);
   
      if(mysqli_num_rows($studresult) > 0)
      {
          $data = studentsTree($parentKey);
      }else{
          $data=["id"=>"0","name"=>"No Students present in list","text"=>"No Students is present in list","nodes"=>[]];
      }
   
      function studentsTree($parentKey)
      {
          require 'config.php';
  
          $sql = 'SELECT id, name from student WHERE std_id="'.$parentKey.'"';
  
          $studresult = $mysqli->query($sql);
  
          while($datavalue = mysqli_fetch_assoc($studresult)){
             $id = $datavalue['id'];
             $allstudData[$id]['id'] = $datavalue['id'];
             $allstudData[$id]['name'] = $datavalue['name'];
             $allstudData[$id]['text'] = $datavalue['name'];
             $allstudData[$id]['nodes'] = array_values(studentsTree($datavalue['id']));
          }
  
          return $allstudData;
      }
  
      echo json_encode(array_values($data));
  
?>

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

Download

I hope you get an idea about PHP MySQL Dynamic Treeview using jQuery Ajax Example.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Pakainfo

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.