PHP Codeigniter 3 – Create Dynamic Tree View using Bootstrap Treeview JS
In this post we will give you information about PHP Codeigniter 3 – Create Dynamic Tree View using Bootstrap Treeview JS. Hear we will give you detail about PHP Codeigniter 3 – Create Dynamic Tree View using Bootstrap Treeview JSAnd how to use it also give you demo for it if it is necessary.
Today, i am going to share with you how to create dynamic treeview node from mysql database in codeigniter 3. In this tutorial, we will build step by step dynamic tree structure using bootstrap treeview js in codeigniter 3.
We may require to create dynamic tree structure for category tree etc in our application. So, if you are working on codeigniter framework then you can quick learn how you can build dynamic treeview example.
In this example, we will create “item” table with ‘id’, ‘name’, and ‘parent_id’ column, Then we will create codeigniter route. After that we will create ‘ItemController’ controller and new items.php blade file. So just follow few step and you will get result like as bellow scree shot.
Preview:
Step 1: Create item table
In first step we will create new new table “item” in database. You can use following SQL Query for create “item” table. So let’s create using bellow sql query:
item table:
CREATE TABLE IF NOT EXISTS 'item' (
'id' int(11) NOT NULL AUTO_INCREMENT,
'name' varchar(255) NOT NULL,
'parent_id' int(11) NOT NULL DEFAULT '0',
PRIMARY KEY ('id')
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2
After created table, you have to add some dummy records.
Step 2: Create Routes
Here, we will add new routes for view and ajax method. so open routes.php file and add code like as bellow:
application/config/routes.php
$route['item'] = "ItemController";
$route['getItem'] = "ItemController/getItem";
Step 3: Create ItemController Controller
now, we have to create “ItemController” controller with index(), membersTree() and getItem(). so create ItemController.php file in this path application/controllers and put bellow code in this file:
application/controllers/ItemController.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class ItemController extends CI_Controller {
/**
* Get All Data from this method.
*
* @return Response
*/
public function __construct() {
parent::__construct();
$this->load->database();
}
/**
* Get All Data from this method.
*
* @return Response
*/
public function index()
{
$this->load->view('items');
}
/**
* Get All Data from this method.
*
* @return Response
*/
public function getItem()
{
$data = [];
$parent_key = '0';
$row = $this->db->query('SELECT id, name from item');
if($row->num_rows() > 0)
{
$data = $this->membersTree($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));
}
/**
* Get All Data from this method.
*
* @return Response
*/
public function membersTree($parent_key)
{
$row1 = [];
$row = $this->db->query('SELECT id, name from item WHERE parent_id="'.$parent_key.'"')->result_array();
foreach($row as $key => $value)
{
$id = $value['id'];
$row1[$key]['id'] = $value['id'];
$row1[$key]['name'] = $value['name'];
$row1[$key]['text'] = $value['name'];
$row1[$key]['nodes'] = array_values($this->membersTree($value['id']));
}
return $row1;
}
}
Step 4: Create View File
In this step we will create items.php view file . In this file we will write code for dynamic tree view. So let’s update following file:
application/views/items.php
<!DOCTYPE html>
<html>
<head>
<title>PHP Codeigniter 3 - Create Dynamic Treeview Example - ItSolutionStuff.com</title>
<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>
</head>
<body>
<div >
<div >
<div >
<h1>PHP Codeigniter 3 - Create Dynamic Treeview Example - ItSolutionStuff.com</h1>
</div>
<div >
<div id="treeview_json">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var treeData;
$.ajax({
type: "GET",
url: "/getItem",
dataType: "json",
success: function(response)
{
initTree(response)
}
});
function initTree(treeData) {
$('#treeview_json').treeview({data: treeData});
}
});
</script>
</body>
</html>
Now, it’s done, you can run and check it how it works.
I hope it can help you…
Hope this code and post will helped you for implement PHP Codeigniter 3 – Create Dynamic Tree View using Bootstrap Treeview JS. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs