通过拖动更改菜单顺序 - Laravel

Question

在我的自定义 CMS 中，我创建了 CRUD 菜单，并在前端成功显示它。

现在我正在尝试通过在管理部分中拖动这些菜单项来找到更改顺序的任何解决方案，但仍然没有运气。有谁知道如何使用 Laravel 实现这一目标？我也使用第三方 Laravel 可翻译，所以我将在下面的代码中解释：

菜单模型：

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Dimsav\Translatable\Translatable;

class Menu extends Model
{
    use Translatable;

    public $translatedAttributes = ['title', 'url', 'status'];
}

MenuTranslation 模型：

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class MenuTranslation extends Model
{
    //
}

create_menus_table 迁移：

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateMenusTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('menus', function (Blueprint $table) {
            $table->increments('id');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('menus');
    }
}

create_menus_translations_table 迁移：

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateMenuTranslationsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('menu_translations', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('menu_id')->unsigned();
            $table->string('locale')->index();

            // The actual fields to store the content of your entity. You can add whatever you need.
            $table->string('title');
            $table->string('url')->nullable();
            $table->string('status');

            $table->unique(['menu_id', 'locale']);
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('menu_translations');
    }
}

我的视图索引菜单：

@extends('layouts.admin')

@section('content')
  @if(session()->has('success_message'))
    <div class="alert alert-success">
      {{ session()->get('success_message') }}
    </div>
  @endif
  <h1>Users</h1>
  <a class="btn btn-primary" href="{{ route('menus.create') }}">Create new menu</a>
  <table class="table">
    <thead>
      <tr>
        <th>Id</th>
        <th>Title</th>
        <th>Status</th>
        <th>Created</th>
        <th>Operations</th>
      </tr>
    </thead>
    <tbody>
      @foreach($menus as $menu)
        <tr>
          <td>{{ $menu->id }}</td>
          <td>{{ $menu->title }}</td>
          <td>{{ $menu->status ? 'Active' : 'Disabled' }}</td>
          <td>{{ $menu->created_at->diffForHumans() }}</td>
          <td>
            <a class="btn btn-primary btn-edit" href="{{ route('menus.edit' , $menu->id) }}">Edit</a>
            <form action="{{ route('menus.destroy', $menu->id) }}" method="POST">
              {{ csrf_field() }}
              {{ method_field('DELETE') }}
              <input type="submit" class="btn btn-danger btn-delete" value="Delete">
            </form>
          </td>
        </tr>
      @endforeach
    </tbody>
  </table>
@endsection

正如您在视图菜单索引中所见，我正在显示创建的菜单项。关键是我猜想使用一些 js 和 Ajax 并通过拖动来更改菜单表中的 id 或在数据库中创建一个新列（顺序）。

那么，问题又来了：如何使用 Laravel 拖动这些菜单项并更改数据库中的顺序？

Answer 1

嗯，这不是 laravel 特定的问题，但这里是答案。

因此，对于前端部分，您需要使用拖放插件。例如。 Sortable

Sortable 插件为您提供所有拖放事件。因此，您可以简单地创建一个隐藏字段或仅在 javascript 中创建一个变量，然后在单击保存功能时在 POST 请求中传递该排序值。

现在，您需要将该数据添加到按menu_id 排序的表中。 通过单击保存订单，您将发送所有新排序的元素及其各自的 ID。 而在后端，您只需要循环并更新这些元素。

像这样：

foreach($newSort as $key => $value):
    $menuTranslation = MenuTranslation::findOrFail($key);
    $menuTranslation->update(['menu_id' => $value]);
@endforeach;

一切顺利。

Answer 2

我终于解决了这个问题！

我正在为 Laravel 使用这个插件： https://github.com/boxfrommars/rutorika-sortable

它非常适合对 eloquent 进行排序。经过一些调整、大量阅读和测试，现在它运行良好。 :)