If you are looking for tutorial on how to create dynamic treeview in PHP, then in this post you can find something like that. This post has been cover topic like How to make dynamic treeview by using Bootstrap Treeview plugin with Ajax Jquery in PHP. This post will help you to create stylish treeview menu in PHP by using Bootstrap Treeview plugin. By using this plugin we can create simple and beautiful hierarchical dynamic treeview structure in our PHP script with Ajax JQuery and with Bootstrap.
If you want to create treeview in your web application then you should use this Bootstrap Treeview plugin for display menu in hierarchical treeview structures. This plugin can easily integrate withing Bootstrap 3. For use this plugin first we want to make Data structure in JSON format according this requirement of this plugin. So For make dynamic treeview, first in PHP we want to fetch data from database and then after store data into PHP Array and after using reference array we make PHP array according to Data structure requirement of Bootstrap Treeview plugin. After make PHP Array Data Structure according to requirement of Plugin now we want to convert into JSON by using json_encode() function. After converting into JSON string we have send this data to Ajax request success callback function. And under this function we have called Bootstrap Treeview plugin by treeview() method. By using this method we can called Bootstrap Plugin for make Hierarchical Treeview. Under this method we have write data option in this option we can define data which we have received from server. This data is nothing by Array of object and this plugin will display that data on web page in Treeview format.
So this way we can make simple dynamic treeview for our web application by using Bootstrap Treeview plugin in PHP Script with Ajax JQuery. If you have work on any large data driven enterprise level application and in that application there is large amount of different menu. Then at that time you have one question how to manage all menu in one application. So at that time you can display your menu in hierarchical treeview format in which you can store all menu under sub menu etc. e.g. In your project you have use category and sub category, so you can display category sub category under Treeview format.
So this is our simple web tutorial on How to create Dynamic Treeview in PHP by using Bootstrap Treeview plugin with Ajax JQuery. I hope you have find something new this tutorial and you have learn something new from this tutorial. So, please keep visit our website.
Source Code
index.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Make Treeview using Bootstrap Treeview Ajax JQuery with PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" />
<style>
</style>
</head>
<body>
<br /><br />
<div class="container" style="width:900px;">
<h2 align="center">Make Treeview using Bootstrap Treeview Ajax JQuery with PHP</h2>
<br /><br />
<div id="treeview"></div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$.ajax({
url: "fetch.php",
method:"POST",
dataType: "json",
success: function(data)
{
$('#treeview').treeview({data: data});
}
});
});
</script>
fetch.php
<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "testing1");
$query = "
SELECT * FROM country_state_city
";
$result = mysqli_query($connect, $query);
//$output = array();
while($row = mysqli_fetch_array($result))
{
$sub_data["id"] = $row["id"];
$sub_data["name"] = $row["name"];
$sub_data["text"] = $row["name"];
$sub_data["parent_id"] = $row["parent_id"];
$data[] = $sub_data;
}
foreach($data as $key => &$value)
{
$output[$value["id"]] = &$value;
}
foreach($data as $key => &$value)
{
if($value["parent_id"] && isset($output[$value["parent_id"]]))
{
$output[$value["parent_id"]]["nodes"][] = &$value;
}
}
foreach($data as $key => &$value)
{
if($value["parent_id"] && isset($output[$value["parent_id"]]))
{
unset($data[$key]);
}
}
echo json_encode($data);
/*echo '<pre>';
print_r($data);
echo '</pre>';*/
?>
Database
--
-- Database: `testing1`
--
-- --------------------------------------------------------
--
-- Table structure for table `country_state_city`
--
CREATE TABLE IF NOT EXISTS `country_state_city` (
`id` int(11) NOT NULL,
`name` varchar(250) NOT NULL,
`parent_id` int(11) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=latin1;
--
-- Dumping data for table `country_state_city`
--
INSERT INTO `country_state_city` (`id`, `name`, `parent_id`) VALUES
(1, 'USA', 0),
(2, 'Canada', 0),
(3, 'Australia', 0),
(4, 'New York', 1),
(5, 'Alabama', 1),
(6, 'California', 1),
(7, 'Ontario', 2),
(8, 'British Columbia', 2),
(9, 'New South Wales', 3),
(10, 'Queensland', 3),
(11, 'New York city', 4),
(12, 'Buffalo', 4),
(13, 'Albany', 4),
(14, 'Birmingham', 5),
(15, 'Montgomery', 5),
(16, 'Huntsville', 5),
(17, 'Los Angeles', 6),
(18, 'San Francisco', 6),
(19, 'San Diego', 6),
(20, 'Toronto', 7),
(21, 'Ottawa', 7),
(22, 'Vancouver', 8),
(23, 'Victoria', 8),
(24, 'Sydney', 9),
(25, 'Newcastle', 9),
(26, 'City of Brisbane', 10),
(27, 'Gold Coast', 10);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `country_state_city`
--
ALTER TABLE `country_state_city`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `country_state_city`
--
ALTER TABLE `country_state_city`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=28;
Vehicle GPS tracking system using php MySQL any ideas
ReplyDeletehow can we create new node
ReplyDeletehow can we rename/update a node, please write about
ReplyDeletehow can remove a node , please write code for its also, Thanks
ReplyDeleteHi.. getting this error: Uncaught TypeError: Cannot set property 'nodeId' of undefined
ReplyDeletegetting this error Uncaught TypeError: Cannot set property 'nodeId' of undefined. please help
ReplyDeletenot working if one more MAIN company is added!!!!!!!!!!!!!!!!!!!!!
ReplyDeleteExcellent. thank you
ReplyDeletec'est un bon tuto
ReplyDeletemerci encore une fois
i need help to add this a href="#" in html treeview please help please help
ReplyDeletetop.
ReplyDeletehey i need help in this code
ReplyDeleteI want that my current ID of parent and child show on the href of a tree
So I may redirect this on another page
Thank you for this lesson. I found it really helpful. I have one question, how can I add onclick event, which gets the id of a rocord? I would appreciate any answer.
ReplyDeletelo maximo eres el genio
ReplyDeleteforeach($data as $key => &$value)
ReplyDelete{
if($value["affiliateid"] && isset($output[$value["affiliateid"]]))
{
unset($data[$key]);
}
}
using this code give me an error
Uncaught TypeError: Cannot set property 'nodeId' of undefined
can you plz help me
Uncaught TypeError: Cannot set property 'nodeId' of undefined bootstrap-treeview.min.js:1
ReplyDeleteat bootstrap-treeview.min.js:1
at Function.each (jquery.min.js:2)
at g.setInitialStates (bootstrap-treeview.min.js:1)
at g.init (bootstrap-treeview.min.js:1)
at new g (bootstrap-treeview.min.js:1)
at HTMLDivElement. (bootstrap-treeview.min.js:1)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at n.fn.init.a.fn.(anonymous function) [as treeview] (https://rawgit.com/jonmiles/bootstrap-treeview/master/dist/bootstrap-treeview.min.js:1:16415)
at Object.success (DS.php:114)
Uncaught TypeError: Cannot set property 'nodeId' of undefined bootstrap-treeview.min.js:1
ReplyDeleteat bootstrap-treeview.min.js:1
at Function.each (jquery.min.js:2)
at g.setInitialStates (bootstrap-treeview.min.js:1)
at g.init (bootstrap-treeview.min.js:1)
at new g (bootstrap-treeview.min.js:1)
at HTMLDivElement. (bootstrap-treeview.min.js:1)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at n.fn.init.a.fn.(anonymous function) [as treeview] (https://rawgit.com/jonmiles/bootstrap-treeview/master/dist/bootstrap-treeview.min.js:1:16415)
at Object.success (DS.php:115)
Good sample, nice and clear. Is there a way to include a URL in the text of the tree node? I mean, I need to include a link in the text of the node, for instance, trigger a filter when I click the name of the node.
ReplyDeleteThanks in advance
Hello
ReplyDeleteHow can I add a link to the nodes? I'd like click on the node and ie, open a new window with some value passed
Regards
Hi
ReplyDeletehow will I display another column?
Thank you
Good
DeleteHi
ReplyDeleteCan I Know How To link id Of The Nodes To Preview Content in New Windows Like PDF File
Awesome! Thank you!
ReplyDeleteHi, I am getting a treeview is not a function error, not sure what I am doing wrong, can anyone assist ?
ReplyDeletehi how ca i add a link to the node?
ReplyDeleteGood tutorial sir, How can i display other column with it
ReplyDeleteIT GIVES SYNTAX ERROR ON LINE NUMBER
ReplyDelete$('#treeview').treeview({data: data});
Hii
ReplyDeleteis excelent, working fine. can you kinldy let me know how to create a link when clicked on the node and open a new window with some values passed.
JSON is getting done but the index.php does not show the treeview
ReplyDelete