PHP Codeigniter 3 - Create Dynamic Tree View using Bootstrap Treeview JS

In this step, we are going to learn about how to create a dynamic tree view. We will use PHP Codeigniter 3 and Bootstrap Treeview JS to do this. In the below example, we will use Bootstrap Treeview JS so that we can build the dynamic tree structure in Codeigniter 3.

For our category tree or many things, we need to create a dynamic tree structure in our application. If we are developing our application using the Codeigniter framework, it will be easy for us to build the example of dynamic treeview.

For this, we will first create a new table named "item" and specify many columns like name, id, and parent_id. After that, the Codeigniter route will be created. Now we will create a new controller as "ItemController" and then create a new blade file as items.php. The step by step process to create a dynamic tree view is described as follows:

Step 1:

In this step, we are going to Create an Item Table. We will use our database and create a new table named "item". We will create it by using the SQL query, which is described as follows:

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

When we successfully create the table, we need to add dummy records. So we will add some records.

Step 2:

In this step, we are going to Create Route. We will create this for Ajax and View method. In this, we will use our routes.php file and then we will put the following code into that file:

application/config/routes.php

$route['item'] = "ItemController";
$route['getItem'] = "ItemController/getItem";

Step 3:

In this step, we are going to Create a Controller. We will create a new controller as "ItemController." We will create this with getItem(), index(), and membersTree() methods. Now we will use that file and then add the following code into it:

application/controllers/ItemController.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
 
class ItemController extends CI_Controller {
  
    /**
     * This method is used to get all the data.
     *
     * @return Response
    */
    public function __construct() {
       parent::__construct();
       $this->load->database();
    }
  
    /**
     * This method is used to get all the data.
     *
     * @return Response
    */
    public function index()
    {
        $this->load->view('items');
    }
   
    /**
     * This method is used to get all the Data. 
     *
     * @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));
    }
   
    /**
     * This method is used to get all the data.
     *
     * @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:

In this step, we are going to Create View File. We will create a view file named items.php. For dynamic tree view, we will use that file and write the below code into it:

application/views/items.php

<!DOCTYPE html>
<html>
<head>
  <title> Create Dynamic Treeview using the Codeigniter 3 and PHP </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> Create Dynamic Treeview using the Codeigniter 3 and PHP </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 our above code is ready, and we can run it. When we run this, the following output will be generated: