Creating Dynamic Tree View from database by JSON response:
In this post we are using CodeIgniter Framework to create Dynamic tree view. Following are the step we will use in this tutorial.
1) Create user Table in Database, in user table we will create four columns:
In the above table parent_key is the parent of the child(id). Which make the Tree View of the relation of parent and child.
2) Members.php in Application/Controller
Explanation of the above code:
$data = [];
// Creating the blank array
$parent_key = 'parent_key';
// pass the parent key of all the child under the specific key.
$row = $this->db->query('SELECT id, username from user WHERE
parent_key="'.$parent_key.'"');
// Fetch all username which comes under the declared parent key.
if($row->num_rows() > 0)
{
$data = $this->members_tree($parent_key);
}
else
{
$data=["id"=>"0","name"=>"No Members presnt in list","text"=>"No Members is presnt in
list","nodes"=>[]];
}
// If condition goes true(fetch one or more than one row) then it call the member_tree method of Members class and if query does not return any value then it passes the value in json format.
echo json_encode(array_values($data));
// Echo the $data in json formate
A) members_tree Method:
$row = $this->db->query('SELECT id, username from user WHERE parent_key="'.$parent_key.'"')->result_array();
// Fetch the all data which comes under the parent_key
foreach($row as $key => $value)
{
$id = $value['id'];
$row1[$key]['id'] = $value['id'];
$row1[$key]['name'] = $value['username'];
$row1[$key]['text'] = $value['username'];
$row1[$key]['nodes'] = array_values($this->members_tree($value['id']));
}
//Creating Tree by all fetched value and make a tree format of bootstrap
return $row1;
// Return all the value to index() method.
That's it in Members Controller.
3) members View in Application/View Folder.
A ) Include all css/js file in view <head>
B) Create div with id name.
C ) Call the Members controller by Ajax in View
Now you can see the Dynamic created Tree in Browser.
If you have any queries please write down in below comment box.
Thank You.
In this post we are using CodeIgniter Framework to create Dynamic tree view. Following are the step we will use in this tutorial.
1) Create user Table in Database, in user table we will create four columns:
- id (auto-increment and primary key)
- username
- password
- parent_key
2) Create Members Controller in CodeIgniter Application/Controller folder.
3) Create members view in CodeIgniter Application/View folder.
1) Create user Table in Database:
CREATE TABLE `user` ( `id` int(11) NOT NULL, `username` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, `parrent_key` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
In the above table parent_key is the parent of the child(id). Which make the Tree View of the relation of parent and child.
2) Members.php in Application/Controller
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Members extends CI_Controller
{
public function index()
{
$data = [];
$parent_key = 'parent_key'; // pass any key of the parent
$row = $this->db->query('SELECT id, username from user WHERE parent_key="'.$parent_key.'"');
if($row->num_rows() > 0)
{
$data = $this->members_tree($parent_key);
}
else
{
$data=["id"=>"0","name"=>"No Members presnt in list","text"=>"No Members is presnt in list","nodes"=>[]];
}
echo json_encode(array_values($data));
}
public function members_tree($parent_key)
{
$row1 = [];
$row = $this->db->query('SELECT id, username from user WHERE parent_key="'.$parent_key.'"')->result_array();
foreach($row as $key => $value)
{
$id = $value['id'];
$row1[$key]['id'] = $value['id'];
$row1[$key]['name'] = $value['username'];
$row1[$key]['text'] = $value['username'];
$row1[$key]['nodes'] = array_values($this->members_tree($value['id']));
}
return $row1;
}
}
Explanation of the above code:
$data = [];
// Creating the blank array
$parent_key = 'parent_key';
// pass the parent key of all the child under the specific key.
$row = $this->db->query('SELECT id, username from user WHERE
parent_key="'.$parent_key.'"');
// Fetch all username which comes under the declared parent key.
if($row->num_rows() > 0)
{
$data = $this->members_tree($parent_key);
}
else
{
$data=["id"=>"0","name"=>"No Members presnt in list","text"=>"No Members is presnt in
list","nodes"=>[]];
}
// If condition goes true(fetch one or more than one row) then it call the member_tree method of Members class and if query does not return any value then it passes the value in json format.
echo json_encode(array_values($data));
// Echo the $data in json formate
A) members_tree Method:
$row = $this->db->query('SELECT id, username from user WHERE parent_key="'.$parent_key.'"')->result_array();
// Fetch the all data which comes under the parent_key
foreach($row as $key => $value)
{
$id = $value['id'];
$row1[$key]['id'] = $value['id'];
$row1[$key]['name'] = $value['username'];
$row1[$key]['text'] = $value['username'];
$row1[$key]['nodes'] = array_values($this->members_tree($value['id']));
}
//Creating Tree by all fetched value and make a tree format of bootstrap
return $row1;
// Return all the value to index() method.
That's it in Members Controller.
3) members View in Application/View Folder.
A ) Include all css/js file in view <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" /> <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
B) Create div with id name.
<div class="col-md-8" id="treeview_json">
</div>
C ) Call the Members controller by Ajax in View
<script type="text/javascript">
$(document).ready(function(){
var treeData;
$.ajax({
type: "GET",
url: "<?php echo base_url('Members');?>",
dataType: "json",
success: function(response)
{
initTree(response)
}
});
function initTree(treeData) {
$('#treeview_json').treeview({data: treeData});
}
});
</script>
Now you can see the Dynamic created Tree in Browser.
If you have any queries please write down in below comment box.
Thank You.
