jQuery sortable更新整组数据

Question

我有一个这样的 HTML 列表：

<ul id="sortable">
        <li class="ui-state-default" id="31">
              list item
        </li>

        <li class="ui-state-default" id="32">  
               list item            
        </li>
        <li class="ui-state-default" id="33">  
               list item            
        </li>
</ul>

和以下 jQuery 函数：

$("#sortable" ).sortable({
   update: function(e,ui){
     $.ajax({
       url:'/ajaxUpdateOrder', 
       data: {
         id: ui.item.attr('id'),
         position: ui.item.index()
       }
     });
   } 
});

它工作正常，但我需要的是传递整组 IDs 和 priorities 以更新每条记录，而不仅仅是被拖动的记录。

非常感谢任何帮助或指导。

编辑

在其中一位成员的帮助下，我成功地修改了函数，如下所示：

    $("#sortable" ).sortable({
       update: function(e,ui){
         var lis = $("#sortable li");
         var ids = lis.map(function(i,el){return {id:el.id, priority:el.dataset.priority}}).get();
         console.log(JSON.stringify(ids));
         $.ajax({
           type: 'POST',
           url:'/BetterMeetings/meetings_tasks/ajax_update_order', 
           data: {
             ids:ids
           }
         });
       } 
    });

然而，我在控制台中得到的数据是这样的：

[{"id":"157"},{"id":"158"},{"id":"159"},{"id":"156"},{"id":"160"},{"id":"161"},{"id":"162"},{"id":"163"},{"id":"164"}]

所以它仍然缺少优先顺序。

Answer 1

您可以将数据字段添加到您的 html 标签中：

<ul id="sortable">
    <li class="ui-state-default" id="31" data-priority="2">
          list item 31
    </li>

    <li class="ui-state-default" id="32" data-priority="4">  
           list item 32       
    </li>
    <li class="ui-state-default" id="33" data-priority="8">  
           list item 33
    </li>
</ul>

$("#sortable" ).sortable({
   update: function(e,ui){
     var lis = $("#sortable li");
     var ids = lis.map(function(i,el){return {id:el.id, priority:el.dataset.priority}}).get();
     console.log(JSON.stringify(ids));
     $.ajax({
       url:'/ajaxUpdateOrder',
       method:'POST',
       data: {
         ids:ids
       }
     });
   } 
});

在 jsfiddle 上直播：https://jsfiddle.net/9kdqm98u/4/

如您所见，数组 post [{"id":"31","priority":"2"},{"id":"33","priority":"8"},{"id":"32","priority":"4"}] 包含按优先顺序排列的所有 id-s（在我将 33 移动到第一个之后），因此在后端您拥有所有根据此数组排列优先级。

jQuery sortable更新整组数据

jQuery sortable update the whole set of data

jquery

jquery-ui

jquery-ui-sortable