Create Dynamic Treeview Example using JQuery Ajax in PHP MySQL

By Hardik Savani | August 25, 2018 | Category : PHP Javascript Bootstrap jQuery MySql


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.


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:



`name` varchar(255) NOT NULL,

`parent_id` int(11) NOT NULL DEFAULT '0',



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:


<!DOCTYPE html>



<title>Create Dynamic Treeview Example with PHP MySQL</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>



<div class="container">

<div class="panel panel-default">

<div class="panel-heading">

<h1>Create Dynamic Treeview Example with PHP MySQL -</h1>


<div class="panel-body">

<div class="col-md-8" id="treeview_json">





<script type="text/javascript">


var treeData;


type: "GET",

url: "/ajaxpro.php",

dataType: "json",

success: function(response)





function initTree(treeData) {

$('#treeview_json').treeview({data: treeData});






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:



$hostName = "localhost";

$username = "root";

$password = "root";

$dbname = "test";

$mysqli = new mysqli($hostName, $username, $password, $dbname);




require 'db_config.php';

$parentKey = '0';

$sql = "SELECT * FROM item";

$result = $mysqli->query($sql);

if(mysqli_num_rows($result) > 0)


$data = membersTree($parentKey);


$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...

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: