2019独角兽企业重金招聘Python工程师标准>>>

Laravel5中基于jQuery实现分层级的类目树结构方法
下面时间财富网小编们来了解一下关于Laravel 5 中基于 jQuery 实现分层级的类目树结构方法，希望这一篇教程能够给各位带来帮助，具体的步骤细节如下文介绍。
今天，时间财富网小编要来分享下如何在Laravel 5中通过jQuery实现动态类目树结构：有些时候时间财富网小编们确实需要为类目及其子类目生成树结构以便于使用。
在本教程中，时间财富网小编只是简单在Laravel应用中创建一个“categories”表并通过一个嵌套的树结构来管理父类目和子类目。时间财富网小编使用jQuery来生成树视图布局，使用类目模型为层级数据设置关联关系，还为在类目树中创建新类目添加了表单。
在正式开始之前，先贴上最终效果图：
laravel-category-tree-view
下面正式开始开发之路。
第一步：安装Laravel 5.3应用
如果你还没有安装Laravel 5.3的话，那么第一步肯定是安装它。时间财富网小编们使用Composer进行安装：
composer create-project --prefer-dist laravel/laravel blog
如果没有Homestead之类的开发环境的话，需要在.env文件中配置数据库连接信息。
第二步：创建类目表和模型
在这一步中时间财富网小编们使用Laravel提供的Artisan命令为类目表生成迁移文件：
php artisan make:migration create_category_table
运行完该命令之后你会发现在database/migrations目录下新生成了一个迁移文件，编辑该文件代码如下：
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateCategoryTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->integer('parent_id');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop("categories");
    }
}
然后时间财富网小编们运行如下命令生成该表：
php artisan migrate
创建完数据表之后还需要创建一个与该数据表相对应的模型类app/Category.php：
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
    public $fillable = ['title','parent_id'];
    /**
     * Get the index name for the model.
     *
     * @return string
     */
    public function childs() {
        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
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Category;
class CategoryController extends Controller
{
    /**
     * Show the application dashboard.
     * 
     * @return \Illuminate\Http\Response
     */
    public function manageCategory()
    {
        $categories = Category::where('parent_id', '=', 0)->get();
        $allCategories = Category::pluck('title','id')->all();
        return view('categoryTreeview',compact('categories','allCategories'));
    }
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function addCategory(Request $request)
    {
        $this->validate($request, [
            'title' => 'required',
        ]);
        $input = $request->all();
        $input['parent_id'] = empty($input['parent_id']) ? 0 : $input['parent_id'];
        Category::create($input);
        return back()->with('success', 'New Category added successfully.');
    }
}
第五步：创建视图
在这一步中，时间财富网小编们来创建两个Blade视图文件。首先是resources/views/categoryTreeview.blade.php：
<!DOCTYPE html>
<html>
    <head>
        <title>Laravel Category Treeview Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <link href="/css/treeview.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="panel panel-primary">
                <div class="panel-heading">Manage Category TreeView</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h3>Category List</h3>
                            <ul id="tree1">
                                @foreach($categories as $category)
                                     <li>
                                     {{ $category->title }}
                                     @if(count($category->childs))
                                         @include('manageChild',['childs' => $category->childs])
                                     @endif
                                     </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h3>Add New Category</h3>
                            {!! Form::open(['route'=>'add.category']) !!}
                                @if ($message = Session::get('success'))
                                <div class="alert alert-success alert-block">
                                    <button type="button" class="close" data-dismiss="alert">×</button>
                                    <strong>{{ $message }}</strong>
                                </div>
                                @endif
                                <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
                                    {!! Form::label('Title:') !!}
                                    {!! Form::text('title', old('title'), ['class'=>'form-control', 'placeholder'=>'Enter Title']) !!}
                                    <span class="text-danger">{{ $errors->first('title') }}</span>
                                </div>
                                <div class="form-group {{ $errors->has('parent_id') ? 'has-error' : '' }}">
                                    {!! Form::label('Category:') !!}
                                    {!! Form::select('parent_id',$allCategories, old('parent_id'), ['class'=>'form-control', 'placeholder'=>'Select Category']) !!}
                                    <span class="text-danger">{{ $errors->first('parent_id') }}</span>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-success">Add New</button>
                                </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="/js/treeview.js"></script>
    </body>
</html>
然后是resources/views/manageChild.blade.php：
<ul>
    @foreach($childs as $child)
    <li>
        {{ $child->title }}
        @if(count($child->childs))
            @include('manageChild',['childs' => $child->childs])
        @endif
    </li>
    @endforeach
</ul>
第六步：添加CSS和JS文件
最后一步，时间财富网小编们来添加视图文件所需要的CSS和JS文件。
public/css/treeview.css：
.tree, .tree ul {
    margin:0;
    padding:0;
    list-style:none
}
.tree ul {
    margin-left:1em;
    position:relative
}
.tree ul ul {
    margin-left:.5em
}
.tree ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-left:1px solid
}
.tree li {
    margin:0;
    padding:0 1em;
    line-height:2em;
    color:#369;
    font-weight:700;
    position:relative
}
.tree ul li:before {
    content:"";
    display:block;
    width:10px;
    height:0;
    border-top:1px solid;
    margin-top:-1px;
    position:absolute;
    top:1em;
    left:0
}
.tree ul li:last-child:before {
    background:#fff;
    height:auto;
    top:1em;
    bottom:0
}
.indicator {
    margin-right:5px;
}
.tree li a {
    text-decoration: none;
    color:#369;
}
.tree li button, .tree li button:active, .tree li button:focus {
    text-decoration: none;
    color:#369;
    border:none;
    background:transparent;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    outline: 0;
}
public/js/treeview.js：
$.fn.extend({
    treed: function (o) {
        var openedClass = 'glyphicon-minus-sign';
        var closedClass = 'glyphicon-plus-sign';
        if (typeof o != 'undefined'){
            if (typeof o.openedClass != 'undefined'){
                openedClass = o.openedClass;
            }
            if (typeof o.closedClass != 'undefined'){
                closedClass = o.closedClass;
            }
        };
        /* initialize each of the top levels */
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this);
            branch.prepend("");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(openedClass + " " + closedClass);
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();
        });
        /* fire event from the dynamically added icon */
        tree.find('.branch .indicator').each(function(){
            $(this).on('click', function () {
                $(this).closest('li').click();
            });
        });
        /* fire event to open branch if the li contains an anchor instead of text */
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        /* fire event to open branch if the li contains a button instead of text */
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
    }
});
/* 初始化树状图 */
$('#tree1').treed();
好了，至此所有代码已经编写完成，你可以在浏览器中查看效果了。
如果大家需要看更多关于PHP编程方面的资讯可以关注时间财富网

