Dynamic Treeview with jQuery & Laravel PHP Framework Example

Dynamic Treeview with jQuery & Laravel PHP Framework Example

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 Illuminate\Database\Schema\Blueprint;
  2. use Illuminate\Database\Migrations\Migration;
  3. class CreateCategoriesTable extends Migration
  4. {
  5. public function up()
  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 function down()
  15. {
  16. Schema::drop("categories");
  17. }
  18. }

After creating table, create model according to that.

app/Category.php
  1. <?php
  2. namespace App;
  3. use Illuminate\Database\Eloquent\Model;
  4. class Category extends Model
  5. {
  6. //category has childs
  7. public function childs() {
  8.         return $this->hasMany('App\Category','parent_id','id') ;
  9. }
  10. }

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'));

Now create a TreeController with treeView Method.

app/Http/Controllers/TreeController.php
  1. <?php
  2. namespace App\Http\Controllers;
  3. use Illuminate\Http\Request;
  4. use App\Http\Controllers\Controller;
  5. use App\Category;
  6. class TreeController extends Controller {
  7. public function treeView(){
  8. $Categorys = Category::where('parent_id', '=', 0)->get();
  9. $tree='<ul id="browser" class="filetree"><li class="tree-view"></li>';
  10. foreach ($Categorys as $Category) {
  11. $tree .='<li class="tree-view closed"<a class="tree-name">'.$Category->name.'</a>';
  12. if(count($Category->childs)) {
  13. $tree .=$this->childView($Category);
  14. }
  15. }
  16. $tree .='<ul>';
  17. // return $tree;
  18. return view('files.treeview',compact('tree'));
  19. }
  20. public function childView($Category){
  21. $html ='<ul>';
  22. foreach ($Category->childs as $arr) {
  23. if(count($arr->childs)){
  24. $html .='<li class="tree-view closed"><a class="tree-name">'.$arr->name.'</a>';
  25. $html.= $this->childView($arr);
  26. }else{
  27. $html .='<li class="tree-view"><a class="tree-name">'.$arr->name.'</a>';
  28. $html .="</li>";
  29. }
  30. }
  31. $html .="</ul>";
  32. return $html;
  33. }    
  34. }
Step3: Create a view file

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

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

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

Click here to see the demo of this code..

Phone: (+91) 8800417876
Noida, 201301
Betwinner
pendik escort
kartal escort