Ordering a django change list page via jQuery?

Question

I would like to be able to reorder lists of Models via a jQuery script.

I already have reordering within inLines on the Model update page, but I'd like to add it to the change_list page aswell?

Is this possible? I'm using Django 1.1 so have access to action sheets, if that makes things easier...

Any information would be appreciated.

Answer 1

I managed to find a solution. Thought I'd post it for anyone else...

Here's an example model

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

The admin class would look like this, note the added template and list_editable field.

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

The change_list.html template would look like this.

{% 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 this does is load in the jquery library and our custom change_list_sort.js file.

Finally, I followed this example here - http://www.lukedingle.com/javascript/sortable-table-rows-with-jquery-draggable-rows/ - and changes a few lines of code to make it update the order number. Below is my 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();
    }
});

Hope that helps someone!