Dynamic Treeview with jQuery & Laravel PHP Framework Example

Leave a Comment / php / By

Dynamic Treeview with jQuery & Laravel PHP Framework Example

In this post we will give you information about Dynamic Treeview with jQuery & Laravel PHP Framework Example. Hear we will give you detail about Dynamic Treeview with jQuery & Laravel PHP Framework ExampleAnd how to use it also give you demo for it if it is necessary.

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.

  1. use IlluminateDatabaseSchemaBlueprint;
  2. use IlluminateDatabaseMigrationsMigration;
  3. class CreateCategoriesTable extends Migration
  4. {
  5.     public functionup()
  6. {
  7.         Schema::create('categories',function(Blueprint $table){
  8. $table->increments('id');
  9. $table->string('name');
  10. $table->text('parent_id');
  11. $table->timestamps();
  12. });
  13. }
  14.     public functiondown()
  15. {
  16.         Schema::drop("categories");
  17. }
  18. }
use IlluminateDatabaseSchemaBlueprint;use IlluminateDatabaseMigrationsMigration;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

  1. <?php
  3. namespace App;
  4. use IlluminateDatabaseEloquentModel;
  5. class Category extends Model
  6. {
  7. //category has childs
  8.    public functionchilds(){
  9.            return$this->hasMany('AppCategory','parent_id','id');
  10. }
  12. }
<?phpnamespace App;use IlluminateDatabaseEloquentModel;class Category extends Model{   //category has childs   public function childs() {   		return $this->hasMany('AppCategory','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

  1. 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

  1. <?php
  3. namespace AppHttpControllers;
  5. use IlluminateHttpRequest;
  6. use AppHttpControllersController;
  7. use AppCategory;
  8. class TreeController extends Controller {
  9.    public functiontreeView(){
  10. $Categorys= Category::where('parent_id','=',)->get();
  11. $tree='<ul id="browser" ><li ></li>';
  12. foreach($Categorysas$Category){
  13. $tree.='<li <a >'.$Category->name.'</a>';
  14. if(count($Category->childs)){
  15. $tree.=$this->childView($Category);
  16. }
  17. }
  18. $tree.='<ul>';
  19. // return $tree;
  20. returnview('files.treeview',compact('tree'));
  21. }
  23.     public functionchildView($Category){
  24. $html='<ul>';
  25. foreach($Category->childs as$arr){
  26. if(count($arr->childs)){
  27. $html.='<li ><a >'.$arr->name.'</a>';
  28. $html.=$this->childView($arr);
  29. }else{
  30. $html.='<li ><a >'.$arr->name.'</a>';
  31. $html.="</li>";
  32. }
  34. }
  36. $html.="</ul>";
  37. return$html;
  39. }    
  40. }
<?phpnamespace AppHttpControllers;use IlluminateHttpRequest;use AppHttpControllersController;use AppCategory;class TreeController extends Controller {   public function treeView(){               $Categorys = Category::where('parent_id', '=', 0)->get();        $tree='<ul id="browser" ><li ></li>';        foreach ($Categorys as $Category) {             $tree .='<li <a >'.$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 ><a >'.$arr->name.'</a>';                                          $html.= $this->childView($arr);                    }else{                        $html .='<li ><a >'.$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/

  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="utf-8">
  5. <metahttp-equiv="X-UA-Compatible"content="IE=edge">
  6. <metaname="viewport"content="width=device-width, initial-scale=1">
  7. <title>Dynamic Treeview with jQuery, Laravel PHP Framework Example</title>
  8. <linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
  9. <linkhref="http://www.onlinecode.org/css/bootstrap.css"rel="stylesheet">
  10. <linkrel="stylesheet"href="//css/jquery.treeview.css"/>
  11. <scriptsrc="//js/jquery.js"></script>
  12. <scriptsrc="//js/jquery-treeview.js"></script>
  13. <scripttype="text/javascript"src="//js/demo.js"></script>
  14. </head>
  15. <body>
  17. <divclass="container">
  18.     {!! $tree !!}
  19. </div>
  21. </body>
  22. </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.onlinecode.org/css/bootstrap.css" rel="stylesheet">    <link rel="stylesheet" href="//css/jquery.treeview.css" />    <script src="//js/jquery.js"></script>       <script src="//js/jquery-treeview.js"></script>    <script type="text/javascript" src="//js/demo.js"></script></head><body><div >          {!! $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

Hope this code and post will helped you for implement Dynamic Treeview with jQuery & Laravel PHP Framework Example. 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 *

1  +  8  =  

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