Laravel jquery sortable 不是序列化数据

Question

您好，我正在尝试使用 jquery sortable 和 laravel 在我的数据库中排序一些任务，但是当我尝试序列化数据时，它似乎丢失了，就像我在控制台日志中一样我分配给它的变量是空白的。

例如

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

我也尝试了以下方法，但它在控制台中返回未定义

var id = $(this).attr("data-task-id");
console.log(id);

我的完整jQuery如下：

$('.sortable').sortable({
        cursor: 'move',
        axis: 'y',
        update: function (event, ui) {
            var id = $(this).attr("data-task-id");
            console.log(id);
            var data = $(this).sortable('serialize');
            console.log(data);
            // POST to server using $.post or $.ajax
            $.ajax({
                data: data,
                type: 'POST',
                url: '/backlog/sort/update'
            })
        }
});

我的控制器如下：

public function updateBacklogOrder() {
    $updateRecordsArray = Input::all();

    $i = 1;

    // Loop though the <li>
    foreach ($updateRecordsArray as $recordID) {

        BacklogTask::where('id', $id)->update(array('order' => Input::get('order')));
        $i++;
    }

    return Response::json('ok');  
}

我的blade文件如下：

@foreach($tasks 作为$task) id}}">{{$task->name}} @endforeach

这会呈现以下内容：

任务一任务二任务三任务四

奇怪的是，数据没有使用 sortable 方法进行序列化，如果我将它移到外面，它会抱怨我已经在 sortable 方法之外加载了它。知道我做错了什么吗？？

Answer 1

您需要 id 个属性才能使用 serialize。如果您只有 data 个属性，它将不起作用。结构应该是这样的：

<li id="key_value"></li>

这将输出如下字符串：

key[]=value&key[]=value// etc.

您可以通过设置所需的密钥来自定义更多内容，如下所示：

$(this).sortable('serialize', {key: "sort"})

这将输出：

sort=value&sort-value// etc.

但你需要 id 属性，并且它必须正确格式化（默认是键和值之间的下划线，但你也可以使用“=”和“-”。在你的情况下，你可以添加ids 在更新时动态显示，但直接在 HTML 中设置它们会更有效。但这应该给出一个输出：

$('.sortable').sortable({
        cursor: 'move',
        axis: 'y',
        update: function (event, ui) {
            var id = $(this).attr("data-task-id");
            $(this).find('[data-task-id]').each(function () {
                 $(this).attr('id', 'task-' + $(this).data('task-id'));
            });
            console.log(id);
            var data = $(this).sortable('serialize', {key:"task-id");
            console.log(data);
            // POST to server using $.post or $.ajax
            $.ajax({
                data: data,
                type: 'POST',
                url: '/backlog/sort/update'
            })
        }
});

编辑：

参数的顺序将按照它们在可排序中的顺序排列。像这样：

task-id=value_of_first&task-id=value_of_second //etc.

第二次编辑：

原来有一种方法可以在序列化中使用其他属性，但是您需要设置不同的选项。这应该可以在不分配 id 的情况下工作：

var data = $(this).sortable('serialize', {key:'task-id',attribute: 'data-task-id', expression: /(\w+)/});

进一步澄清一下，如果你同时使用这两个部分，你会发现你可以 post 根据你的需要得到几乎你想要的字符串。在这一点上，根据我从你的控制器中了解到的情况，也许序列化不一定是最好的方法，但由于你已经有了设置，你可以这样发送 id=order 形式的参数：

    $(this).find('[data-task-id]').each(function (i) {
        $(this).attr('data-to-send', $(this).data('task-id')+'_'+i);
    });
    $(this).sortable('serialize',{attribute: 'data-to-send'}).replace(/\[\]/g, '');

Laravel jquery sortable 不是序列化数据

Laravel jquery sortable is not serialising data

jquery

jquery-ui-sortable

eloquent

laravel-4