如何为 Jquery-Sortable 分隔 UUid

Question

我想为我的 larave 项目使用 jquery-ui sortable 方法。当我用 id 分隔 <tr> 行时，没有问题。

示例；

<tr id="item-1">

但是如果我想使用 uuids 而不是 id，我的 tr 行会变成这样：

<tr id="item-b20s0b82-dc01-4e9a-a7a6-cd60ff5f9165">

所以，如果我尝试这样使用，它会给我错误。我使用“-”来分隔，但 uuids 也有“-”

我该如何解决这个问题？谢谢...

更新：

index.blade 我的一部分 table（试图整理table）

<tbody id="sortable">
                @foreach($data['blogs'] as $blogs)
                    <tr id="item-{{$blogs->id}}">
                        <td>{{$loop->iteration}}</td>
                        <td><img width="100" src="/images/blogs/{{$blogs->blogs_file}}" alt=""></td>
                        <td class="sortable">{{$blogs->blogs_title}}</td>
                        <td>{{Illuminate\Support\Str::limit($blogs->blogs_content, 15)}}</td>
                        <td align="center" width="20">
                            <a href="#"><i
                                    class="fa fa-pencil-square"></i></a>
                        </td>
                        <td align="center" width="20">
                            <a href="javascript:void(0)"><i id="{{$blogs->uuid}}"
                                                            class="fa fa-trash-o"></i></a>
                        </td>
                    </tr>
                @endforeach
                </tbody>

jquery :

$(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('#sortable').sortable({
                revert: true,
                handle: ".sortable",
                stop: function (event, ui) {
                    var data = $(this).sortable('serialize');
                    $.ajax({
                        type: "POST",
                        data: data,
                        url: "{{route('blogs.Sortable')}}",
                        success: function (msg) {

                            if (msg) {
                                alertify.success('İşlem Başarılı');
                            } else {
                                alertify.error('İşlem Başarısız');
                            }
                        }
                    });
                }
            });
            $('#sortable').disableSelection();
        });

博客控制器：

public function sortable()
    {
        foreach ($_POST['item'] as $key => $value) {
            $blogs = Blogs::find(intval($value));
            $blogs->blogs_must = intval($key);
            $blogs->save();
        }
        echo true;
    }

在这种用法中，它工作得很好。但是当我改变 <tr id="item-{{$blogs->id}}"> 至

<tr id="item-{{$blogs->uuid}}">

它失败了。

Answer 1

更新：我终于想通了 out.The 这部分的问题：

var data = $(this).sortable('serialize');

所以如果我想使用 UUID 而不是 ID，我应该这样做：

在表体中；

id="item_{{$blogs->uuid}}"

比我的 Jquery 代码：

var data = $(this).sortable('serialize',{expression: /(.+)_(.+)/ });

大功告成。

如何为 Jquery-Sortable 分隔 UUid

How To Separate UUids For Jquery-Sortable

jquery

uuid

jquery-ui