Dynamic Treeview with jQuery & Laravel PHP Framework Example

Posted 7 years ago By Ajay Gupta 180856

Dynamic Treeview with jQuery & Laravel PHP Framework Example

In this tutorial i will tell you about creating a dynamic treeview with jquery in Laravel PHP Framework by using single callback function.
You can use it when you have a table with parent child relationship and you need to display result in directory structure.
Here i have a Category table where records are stored in parent child format and now i can use them to view as tree view with the help of jquery treeview js.
I assume you have installed Laravel 5.2 in your system if not then install it.
Now create a table Category in your database.

Step1: Create categories table and model

Now create a category table using Laravel 5 php artisan command.

php artisan make:migration create_categories_table

Now you will get a migration file in following path database/migrations and put these code in your migration file to create categories table.

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateCategoriesTable extends Migration
{
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->text('parent_id');
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::drop("categories");
    }
}

use Illuminate\Database\Schema\Blueprint;use Illuminate\Database\Migrations\Migration;class CreateCategoriesTable extends Migration{    public function up()    {        Schema::create('categories', function (Blueprint $table) {            $table->increments('id');            $table->string('name');            $table->text('parent_id');            $table->timestamps();        });    }    public function down()    {        Schema::drop("categories");    }}

After creating table, create model according to that.

app/Category.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
   //category has childs
   public function childs() {
           return $this->hasMany('App\Category','parent_id','id') ;
   }
}

<?phpnamespace App;use Illuminate\Database\Eloquent\Model;class Category extends Model{   //category has childs   public function childs() {   		return $this->hasMany('App\Category','parent_id','id') ;   }}

You will notice that here in my model i create a childs() method with hasMany relationship. hasMany relationship in Laravel tell us that they have multiple childs. Here I am creating relationship based on parent_id and each category has their parent id if parent id is 0 it means it is root category.

Step2: Add Route and Controller

Add this route in your routes.php

Route::get('jquery-tree-view',array('as'=>'jquery.treeview','uses'=>'TreeController@treeView'));

Route::get('jquery-tree-view',array('as'=>'jquery.treeview','uses'=>'TreeController@treeView'));

Now create a TreeController with treeView Method.

app/Http/Controllers/TreeController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Category;
class TreeController extends Controller {
   public function treeView(){       
        $Categorys = Category::where('parent_id', '=', 0)->get();
        $tree='<ul id="browser" class="filetree"><li class="tree-view"></li>';
        foreach ($Categorys as $Category) {
             $tree .='<li class="tree-view closed"<a class="tree-name">'.$Category->name.'</a>';
             if(count($Category->childs)) {
                $tree .=$this->childView($Category);
            }
        }
        $tree .='<ul>';
        // return $tree;
        return view('files.treeview',compact('tree'));
    }
    public function childView($Category){                 
            $html ='<ul>';
            foreach ($Category->childs as $arr) {
                if(count($arr->childs)){
                $html .='<li class="tree-view closed"><a class="tree-name">'.$arr->name.'</a>';                  
                        $html.= $this->childView($arr);
                    }else{
                        $html .='<li class="tree-view"><a class="tree-name">'.$arr->name.'</a>';                                 
                        $html .="</li>";
                    }
                                   
            }
            
            $html .="</ul>";
            return $html;
    }    
}

<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;use App\Http\Controllers\Controller;use App\Category;class TreeController extends Controller {   public function treeView(){               $Categorys = Category::where('parent_id', '=', 0)->get();        $tree='<ul id="browser" class="filetree"><li class="tree-view"></li>';        foreach ($Categorys as $Category) {             $tree .='<li class="tree-view closed"<a class="tree-name">'.$Category->name.'</a>';             if(count($Category->childs)) {                $tree .=$this->childView($Category);            }        }        $tree .='<ul>';        // return $tree;        return view('files.treeview',compact('tree'));    }    public function childView($Category){                             $html ='<ul>';            foreach ($Category->childs as $arr) {                if(count($arr->childs)){                $html .='<li class="tree-view closed"><a class="tree-name">'.$arr->name.'</a>';                                          $html.= $this->childView($arr);                    }else{                        $html .='<li class="tree-view"><a class="tree-name">'.$arr->name.'</a>';                                                         $html .="</li>";                    }                                               }                        $html .="</ul>";            return $html;    }	}

Step3: Create a view file

Now create a view file treeview.blade.php in following path resources/views/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dynamic Treeview with jQuery, Laravel PHP Framework Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
    <link href="http://www.expertphp.in/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="http://demo.expertphp.in/css/jquery.treeview.css" />
    <script src="http://demo.expertphp.in/js/jquery.js"></script>   
    <script src="http://demo.expertphp.in/js/jquery-treeview.js"></script>
    <script type="text/javascript" src="http://demo.expertphp.in/js/demo.js"></script>
</head>
<body>
<div class="container">      
    {!! $tree !!}
</div> 
</body>
</html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Dynamic Treeview with jQuery, Laravel PHP Framework Example</title>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />    <link href="http://www.expertphp.in/css/bootstrap.css" rel="stylesheet">    <link rel="stylesheet" href="http://demo.expertphp.in/css/jquery.treeview.css" />    <script src="http://demo.expertphp.in/js/jquery.js"></script>       <script src="http://demo.expertphp.in/js/jquery-treeview.js"></script>    <script type="text/javascript" src="http://demo.expertphp.in/js/demo.js"></script></head><body><div class="container">          {!! $tree !!}</div> </body></html>

Now you can use this code to create dynamic treeview in Laravel PHP Framework

Click here to see the demo of this code..

Show Demo