JQuery Ajax Dynamic Treeview using PHP MySQL Example

Today, We want to share with you JQuery Ajax Dynamic Treeview using PHP MySQL Example.In this post we will show you Dynamic Tree with JSTree, PHP and MySQL, hear for Dynamic Treeview Menu using PHP, MySQL and AJAX Example 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.

JQuery Ajax Dynamic Treeview using PHP MySQL Example

There are the Following The simple About JQuery Ajax Dynamic Treeview using PHP MySQL 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 Dynamic Treeview with jQuery & Laravel PHP Example, so the some major files and Directory structures for this example is following below.

  • index.php
  • database_conn.php
  • calldo_ajax.php
Also Read This πŸ‘‰   delete Query In Codeigniter Example Tutorial

Step 1: Create member table

member table:

simple mysql Run This Query and save Database structures.

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

Step 2: Create index.php File

This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.php.


<!DOCTYPE html>
  <title>Create Dynamic Treeview Example with PHP MySQL - Pakainfo.com</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" />
  <script type="text/javascript" charset="utf8" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" charset="utf8" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h1>Create Dynamic Treeview Example with PHP MySQL - pakainfo.com</h1>
    <div class="panel-body">
      <div class="col-md-8" id="live_tree_json_view">
<script type="text/javascript">
   var liveMemberData;
        type: "GET",
        url: "/calldo_ajax.php",
        dataType: "json",
        success: function(response)
  function initTree(liveMemberData) {
    $('#live_tree_json_view').treeview({data: liveMemberData});

Step 3: Create AJAX and Config File


    $hostName = "localhost";
    $username = "atmiys";
    $password = "jdaits";
    $dbname = "customtree";
    $mysqli = new mysqli($hostName, $username, $password, $dbname);

    require 'database_conn.php';
    $masterKey = '0';
    $sql = "SELECT * FROM member";
    $response = $mysqli->query($sql);
      if(mysqli_num_rows($response) > 0)
          $data = membersTree($masterKey);
          $data=["id"=>"0","name"=>"No Members available in member list","text"=>"No Members is available in member list","nodes"=>[]];
      function membersTree($masterKey)
          require 'database_conn.php';
          $sql = 'SELECT id, name from member WHERE parent_id="'.$masterKey.'"';
          $response = $mysqli->query($sql);
          while($value = mysqli_fetch_assoc($response)){
             $id = $value['id'];
             $dataRow[$id]['id'] = $value['id'];
             $dataRow[$id]['name'] = $value['name'];
             $dataRow[$id]['text'] = $value['name'];
             $dataRow[$id]['nodes'] = array_values(membersTree($value['id']));
          return $dataRow;
      echo json_encode(array_values($data));

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read This πŸ‘‰   Simple PHP Create Custom Captcha Generator


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

I hope you get an idea about JQuery Ajax Dynamic Treeview using PHP MySQL 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.

Rate this post