Wednesday, 10 May 2017

Make Treeview using Bootstrap Treeview Ajax JQuery with PHP



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;

0 comments:

Post a Comment