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;

29 comments:

  1. Vehicle GPS tracking system using php MySQL any ideas

    ReplyDelete
  2. how can we create new node

    ReplyDelete
  3. how can we rename/update a node, please write about

    ReplyDelete
  4. how can remove a node , please write code for its also, Thanks

    ReplyDelete
  5. Hi.. getting this error: Uncaught TypeError: Cannot set property 'nodeId' of undefined

    ReplyDelete
  6. getting this error Uncaught TypeError: Cannot set property 'nodeId' of undefined. please help

    ReplyDelete
  7. not working if one more MAIN company is added!!!!!!!!!!!!!!!!!!!!!

    ReplyDelete
  8. c'est un bon tuto
    merci encore une fois

    ReplyDelete
  9. i need help to add this a href="#" in html treeview please help please help

    ReplyDelete
  10. hey i need help in this code
    I want that my current ID of parent and child show on the href of a tree
    So I may redirect this on another page

    ReplyDelete
  11. 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.

    ReplyDelete
  12. foreach($data as $key => &$value)
    {
    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

    ReplyDelete
  13. Uncaught TypeError: Cannot set property 'nodeId' of undefined bootstrap-treeview.min.js:1
    at 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)

    ReplyDelete
  14. Uncaught TypeError: Cannot set property 'nodeId' of undefined bootstrap-treeview.min.js:1
    at 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)

    ReplyDelete
  15. 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.

    Thanks in advance

    ReplyDelete
  16. Hello

    How 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

    ReplyDelete
  17. Hi
    how will I display another column?

    Thank you

    ReplyDelete
  18. Hi
    Can I Know How To link id Of The Nodes To Preview Content in New Windows Like PDF File

    ReplyDelete
  19. Hi, I am getting a treeview is not a function error, not sure what I am doing wrong, can anyone assist ?

    ReplyDelete
  20. hi how ca i add a link to the node?

    ReplyDelete
  21. Good tutorial sir, How can i display other column with it

    ReplyDelete
  22. IT GIVES SYNTAX ERROR ON LINE NUMBER
    $('#treeview').treeview({data: data});

    ReplyDelete
  23. Hii
    is 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.

    ReplyDelete
  24. JSON is getting done but the index.php does not show the treeview

    ReplyDelete