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.

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.

Also Read This πŸ‘‰   VueJS Disable enable Selector Examples

Step 1: Create student table

SQL query student table:

  `name` varchar(255) NOT NULL,
  `std_id` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)

Step 2: Create HTML Interface


<!DOCTYPE html>
  <title>PHP Dynamic Tree View Plugin With jQuery And Bootstrap - PHP MySQLi Example</title>
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="" />
  <script type="text/javascript" charset="utf8" src=""></script>
  <script type="text/javascript" charset="utf8" src=""></script>
<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 -</b>
    <div class="panel-body">
      <div class="col-md-8" id="studentiew_treejson">
<script type="text/javascript">
   var treestudData;
        type: "GET",  
        url: "/getstudents.php",
        dataType: "json",       
        success: function(results)  
  function studentsTreeData(treestudData) {
    $('#studentiew_treejson').treeview({data: treestudData});

Step 3: Database configuration


    $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


    require 'config.php';
    $parentKey = '0';
    $sql = "SELECT * FROM student";
    $studresult = $mysqli->query($sql);
      if(mysqli_num_rows($studresult) > 0)
          $data = studentsTree($parentKey);
          $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 :

Also Read This πŸ‘‰   PHP Autocomplete Input tags with Dynamic Data using jquery Ajax


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

I hope you get an idea about PHP MySQL Dynamic Treeview using jQuery Ajax Example.
I would like to have feedback on my 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.