转载于:https://my.oschina.net/sjcfw680/blog/792617

Laravel5中基于jQuery实现分层级的类目树结构方法相关推荐

  1. 计算机hash函数开题报告,自组网位置服务中基于哈希函数的位置分配和检索方法【开题报告+文献综述+毕业论文】...

    自组网位置服务中基于哈希函数的位置分配和检索方法[开题报告+文献综述+毕业论文] (36页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 29.90 积分 ...

  2. python 中关于无法导入自己写的类。解决方法

    python 中关于无法导入自己写的类.解决方法 参考文章: (1)python 中关于无法导入自己写的类.解决方法 (2)https://www.cnblogs.com/jc-home/p/1209 ...

  3. Eclipse中 怎么让包分层级显示

    http://hi.baidu.com/tl528428/item/5acee7b641e6f69d194697a2 首先选择向下那个箭头就会出现这样的界面 出现后 选择Package present ...

  4. 室内可见光通信系统中基于压缩感知的空移键控信号检测方法

    摘要 针对基于空移键控(Space Shift Keying,SSK)的室内可见光通信(Visible Light Communications,VLC)系统中的信号检测,本文将其转换为稀疏信号重构问 ...

  5. Entrust是一种为Laravel5添加基于角色的权限的简洁而灵活的方法。

    安装 首先要在composer.json中添加: "zizaco/entrust": "5.2.x-dev" 然后运行composer install 或者 c ...

  6. SqlParameter[] 数组 sql语句中参数的填充的通用访问类的使用方法

    //1.定义通用访问类的方法 public static SqlDataReader GetReader(string sql,SqlParameter [] para) { //实例化conn Sq ...

  7. 黑马程序员mfc中分割窗口---ctreeview未定义基类的解决方法

    在跟班黑马程序学mfc中分割窗口,vs2019出现了以下的错误.解决方法很简单. 首先我们点击错误,自动定位到出错的类,会发现出错的是CSelcetView的头文件和源文件出错, 我们找到头文件中 在 ...

  8. 关于在CLASSWIZARD中找不到工作区间中的类的解决方法

    把目录下的clw,ncb,aps,opt四个文件删掉,然后进入本程序,按"建立类导向",后再按OK即可. 转载于:https://www.cnblogs.com/704486377 ...

  9. H5C3动画实例，通过基于jQuery的fullpage插件完成

    要点: 1.素材是黑马程序员的,自己重写了下代码,主要是为了体会下h5c3. 2.环境 : 3.主要是加入了pullpage的插件特有的功能帮助开发,其中基于jQuery开发的插件,其定义的方法一般都 ...

最新文章

  1. ios 设备方向判断
  2. 使用组策略禁用注册表编辑工具
  3. rpc进程Linux,linux RPC 测试（转载）
  4. 用python自制背单词程序_c++自制背单词应用
  5. python datetime datetime
  6. 啥是前端开发工程师必会的5种网页布局方法？
  7. 【vue开发问题-解决方法】（八）利用axios拦截器实现elementUI中加载动画，控制加载区域
  8. 多维数组做参数，内存可以看做是线性的
  9. 学会这些 Python 美图技巧，就等着女朋友夸你吧！| 原力计划
  10. 用python编程、假设一年期定期利率_《Python程序设计》题库.pdf
  11. python的DataFrame排序问题
  12. android直播刷礼物特效,Android直播送礼物发消息页面（仿印客直播）
  13. jxls设置隐藏列隐藏行
  14. Python爬虫-微信定时消息发送
  15. LINQ 语句中Take() 和Skip() 总结
  16. Chapter 2 (Matrix Algebra): Partitioned matrices (分块矩阵)
  17. 开关电源共模电感和X电容的选取？
  18. 深度学习baseline模型_深度学习模型在序列标注任务中的应用
  19. 日置（HIOKI）MR8875-30数据处理
  20. 把EXCEL表格导入到MYSQL中_将EXCEL表格中的数据导入mysql数据库表中（两种方法）...

热门文章

  1. 卑微测试员自述：入职新公司一个月，就让我做自动化测试？！
  2. python操作数据库慢_MySQL数据库之python 拉取mysql 慢日志
  3. 注册php tp5,TP5登录注册
  4. 写论文中所需的EndNote x9下载、安装以及与wps相关联教程
  5. pycharm 里面配置pip,安装库
  6. Xception: Deep Learning with Depthwise Separable Convolutions
  7. DenseNet实验
  8. php查看mysql连接数_查看mysql当前连接数
  9. php定时发送生日模块消息_RabbitMQ之消息的可靠性投递
  10. 计算机网络属性设置方法,电脑本地连接的属性设置在哪里