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";

Read Also: Codeigniter Select2 Ajax Autocomplete from Database Example

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

Read Also: How to Create a Custom Library in CodeIgniter?
<!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...

Tags :
Previous

PHP MySQL Column Sorting Example Tutorial
Next

PHP MySQL Create Dynamic Treeview Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares