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.

  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.

  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
ataşehir escort maltepe escort bostancı escort kadıköy escort maltepe escort ataşehir escort kurtköy escort kartal escort pendik escort ataşehir escort
şişli escort
pendik escort
izmir escort izmir escort izmir escort izmir escort denizli escort antalya escort antalya escort antalya escort izmir escort izmir escort izmir escort izmir escort izmir escort