文档章节

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

 时间财富网
发布于 2016/11/23 09:27
字数 1611
阅读 44
收藏 0
点赞 0
评论 1

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编程方面的资讯可以关注时间财富网

© 著作权归作者所有

共有 人打赏支持
粉丝 2
博文 37
码字总数 57314
作品 0
成都
加载中

评论(1)

时间财富网
好东西值得分享
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

jQuery中,html、val与text的区别与联系

文章作者:Tyan 博客:noahsnail.com | CSDN | 简书 本文主要介绍如何使用jQuery中的html(),text()和val()三种方法,用于读取、修改元素的html结构,元素的文本内容,以及表单元素的value值...

quincuntial ⋅ 2016/11/22 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

jQuery学习笔记--效果,操作html元素,遍历DOM树

参考W3school: http://www.w3school.com.cn/jquery/jqueryhideshow.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以...

codingcoge ⋅ 05/19 ⋅ 0

Jquery实现京东tab切图

主要是用jquery实现tab切换,显示不同的内容。也可以用原生js实现,但是实现方式比较繁琐,这里暂时不写原生js实现。jquery相对代码少而且易于理解。 这里用了三种方式实装,在写的时候,发现...

Mrs_CoCo ⋅ 05/07 ⋅ 0

javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。比如,在某个html页面中,发现如下一...

技术小甜 ⋅ 2017/11/07 ⋅ 0

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl ⋅ 05/16 ⋅ 0

JavaWeb04-HTML篇笔记(三)

1.1 案例二:表格隔行换色的案例:1.1.1 需求: 对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的选择器】 基本过滤选择器: 如果样式...

我是小谷粒 ⋅ 05/08 ⋅ 0

huangdf/seezoon-framework-all

项目介绍 基于spring,mybatis,shiro面向接口开发的的一套后台管理系统,方便快速开发;采用常用的技术栈,降低学习成本,项目完全前后端分离,后端定义统一的接口格式,统一参数校验,统一权...

huangdf ⋅ 04/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mysql in action / alter table

change character set ALTER SCHEMA `employees` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci ;ALTER TABLE `employees`.`t2` CHARACTER SET = utf8mb4 , COLLAT......

qwfys ⋅ 今天 ⋅ 0

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

MySQL

查看表相关命令 - 查看表结构    desc 表名- 查看生成表的SQL    show create table 表名- 查看索引    show index from  表名 使用索引和不使用索引 由于索引是专门用于加...

stars永恒 ⋅ 昨天 ⋅ 0

easyui学习笔记

EasyUI常用控件禁用方法 combobox $("#id").combobox({ disabled: true }); ----- $("#id").combobox({ disabled: false}); validatebox $("#id").attr("readonly", true); ----- $("#id").r......

miaojiangmin ⋅ 昨天 ⋅ 0

金山WPS发布了Linux WPS Office

导读 近日,金山WPS发布了Linux WPS Office中文社区版新版本,支持大部分主流Linux系统,功能更加完善,兼容性、稳定性大幅度提升。本次更新WPS将首次在Linux提供专业办公文件云存储服务,实...

问题终结者 ⋅ 昨天 ⋅ 0

springboot2输出metrics到influxdb

序 本文主要研究一下如何将springboot2的metrics输出到influxdb maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-bo......

go4it ⋅ 昨天 ⋅ 0

微信小程序 - 选择图片显示操作菜单

之前我分享过选择图片这个文章,但是我在实际开发测试使用中发现一个问题在使用 wx.chooseImage 选择照片显示出第一格是拍照,后面是相册里的图片。这种实现之前说过了,效果如下。 但是你从...

hello_hp ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部