通過jQuery訂購django更改列表頁面？

Question

我希望能夠通過jQuery腳本重新排序模型列表。

我已經在Model更新頁面的inLines中重新排序，但我想將它添加到change_list頁面？

這可能嗎？我使用的是Django 1.1，因此可以訪問操作表，如果這樣可以讓事情變得更簡單...

任何信息將不勝感激。

Answer 1

我設法找到解決方案。我以爲我會發布它爲別人...

下面是一個例子模型

class ExmapleModel(models.Model) 
    order = models.PositiveSmallIntegerField() 
    title = models.CharField() 

admin類是這樣，請注意添加的模板和list_editable領域。

class ExampleModelAdmin(admin.ModelAdmin): 
    ordering = ('order') 
    list_display = ('title', 'order',) 
    list_editable = ('order',) 
    change_list_template = 'admin/exampleModel/change_list.html' 

change_list.html模板看起來像這樣。

{% extends "admin/change_list.html" %} 
{% load adminmedia admin_list i18n %} 

{% block extrastyle %} 
    {{ block.super }} 
    <script type="text/javascript" src="path/to/static/url/js/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="path/to/static/url/js/admin/change_list_sort.js"></script> 
{% endblock %} 

所有這一切是加載在jQuery庫和我們的自定義change_list_sort.js文件。

最後，我在這裏跟着這個例子 - http://www.lukedingle.com/javascript/sortable-table-rows-with-jquery-draggable-rows/ - 並更改了幾行代碼以使其更新訂單號。以下是我的代碼。

$(document).ready(function(){ 
    var mouseX, mouseY, lastX, lastY = 0; 
    // This function captures the x and y positions anytime the mouse moves in the document. 
    $().mousemove(function(e) { mouseX = e.pageX; mouseY = e.pageY; }); 
    var need_select_workaround = typeof $(document).attr('onselectstart') != 'undefined'; 

    $('table tbody tr').live('mousedown', function (e) { 
     lastY = mouseY; 

     var tr = $(this); 

     // This is just for flashiness. It fades the TR element out to an opacity of 0.2 while it is being moved. 
     tr.fadeTo('fast', 0.2); 


     // jQuery has a fantastic function called mouseenter() which fires when the mouse enters 
     // This code fires a function each time the mouse enters over any TR inside the tbody -- except $(this) one 
     $('tr', tr.parent()).not(this).mouseenter(function(){ 
      // Check mouse coordinates to see whether to pop this before or after 
      // If mouseY has decreased, we are moving UP the page and insert tr before $(this) tr where 
      // $(this) is the tr that is being hovered over. If mouseY has decreased, we insert after 
      if (mouseY > lastY) { 
       $(this).after(tr); 
      } else { 
       $(this).before(tr); 
      } 
      // Store the current location of the mouse for next time a mouseenter event triggers 
      lastY = mouseY; 
     }); 

     // Now, bind a function that runs on the very next mouseup event that occurs on the page 
     // This checks for a mouse up *anywhere*, not just on table rows so that the function runs even 
     // if the mouse is dragged outside of the table. 
     $('body').mouseup(function() { 
      //Fade the TR element back to full opacity 
      tr.fadeTo('fast', 1); 
      // Remove the mouseenter events from the tbody so that the TR element stops being moved 
      $('tr', tr.parent()).unbind('mouseenter'); 
      // Remove this mouseup function until next time 
      $('body').unbind('mouseup'); 

      // Make text selectable for IE again with 
      // The workaround for IE based browsers 
      if (need_select_workaround) 
       $(document).unbind('selectstart'); 

      reorder(); // This function just renumbers the position and adjusts the zebra striping, not required at all 
     }); 



     // This part if important. Preventing the default action and returning false will 
     // Stop any text in the table from being highlighted (this can cause problems when dragging elements) 
     e.preventDefault(); 

     // The workaround for IE based browers 
     if (need_select_workaround) 
      $(document).bind('selectstart', function() { return false; }); 
      return false; 

    }).css('cursor', 'move'); 

    function reorder() { 
     var position = 1; 
     $('table tbody tr').each(function() { 
      // Change the text of the first TD element inside this TR 
      $('td:last input', $(this)).val(position); 
      //Now remove current row class and add the correct one 
      $(this).removeClass('row1 row2').addClass(position % 2 ? 'row1' : 'row2'); 
      position += 1; 

     }); 
     $("form:last").submit(); 
    } 
}); 

希望能幫助別人！