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
$db= mysqli_connect("localhost", "root", "", "testing1");
$parentKey = '1';
$sql = "SELECT emp_id as id, concat(emp_fname, ' ', emp_lname) as name, emp_approver as parent_id, emp_desig as desig, emp_photo as photo FROM employees WHERE emp_status=1";
$result = mysqli_query($db, $sql);
if(mysqli_num_rows($result) > 0){
$data = membersTree($parentKey);
}else{
$data = [
"id" => "0",
"name" => "No Members present in list",
"text" => "No Members is present in list",
"nodes" => []
];
}
function membersTree($parentKey){
global $db;
$path = BASEURL.'uploads/employees/';
$sql = 'SELECT emp_id as id, concat(emp_fname, " ", emp_lname) as name, emp_approver as parent_id, emp_desig as desig, emp_photo as photo FROM employees WHERE emp_status=1 and emp_approver="'.$parentKey.'"';
$result = mysqli_query($db,$sql);
while($value = mysqli_fetch_assoc($result)){
$id = $value['id'];
$row1[$id]['id'] = $value['id'];
$row1[$id]['name'] = $value['name'];
$row1[$id]['text'] = '<img src="'.(($value["photo"])?$path.$value["photo"]:$path.'no-image.png').'" width="50" height="50"/> '.$value["name"].' - '.$value["desig"];
$row1[$id]['nodes'] = array_values(membersTree($value['id']));
}
return $row1;
}
echo json_encode(array_values($data));
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