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以更新每条记录，而不仅仅是已拖动的记录。

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

修改

有很多成员的helo，我设法修改了以下功能：

    $("#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/

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

jQuery可排序更新整个数据集

1 个答案: