Create Dynamic Treeview Example using JQuery Ajax in PHP MySQL

Hi,

If you are looking for tutorial on how to create dynamic treeview for menu or category using php mysql, then you are a right place. In this example we will build step by step dynamic tree view from database in php.

If you want to create treeview in your website application then you should use Bootstrap Treeview plugin for display menu in hierarchical treeview structures with php. in this example we will create ‘item’ table with ‘id’, ‘name’ and ‘parent_id’. Then we just create index.php file with write jquery ajax code for dynamic treeview. Then after we will create ajax file and write database logic there.

So, just follow few step and you will able to see bellow screen.

Preview:

Step 1: Create item table

In first step, we create new new table “item” in database. You can use following SQL Query for create “item” table. So let’s create using bellow sql query:

item table:


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

Step 2: Create index.php File

In this step, we will use Bootstrap Treeview plugin for display menu in hierarchical treeview structures with php and write ajax code:

index.php


<!DOCTYPE html>
<html>
<head>
  <title>Create Dynamic Treeview Example with PHP MySQL</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>
  
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h1>Create Dynamic Treeview Example with PHP MySQL - ItSolutionStuff.com</h1>
    </div>
    <div class="panel-body">
      <div class="col-md-8" id="treeview_json">
      </div>
    </div>
  </div>
</div>
  
<script type="text/javascript">
$(document).ready(function(){
  
   var treeData;
   
   $.ajax({
        type: "GET",  
        url: "/ajaxpro.php",
        dataType: "json",       
        success: function(response)  
        {
          initTree(response)
        }   
  });
   
  function initTree(treeData) {
    $('#treeview_json').treeview({data: treeData});
  }
   
});
</script>
   
</body>
</html>

Step 3: Create ajaxpro.php and db_config.php File

In this step, we will create ajaxpro.php and write code for fetch data from mysql database. So, we will write code for database logic. Also we will create database configuration file:

db_config.php


<?php
  
    $hostName = "localhost";
    $username = "root";
    $password = "root";
    $dbname = "test";
   
    $mysqli = new mysqli($hostName, $username, $password, $dbname);
  
?>

ajaxpro.php


<?php
    
    require 'db_config.php';
  
    $parentKey = '0';
    $sql = "SELECT * FROM item";
  
    $result = $mysqli->query($sql);
   
      if(mysqli_num_rows($result) > 0)
      {
          $data = membersTree($parentKey);
      }else{
          $data=["id"=>"0","name"=>"No Members present in list","text"=>"No Members is present in list","nodes"=>[]];
      }
   
      function membersTree($parentKey)
      {
          require 'db_config.php';
  
          $sql = 'SELECT id, name from item WHERE parent_id="'.$parentKey.'"';
  
          $result = $mysqli->query($sql);
  
          while($value = mysqli_fetch_assoc($result)){
             $id = $value['id'];
             $row1[$id]['id'] = $value['id'];
             $row1[$id]['name'] = $value['name'];
             $row1[$id]['text'] = $value['name'];
             $row1[$id]['nodes'] = array_values(membersTree($value['id']));
          }
  
          return $row1;
      }
  
      echo json_encode(array_values($data));
  
?>

Now you are ready to run this example.

I hope it can help you…

Post Views: 889

Create Dynamic Treeview Example using JQuery Ajax in PHP MySQL