Codeigniter Create Dynamic Tree View using Treeview JS

By Hardik Savani November 5, 2023 Category : PHP Bootstrap jQuery MySql Codeigniter

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 class="container">

<div class="panel panel-default">

<div class="panel-heading">

<h1>PHP Codeigniter 3 - Create Dynamic Treeview Example - ItSolutionStuff.com</h1>

</div>

<div class="panel-body">

<div class="col-md-8" 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...

Shares