Eine Django-Änderungsliste über jQuery bestellen?

Question

Ich möchte Listen von Modellen über ein jQuery-Skript neu anordnen können.

Ich habe bereits innerhalb von inLines auf der Modellaktualisierungsseite neu angeordnet, aber ich möchte es auch der change_list Seite hinzufügen?

Ist das möglich? Ich benutze Django 1.1 so haben Zugang zu Action-Sheets, wenn das die Dinge einfacher macht ...

Alle Informationen wären willkommen.

Answer 1

Ich habe es geschafft, eine Lösung zu finden. Dachte ich, es für jemand anderes schreiben würde ...

Hier ist ein Beispiel Modell

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

Der Admin-Klasse wie folgt aussehen würde, beachten Sie die zusätzliche Vorlage und list_editable Feld.

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

Die change_list.html Vorlage würde so aussehen.

{% 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 %} 

All dies wird in der jquery-Bibliothek und in unserer benutzerdefinierten Datei change_list_sort.js geladen.

Schließlich folgte ich diesem Beispiel hier - http://www.lukedingle.com/javascript/sortable-table-rows-with-jquery-draggable-rows/ - und ändert ein paar Zeilen Code, um es die Bestellnummer zu aktualisieren. Unten ist mein Code.

$(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(); 
    } 
}); 

Hoffnung, dass jemand hilft!