Question

我有一个由复选框组成的表单。每个复选框都有自己的值（value1，value2，value3，value4）。提交表单后，值将根据用户选中的复选框存储在数据库中。

因此，如果用户选中第一个和第三个复选框，则存储在db中的值将采用格式＆＃34; value1，value3＆＃34;。

现在，我想为用户提供排序选项。因此，如果用户选中复选框，则其值应显示在下面作为列表，然后用户应该能够根据自己的喜好对值进行上下排序。

我通过使用jquery和ajax部分实现了它。

$("input[type='checkbox']").change(function(){
    var data = $('#form').serializeArray();
    $.ajax({
        url: "{{URL::action('CategoryController@checkboxAjaxRequest')}}",
        type: "GET",
        data: {data: data},
        success: function(response){
            $("ul #sortable").html(response);               
        }
    });
});

返回的回复格式为

<li id="item-value1" style="cursor: pointer;">Value 1</li>
<li id="item-value2" style="cursor: pointer;">Value 2</li>

我使用了回复并将其添加到已存在的空白无序列表中，其ID为"sortable"

我进一步使用jQuery使这个列表可以排序

 $('ul').sortable({
    axis: 'y',
    stop: function (event, ui) {
        var data = $(this).sortable('serialize');

        $("input[id='opt_sort']").attr('value', data);
    }
 });

我创建了一个隐藏的输入，其值已用排序的列表顺序填充，并使用此输入来检查和存储复选框。

因此，现在用户可以选择复选框，然后对其进行排序。

一切正常，但有一个问题。如果用户选中某个复选框，然后将列表排序为其首选项，然后再次选中另一个复选框，则已排序的列表将重置。因此用户必须从头开始重新排序。

我尝试了各种方法来解决这个问题但无法解决这个问题。任何解决方案？

Answer 1

您应该以某种方式在数据库中存储排序顺序。在不知道如何存储这些复选框的数据的情况下，很难说最好的方法，但可能与排序顺序列一样简单。然后在sortable.stop函数调用中，您需要添加一个ajax调用以将排序顺序提交到数据库。例如，如果您有一个排序顺序列，那么您将更新这些值。如果您需要保留DOM更改，那么您必须注意使后端和前端与您的ajax调用保持同步。

如何使用jquery对laravel中的无序列表进行排序

1 个答案: