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

Question

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

现在我试图通过在管理部分拖动这些菜单项来找到更改顺序的任何解决方案，但仍然没有成功。有谁知道如何用 Laravel 实现这个？另外我使用第三方Laravel translatable，所以我会在下面的代码中解释：

菜单模型：

<?php

namespace App;

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

class Menu extends Model
{
    use Translatable;

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

菜单翻译模型：

<?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 table 或在数据库中创建一个新列（顺序）。

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

Answer 1

好吧，这都不是 laravel 特定的问题，但这里是答案。

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

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

现在，您需要将该数据添加到按 menu_id 排序的 table 中。通过单击保存订单，您将发送所有新订购的元素及其各自的 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。通过一些调整、大量阅读和测试，现在它运行良好。 :)

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

Changing menus order by dragging - Laravel

drag

laravel