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

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

Also see:Codeigniter 3 – select2 ajax autocomplete from database example with demo

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

Also see:PHP Codeigniter 3 Google Recaptcha Form Validation Example


<!DOCTYPE html>

<html>

<head>

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

<link rel="stylesheet" href="#">

<link rel="stylesheet" href="#" />

<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

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

7  +  1  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US