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 migration：

<?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 migration：

<?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

嗯，这一切都不是特定的问题，但这里是答案。

因此，对于前端部分，您需要使用拖放插件。例如。 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

非常适合排序雄辩。通过一些调整，大量的阅读和测试，现在它工作得很好。：）

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

2 个答案: