Laravel 5 中基于 jQuery 实现分层级的类目树结构实例教程 Larav_H5之家

今天，我要来分享下如何在Laravel 5中通过jQuery实现动态类目树结构：有些时候我们确实需要为类目及其子类目生成树结构以便于使用。

在本教程中，我只是简单在Laravel应用中创建一个“categories”表并通过一个嵌套的树结构来管理父类目和子类目。我使用jQuery来生成树视图布局，使用类目模型为层级数据设置关联关系，还为在类目树中创建新类目添加了表单。

在正式开始之前，先贴上最终效果图：

laravel-category-tree-view

下面正式开始开发之路。

第一步：安装Laravel 5.3应用

如果你还没有安装Laravel 5.3的话，那么第一步肯定是安装它。我们使用Composer进行安装：

composercreate-project--prefer-distlaravel/laravelblog

如果没有Homestead之类的开发环境的话，需要在.env文件中配置数据库连接信息。

第二步：创建类目表和模型

在这一步中我们使用Laravel提供的Artisan命令为类目表生成迁移文件：

phpartisanmake:migrationcreate_category_table

运行完该命令之后你会发现在database/migrations目录下新生成了一个迁移文件，编辑该文件代码如下：

useIlluminate\Support\Facades\Schema; useIlluminate\Database\Schema\Blueprint; useIlluminate\Database\Migrations\Migration; classCreateCategoryTableextendsMigration { /** *Runthemigrations. * *@returnvoid */ publicfunctionup() { Schema::create('categories',function(Blueprint$table){ $table->increments('id'); $table->string('title'); $table->integer('parent_id'); $table->timestamps(); }); } /** *Reversethemigrations. * *@returnvoid */ publicfunctiondown() { Schema::drop("categories"); } }

然后我们运行如下命令生成该表：

php artisan migrate

创建完数据表之后还需要创建一个与该数据表相对应的模型类app/Category.php：

<?php namespaceApp; useIlluminate\Database\Eloquent\Model; classCategoryextendsModel { public$fillable=['title','parent_id']; /** *Gettheindexnameforthemodel. * *@returnstring */ publicfunctionchilds(){ return$this->hasMany('App\Category','parent_id','id'); } }

第三步：创建路由

在这一步中我们需要创建两个路由，一个用于渲染类目树视图，一个用于添加新的类目。打开routes/web.php文件，添加如下两个路由：

Route::get('category-tree-view',['uses'=>'CategoryController@manageCategory']); Route::post('add-category',['as'=>'add.category','uses'=>'CategoryController@addCategory']);

第四步：创建控制器

到了这里，我们需要创建路由中定义的控制器app/Http/Controllers/CategoryController.php，编写该文件代码如下：

<?php namespaceApp\Http\Controllers; useIlluminate\Http\Request; useApp\Http\Requests; useApp\Category; classCategoryControllerextendsController { /** *Showtheapplicationdashboard. * *@return\Illuminate\Http\Response */ publicfunctionmanageCategory() { $categories=Category::where('parent_id','=',0)->get(); $allCategories=Category::pluck('title','id')->all(); returnview('categoryTreeview',compact('categories','allCategories')); } /** *Showtheapplicationdashboard. * *@return\Illuminate\Http\Response */ publicfunctionaddCategory(Request$request) { $this->validate($request,[ 'title'=>'required', ]); $input=$request->all(); $input['parent_id']=empty($input['parent_id'])?0:$input['parent_id']; Category::create($input); returnback()->with('success','NewCategoryaddedsuccessfully.'); } }

第五步：创建视图

在这一步中，我们来创建两个Blade视图文件。首先是resources/views/categoryTreeview.blade.php：

<!DOCTYPEhtml> <html> <head> <title>LaravelCategoryTreeviewExample</title> <linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/> <linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"> <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <linkhref="/css/treeview.css"rel="stylesheet"> </head> <body> <divclass="container"> <divclass="panelpanel-primary"> <divclass="panel-heading">ManageCategoryTreeView</div> <divclass="panel-body"> <divclass="row"> <divclass="col-md-6"> <h3>CategoryList</h3> <ulid="tree1"> @foreach($categoriesas$category) <li> {{$category->title}} @if(count($category->childs)) @include('manageChild',['childs'=>$category->childs]) @endif </li> @endforeach </ul> </div> <divclass="col-md-6"> <h3>AddNewCategory</h3> {!!Form::open(['route'=>'add.category'])!!} @if($message=Session::get('success')) <divclass="alertalert-successalert-block"> <buttontype="button"class="close"data-dismiss="alert">×</button> <strong>{{$message}}</strong> </div> @endif <divclass="form-group{{$errors->has('title')?'has-error':''}}"> {!!Form::label('Title:')!!} {!!Form::text('title',old('title'),['class'=>'form-control','placeholder'=>'EnterTitle'])!!} <spanclass="text-danger">{{$errors->first('title')}}</span> </div> <divclass="form-group{{$errors->has('parent_id')?'has-error':''}}"> {!!Form::label('Category:')!!} {!!Form::select('parent_id',$allCategories,old('parent_id'),['class'=>'form-control','placeholder'=>'SelectCategory'])!!} <spanclass="text-danger">{{$errors->first('parent_id')}}</span> </div> <divclass="form-group"> <buttonclass="btnbtn-success">AddNew</button> </div> {!!Form::close()!!} </div> </div> </div> </div> </div> <scriptsrc="/js/treeview.js"></script> </body> </html>