PHP MySQL Dynamic Treeview using jQuery Ajax Example

Uncategorized

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.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

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.

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.

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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Vue js Multiple Tag Input with Dynamic Autocomplete
  2.   Simple Jquery Popup Onload Example
  3.   Like Dislike system with PHP and MySQL
  4.   Redirect to custom page after plugin activation
  5.   VueJS Disable enable Selector Examples
  6.   Ajax Autocomplete Live Search Suggestion using PHP MySQL
  7.   jQuery Multiple Tag Input with Dynamic Autocomplete Example
  8.   JQuery Ajax Dynamic Treeview using PHP MySQL Example
  9.   PHP Autocomplete Input tags with Dynamic Data using jquery Ajax
  10.   Laravel AJAX Live Autocomplete Search from Database

Leave a Reply

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