jQuery AJAX Dynamic Treeview Menu using PHP, MySQL

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

jQuery AJAX Dynamic Treeview Menu using PHP, MySQL

There are the Following The simple About bootstrap tree-view add node dynamically Full Information With Example and source code.

As I will cover this Post with live Working example to develop dynamic tree view php mysql, so the Insert Tree View Node using PHP Ajax is used for this example is following below.

Read Also:  nested select sql

How to Create Dymanic Treeview in PHP & MySQL?

STEP-1 : create the mysql database required

CREATE DATABASE `hospital_list`;
USE `hospital_list`;

CREATE TABLE `tbl_hospitals` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`hospital_name` varchar(50) NOT NULL,
`root_id` int(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=18;

INSERT INTO `tbl_hospitals` (`id`, `hospital_name`, `root_id`) VALUES
(1, 'CIMS Hospital', 0),
(2, 'Narayana Multispeciality Hospital', 1),
(3, 'Zydus Hospitals', 2),
(4, 'Narol Icu And Multispeciality Hospital', 2),
(5, 'Civil Hospital Campus, Ahmedabad.', 2),
(6, 'P. D. Hinduja National Hospital & Medical Research', 1),
(7, 'Zydus Hospitals Anand', 6),
(8, 'Riddhi Vinayak Multispeciality Hospital', 6),
(9, 'Manipal Hospital Jaipur', 6),
(10, 'Eternal Heart Care Centre', 6),
(11, 'Aditya Birla Memorial Hospital', 10),
(12, 'Hinduja Hospital Lalita Girdhar', 10),
(13, 'Sarvodaya Hospital And Research Center', 1),
(14, 'Deenanath Mangeshkar Hospital', 13),
(15, 'KEM Orthopedic Center.', 13),
(16, 'Sahyadri Hospitals', 15),
(17, 'Artemis Hospitals Dwarka', 15);

fetch_hospitals.php

<!--?php $db = mysqli_connect('localhost', 'root', 'DFG45fd4g85fd7g', 'hospital_list'); $sql = 'select id, hospital_name as name, hospital_name as text, root_id from tbl_hospitals'; $result = mysqli_query($db, $sql); $hospitals_data = mysqli_fetch_all($result, MYSQLI_ASSOC); foreach($hospitals_data as $k => &$v){<br ?--> $tmp_data[$v['id']] = &$v;
}

foreach($hospitals_data as $k => &$v){
if($v['root_id'] && isset($tmp_data[$v['root_id']])){
$tmp_data[$v['root_id']]['nodes'][] = &$v;
}
}

foreach($hospitals_data as $k => &$v){
if($v['root_id'] && isset($tmp_data[$v['root_id']])){
unset($hospitals_data[$k]);
}
}

echo json_encode($hospitals_data);
?>

Step 3: index.html



 
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3 class="text-center bg-primary">Dynamic Treeview Example - www.pakainfo.com</h3>
<div id="hospitalTree"></div>
</div>
<div class="col-sm-8"><!-- here goes other page contents --></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url: 'fetch_hospitals.php',
            method: 'GET',
            dataType: 'json',
            success: function(data){
                $('#hospitalTree').treeview({data: data});
            }
        });
    });
    </script>


Web Programming Tutorials Example with Demo

Read :

Read Also:  VueJS Show Hide Password in Password TextBox with CheckBox

Summary

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

I hope you get an idea about Create Tree-view with jsTree, PHP and MySQL.
I would like to have feedback on my infinityknow.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.