jQuery的排序更新整個數據集

我有一個HTML表這樣的：jQuery的排序更新整個數據集

<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"}]

所以它仍然缺少優先順序。

來源

2016-02-02 WpDoe

這取決於你的後端期望什麼，展示一個例子 – Gavriel

我只有爲單個記錄更新編寫的後備解決方案，所以基本上任何類型的數據發送到服務都會這樣做，因爲我將爲此調整後端功能。我認爲一個數組數組是一個很好的方法，只是我無法找到jQuery。 – WpDoe

請接受用演示演示回答您的問題的答案，或者根據您的（並非如此）原始「要求」認爲它不是一個好的格式：「發送到服務的任何類型的數據都會這樣做」，然後添加對您的問題的預期結果 – Gavriel

您可以添加數據字段到你的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個，成爲第一個），所以在後端，根據這個數組，所有的優先級依次排列。

來源

2016-02-02 09:06:31 Gavriel

感謝您的回覆，但是，我剛剛收到'Illegal invocation'錯誤。 – WpDoe

@WpDoe，更新了答案和jsfiddle。我忘了添加.get（）。如果您仍然遇到錯誤，請給我更具體的細節：哪一行，您使用的瀏覽器。 jsfiddle是否適合你？你必須打開javascriopt控制檯，它會打印出一個數組中的ID。 – Gavriel

再次感謝你的光臨。 jQuery函數現在可以工作，但是隻返回ID，當我之前說過，我需要提供具有元素：'id'和'order/priority'數字的參數。 – WpDoe

jQuery的排序更新整個數據集

回答

相關問題